verben-workflow-ui 0.2.2 → 0.2.4

package/fesm2022/verben-workflow-ui.mjs

@@ -338,7 +338,7 @@ class HttpWebRequestService {
     buildHeaders() {
         return {
             'Content-Type': 'application/json',
-            Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZUlEIjoiUk9MLVpYQVhYVCIsIlRlbmFudElkIjoiUERMVEM2IiwiU2VydmljZU5hbWUiOiJXaGl0ZTM2MCIsIm5iZiI6MTc0MDkwODYxMywiZXhwIjoxNzQxMTI0NjEzLCJpYXQiOjE3NDA5MDg2MTN9.3V63j6NICpTItBjowYuHI96sjYLwoPghryCd1u1-kSw',
+            Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZUlEIjoiUk9MLVpYQVhYVCIsIlRlbmFudElkIjoiUERMVEM2IiwiU2VydmljZU5hbWUiOiJXaGl0ZTM2MCIsIkNvbXBhbnkiOiJDT00tNkxJNjNIIiwibmJmIjoxNzQxMzM0MDg1LCJleHAiOjE3NDE1NTAwODUsImlhdCI6MTc0MTMzNDA4NX0.94flkNSAlkzArxif_0E8MNzbN3-ulXSqQb0u8l8lMqk',
         };
     }
     buildUrl(url, baseUrl) {
@@ -2585,6 +2585,15 @@ class WorkflowDesignerState {
     draggingConnectionData = {};
     workflowFormId = null;
     workflowFormName = null;
+    workflowId = null;
+    workflow = null;
+    swimlaneRecord = {};
+    stageRecord = {};
+    actionRecord = {};
+    setWorkflowId(id) {
+        this.workflowId = id;
+    }
+    laneIdToIndexMap = new Map();
     connectionRules = {
         stage: ['stage', 'decision', 'subflow', 'form'],
         decision: ['stage'], // Decisions can only connect to Stages
@@ -2606,6 +2615,9 @@ class WorkflowDesignerState {
             },
         ]);
     }
+    registerLaneMapping(laneId, swimlaneIndex) {
+        this.laneIdToIndexMap.set(laneId, swimlaneIndex);
+    }
     // Add this method to generate connection points for a node
     generateConnectionPoints(node) {
         const points = [];
@@ -2744,7 +2756,7 @@ class WorkflowDesignerState {
         }
         return points;
     }
-    addNode(swimlaneIndex, type, x, y, stageData, workflowData) {
+    addNode(swimlaneIndex, type, x, y, stageData, workflowData, useExistingId = false) {
         if (!this.swimlanes[swimlaneIndex] ||
             !type ||
             (type !== 'stage' &&
@@ -2755,15 +2767,17 @@ class WorkflowDesignerState {
         }
         // Adjust position relative to swimlane
         const adjustedY = y - swimlaneIndex * 263 - 40; // Subtracting header height
-        // Generate a unique ID
-        const id = `${type}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        // Generate a unique ID or use existing
+        const id = useExistingId && stageData?.Id
+            ? stageData.Id
+            : `${type}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
         // Create node with dimensions based on type
         const node = {
             id,
             type,
             x,
             y: adjustedY,
-            width: type === 'subflow' ? 88 : 169, // Width from SVG
+            width: type === 'subflow' ? 150 : 169, // Width from SVG
             height: 100, // Height from SVG
             isStartNode: false, // Default to false
             stageData: stageData || {}, // Store stage data
@@ -2909,119 +2923,6 @@ class WorkflowDesignerState {
         const sourceNodeType = sourceNodeInfo.node.type;
         return this.connectionRules[sourceNodeType] || [];
     }
-    // transformToWorkflowModel(): Workflow {
-    //   // Create base workflow object
-    //   const workflow: Workflow = {
-    //     Name: 'New Workflow', // Default name or get it from somewhere
-    //     Description: '', // Default description
-    //     StageEntryRule: '',
-    //     AssignmentType: TaskAssignmentType.AutoRoute, // Default assignment type
-    //     Status: Status.Active, // Default status
-    //     Actions: [],
-    //     Lanes: [],
-    //     Stages: [],
-    //   };
-    //   // Transform swimlanes to SwimLane[]
-    //   workflow.Lanes = this.swimlanes.map((swimlane, index) => {
-    //     return {
-    //       Id: `lane-${index}`,
-    //       Workflow: workflow.Id,
-    //       Tags: swimlane.tags,
-    //       Position: swimlane.order,
-    //       Coordinates: { X: 0, Y: swimlane.order * 263 }, // Calculate Y position based on order
-    //       Size: { Width: 3000, Height: 263 }, // Default size
-    //       // Add other required properties from BaseModel
-    //       Code: '',
-    //       TenantId: '',
-    //       id: `lane-${index}`,
-    //       ServiceName: '',
-    //       CreatedAt: new Date(),
-    //       UpdatedAt: new Date(),
-    //       DataState: ObjectState.New,
-    //     };
-    //   });
-    //   // Transform nodes to WorkflowStage[]
-    //   const stages: WorkflowStage[] = [];
-    //   this.swimlanes.forEach((swimlane, swimlaneIndex) => {
-    //     swimlane.nodes?.forEach((node) => {
-    //       if (node.type === 'stage') {
-    //         // Create a stage from the node
-    //         const stage: WorkflowStage = {
-    //           Id: node.id,
-    //           Workflow: workflow.Id,
-    //           Name: node.stageData?.Name || 'Unnamed Stage',
-    //           Description: node.stageData?.Description || '',
-    //           Duration: node.stageData?.Duration || 0,
-    //           PassOnRule: node.stageData?.PassOnRule || '',
-    //           ActorRule: node.stageData?.ActorRule || StageActorRule.None,
-    //           MinNoOfActor: node.stageData?.MinNoOfActor || 0,
-    //           IsParallel: false, // Default value, will be updated below
-    //           IsEntryPoint: node.isStartNode,
-    //           IsExitPoint: false, // Determine based on connections
-    //           Tags: node.stageData?.Tags || [],
-    //           Forms: node.stageData?.Forms || [],
-    //           AllowMultiSubProcess: false,
-    //           AssignmentType:
-    //             node.stageData?.AssignmentType || TaskAssignmentType.AutoRoute,
-    //           SubWorkFlow: node.stageData?.SubWorkFlow || '',
-    //           SwimLane: workflow.Lanes[swimlaneIndex].Id,
-    //           Coordinates: { X: node.x, Y: node.y },
-    //           IsSubProcess: false,
-    //           // Add other required properties from BaseModel
-    //           Code: '',
-    //           TenantId: '',
-    //           id: node.id,
-    //           ServiceName: '',
-    //           CreatedAt: new Date(),
-    //           UpdatedAt: new Date(),
-    //           DataState: ObjectState.New,
-    //         };
-    //         stages.push(stage);
-    //       }
-    //     });
-    //   });
-    //   // Now process the connections to set IsParallel on target stages
-    //   this.connections.forEach((conn) => {
-    //     const sourceNodeInfo = this.findNodeById(conn.sourceNodeId);
-    //     if (
-    //       sourceNodeInfo &&
-    //       sourceNodeInfo.node.type === 'stage' &&
-    //       sourceNodeInfo.node.stageData?.hasParallel === true
-    //     ) {
-    //       // Find the target stage in our stages array
-    //       const targetStage = stages.find((s) => s.Id === conn.targetNodeId);
-    //       if (targetStage) {
-    //         // Set IsParallel to true for this target stage
-    //         targetStage.IsParallel = true;
-    //       }
-    //     }
-    //   });
-    //   // Transform connections to WorkflowAction[]
-    //   workflow.Actions = this.connections.map((conn) => {
-    //     const sourceNode = this.findNodeById(conn.sourceNodeId)?.node;
-    //     const targetNode = this.findNodeById(conn.targetNodeId)?.node;
-    //     return {
-    //       Id: conn.id,
-    //       Workflow: workflow.Id,
-    //       Name: `Action from ${sourceNode?.stageData?.Name || 'Unknown'} to ${
-    //         targetNode?.stageData?.Name || 'Unknown'
-    //       }`,
-    //       FromStage: conn.sourceNodeId,
-    //       ToStage: conn.targetNodeId,
-    //       IsParallel: targetNode?.stageData?.IsParallel || false,
-    //       // Add other required properties from BaseModel
-    //       Code: '',
-    //       TenantId: '',
-    //       id: conn.id,
-    //       ServiceName: '',
-    //       CreatedAt: new Date(),
-    //       UpdatedAt: new Date(),
-    //       DataState: ObjectState.New,
-    //     };
-    //   });
-    //   workflow.Stages = stages;
-    //   return workflow;
-    // }
     updateSwimlane(index, name, tags) {
         console.log('State: Updating swimlane at index', index, 'with name', name, 'and tags', tags);
         if (index >= 0 && index < this.swimlanes.length) {
@@ -3037,116 +2938,253 @@ class WorkflowDesignerState {
         }
     }
     transformToWorkflowModel() {
-        // Create base workflow object
-        const workflow = {
-            Id: '', // Will be assigned by backend on first save
-            Code: '',
-            TenantId: '',
-            id: '',
-            ServiceName: '',
-            CreatedAt: new Date(),
-            UpdatedAt: new Date(),
-            DataState: ObjectState.New,
-            Name: 'New Workflow', // Default name or get it from somewhere
-            Description: '', // Default description
-            StageEntryRule: '',
-            Form: this.workflowFormId || undefined,
-            AssignmentType: TaskAssignmentType.AutoRoute, // Default assignment type
-            Status: Status.Active, // Default status
-            Actions: [],
-            Lanes: [],
-            Stages: [],
-        };
-        // Transform swimlanes to SwimLane[]
-        workflow.Lanes = this.swimlanes.map((swimlane, index) => {
-            return {
-                Id: `lane-${index}`,
-                Code: '',
+        // Use stored workflow if available, otherwise create a new one
+        const workflow = this.workflow
+            ? { ...this.workflow }
+            : {
+                // BaseModel properties
+                Id: this.wasLoadedFromApi(this.workflowId || '')
+                    ? this.workflowId || ''
+                    : '',
+                Code: this.getCodeForObject(this.workflowId || ''),
                 TenantId: '',
-                id: `lane-${index}`,
+                id: this.wasLoadedFromApi(this.workflowId || '')
+                    ? this.workflowId || ''
+                    : '',
                 ServiceName: '',
                 CreatedAt: new Date(),
                 UpdatedAt: new Date(),
-                DataState: ObjectState.New,
-                Workflow: workflow.Id,
-                Tags: swimlane.tags || [],
-                Position: swimlane.order,
-                Coordinates: { X: 0, Y: swimlane.order * 263 }, // Calculate Y position based on order
-                Size: { Width: 3000, Height: 263 }, // Default size
+                DataState: this.wasLoadedFromApi(this.workflowId || '')
+                    ? ObjectState.Changed
+                    : ObjectState.New,
+                // Workflow specific properties
+                Name: 'New Workflow',
+                Description: '',
+                StageEntryRule: '',
+                Form: this.workflowFormId || undefined,
+                AssignmentType: TaskAssignmentType.AutoRoute,
+                Operation: '',
+                Status: Status.Active,
+                Actions: [],
+                Lanes: [],
+                Stages: [],
             };
+        // Update workflow form if changed
+        if (this.workflowFormId !== this.workflow?.Form) {
+            workflow.Form = this.workflowFormId || workflow.Form;
+        }
+        // Transform swimlanes to SwimLane[]
+        workflow.Lanes = this.swimlanes.map((swimlane) => {
+            // Check if this is an existing swimlane
+            if (swimlane.id && this.swimlaneRecord[swimlane.id]) {
+                // Update existing lane with changed values
+                const existingLane = this.swimlaneRecord[swimlane.id];
+                return {
+                    ...existingLane,
+                    Tags: swimlane.tags,
+                    Position: swimlane.order,
+                    Coordinates: { X: 0, Y: swimlane.order * 263 },
+                    DataState: ObjectState.Changed,
+                    UpdatedAt: new Date(),
+                };
+            }
+            else {
+                // Generate a new ID for new swimlanes if not already set
+                const laneId = swimlane.id ||
+                    `lane-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+                // Create new lane
+                return {
+                    Id: '',
+                    Code: '',
+                    TenantId: '',
+                    id: laneId,
+                    ServiceName: '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    Workflow: workflow.Id,
+                    Tags: swimlane.tags || [],
+                    Position: swimlane.order,
+                    Coordinates: { X: 0, Y: swimlane.order * 263 },
+                    Size: { Width: 3000, Height: 263 },
+                };
+            }
         });
         // Transform nodes to WorkflowStage[]
         const stages = [];
         this.swimlanes.forEach((swimlane, swimlaneIndex) => {
             swimlane.nodes?.forEach((node) => {
                 if (node.type === 'stage') {
-                    // Create a stage from the node
-                    const stage = {
-                        Id: node.id,
-                        Code: '',
-                        TenantId: '',
-                        id: node.id,
-                        ServiceName: '',
-                        CreatedAt: new Date(),
-                        UpdatedAt: new Date(),
-                        DataState: ObjectState.New,
-                        Workflow: workflow.Id,
-                        Name: node.stageData?.Name || 'Unnamed Stage',
-                        Description: node.stageData?.Description || '',
-                        Duration: node.stageData?.Duration || 0,
-                        PassOnRule: node.stageData?.PassOnRule || '',
-                        ActorRule: node.stageData?.ActorRule || StageActorRule.None,
-                        MinNoOfActor: node.stageData?.MinNoOfActor || 0,
-                        IsParallel: node.stageData?.IsParallel || false,
-                        IsEntryPoint: node.isStartNode,
-                        IsExitPoint: false, // Determine based on outgoing connections
-                        Tags: node.stageData?.Tags || [],
-                        Forms: node.stageData?.formId ? [node.stageData.formId] : [],
-                        AllowMultiSubProcess: false,
-                        AssignmentType: TaskAssignmentType.AutoRoute,
-                        SubWorkFlow: '',
-                        SwimLane: workflow.Lanes[swimlaneIndex].Id,
-                        Coordinates: { X: node.x, Y: node.y },
-                        IsSubProcess: false,
-                    };
-                    stages.push(stage);
+                    // Check if this is an existing stage
+                    if (this.stageRecord[node.id]) {
+                        // Update existing stage with changed values
+                        const existingStage = this.stageRecord[node.id];
+                        // Create a new object with updated properties
+                        const updatedStage = {
+                            ...existingStage,
+                            DataState: ObjectState.Changed,
+                            UpdatedAt: new Date(),
+                        };
+                        // Update properties that may have changed
+                        if (node.stageData?.Name !== undefined)
+                            updatedStage.Name = node.stageData.Name;
+                        if (node.stageData?.Description !== undefined)
+                            updatedStage.Description = node.stageData.Description;
+                        if (node.stageData?.Duration !== undefined)
+                            updatedStage.Duration = node.stageData.Duration;
+                        if (node.stageData?.PassOnRule !== undefined)
+                            updatedStage.PassOnRule = node.stageData.PassOnRule;
+                        if (node.stageData?.ActorRule !== undefined)
+                            updatedStage.ActorRule = node.stageData.ActorRule;
+                        if (node.stageData?.MinNoOfActor !== undefined)
+                            updatedStage.MinNoOfActor = node.stageData.MinNoOfActor;
+                        if (node.stageData?.IsParallel !== undefined)
+                            updatedStage.IsParallel = node.stageData.IsParallel;
+                        if (node.stageData?.Tags)
+                            updatedStage.Tags = node.stageData.Tags;
+                        // Always update these properties
+                        updatedStage.IsEntryPoint = node.isStartNode;
+                        updatedStage.Coordinates = { X: node.x, Y: node.y };
+                        updatedStage.SwimLane = this.swimlanes[swimlaneIndex].id || '';
+                        // Add to stages
+                        stages.push(updatedStage);
+                    }
+                    else {
+                        // Create a new stage
+                        stages.push({
+                            Id: '',
+                            Code: '',
+                            TenantId: '',
+                            id: node.id,
+                            ServiceName: '',
+                            CreatedAt: new Date(),
+                            UpdatedAt: new Date(),
+                            DataState: ObjectState.New,
+                            Workflow: workflow.Id,
+                            Name: node.stageData?.Name || 'Unnamed Stage',
+                            Description: node.stageData?.Description || '',
+                            Duration: node.stageData?.Duration || 0,
+                            PassOnRule: node.stageData?.PassOnRule || '',
+                            ActorRule: node.stageData?.ActorRule || StageActorRule.None,
+                            MinNoOfActor: node.stageData?.MinNoOfActor || 0,
+                            IsParallel: node.stageData?.IsParallel || false,
+                            IsEntryPoint: node.isStartNode,
+                            IsExitPoint: false, // Will be updated below
+                            Tags: node.stageData?.Tags || [],
+                            Form: node.stageData?.formId ?? '',
+                            AllowMultiSubProcess: false,
+                            AssignmentType: TaskAssignmentType.AutoRoute,
+                            SubWorkFlow: '',
+                            SwimLane: this.swimlanes[swimlaneIndex].id || '',
+                            Coordinates: { X: node.x, Y: node.y },
+                            IsSubProcess: false,
+                            Key: node.stageData?.Key || undefined,
+                        });
+                    }
                 }
             });
         });
-        // Check which stages have no outgoing connections - they are exit points
-        this.connections.forEach((conn) => {
-            const targetStage = stages.find((s) => s.Id === conn.targetNodeId);
-            if (targetStage) {
-                // Check if this target has any outgoing connections
-                const hasOutgoingConnections = this.connections.some((c) => c.sourceNodeId === targetStage.Id);
-                if (!hasOutgoingConnections) {
-                    targetStage.IsExitPoint = true;
-                }
+        // Determine which stages are exit points (no outgoing connections)
+        stages.forEach((stage) => {
+            const hasOutgoingConnections = this.connections.some((conn) => conn.sourceNodeId === stage.Id || conn.sourceNodeId === stage.id);
+            if (!hasOutgoingConnections) {
+                stage.IsExitPoint = true;
             }
         });
         // Transform connections to WorkflowAction[]
-        workflow.Actions = this.connections.map((conn) => {
+        const actions = [];
+        this.connections.forEach((conn) => {
             const sourceNode = this.findNodeById(conn.sourceNodeId)?.node;
             const targetNode = this.findNodeById(conn.targetNodeId)?.node;
-            return {
-                Id: conn.id,
-                Code: '',
-                TenantId: '',
-                id: conn.id,
-                ServiceName: '',
-                CreatedAt: new Date(),
-                UpdatedAt: new Date(),
-                DataState: ObjectState.New,
-                Workflow: workflow.Id,
-                Name: `Action from ${sourceNode?.stageData?.Name || 'Unknown'} to ${targetNode?.stageData?.Name || 'Unknown'}`,
-                FromStage: conn.sourceNodeId,
-                ToStage: conn.targetNodeId,
-                IsParallel: sourceNode?.stageData?.hasParallel || false,
-            };
+            // Check if this is an existing action
+            if (this.actionRecord[conn.id]) {
+                // Update existing action with changed values
+                const existingAction = this.actionRecord[conn.id];
+                // Create updated action with changed properties
+                const updatedAction = {
+                    ...existingAction,
+                    DataState: ObjectState.Changed,
+                    UpdatedAt: new Date(),
+                };
+                // Update properties that may have changed
+                updatedAction.Name = `Action from ${sourceNode?.stageData?.Name || 'Unknown'} to ${targetNode?.stageData?.Name || 'Unknown'}`;
+                updatedAction.IsParallel = sourceNode?.stageData?.hasParallel || false;
+                updatedAction.PassOnRule = conn.condition || '';
+                actions.push(updatedAction);
+            }
+            else {
+                // Create a new action
+                actions.push({
+                    Id: '',
+                    Code: '',
+                    TenantId: '',
+                    id: conn.id,
+                    ServiceName: '',
+                    CreatedAt: new Date(),
+                    UpdatedAt: new Date(),
+                    DataState: ObjectState.New,
+                    Workflow: workflow.Id,
+                    Name: `Action from ${sourceNode?.stageData?.Name || 'Unknown'} to ${targetNode?.stageData?.Name || 'Unknown'}`,
+                    FromStage: conn.sourceNodeId,
+                    ToStage: conn.targetNodeId,
+                    IsParallel: sourceNode?.stageData?.hasParallel || false,
+                    PassOnRule: conn.condition || '',
+                });
+            }
+        });
+        // Add deleted objects with Removed state
+        Object.keys(this.stageRecord).forEach((stageId) => {
+            const exists = stages.some((stage) => stage.Id === stageId || stage.id === stageId);
+            if (!exists) {
+                const stage = this.stageRecord[stageId];
+                stages.push({
+                    ...stage,
+                    DataState: ObjectState.Removed,
+                    UpdatedAt: new Date(),
+                });
+            }
+        });
+        Object.keys(this.actionRecord).forEach((actionId) => {
+            const exists = actions.some((action) => action.Id === actionId || action.id === actionId);
+            if (!exists) {
+                const action = this.actionRecord[actionId];
+                actions.push({
+                    ...action,
+                    DataState: ObjectState.Removed,
+                    UpdatedAt: new Date(),
+                });
+            }
+        });
+        // Handle deleted swimlanes
+        Object.keys(this.swimlaneRecord).forEach((laneId) => {
+            const exists = workflow.Lanes.some((lane) => lane.Id === laneId || lane.id === laneId);
+            if (!exists) {
+                const lane = this.swimlaneRecord[laneId];
+                workflow.Lanes.push({
+                    ...lane,
+                    DataState: ObjectState.Removed,
+                    UpdatedAt: new Date(),
+                });
+            }
         });
         workflow.Stages = stages;
+        workflow.Actions = actions;
         return workflow;
     }
+    // Add a new property to track loaded objects
+    loadedObjectIds = {}; // Format: { id: code }
+    // Add a method to register loaded objects
+    registerLoadedObject(id, code) {
+        this.loadedObjectIds[id] = code;
+    }
+    // Method to check if an object was loaded from API
+    wasLoadedFromApi(id) {
+        return id in this.loadedObjectIds;
+    }
+    // Method to get the code for a loaded object
+    getCodeForObject(id) {
+        return this.loadedObjectIds[id] || '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerState, providedIn: 'root' });
 }
@@ -3243,7 +3281,7 @@ class WorkflowDataService {
                     IsEntryPoint: true,
                     IsExitPoint: false,
                     Tags: [],
-                    Forms: [],
+                    Form: '',
                     AllowMultiSubProcess: false,
                     AssignmentType: TaskAssignmentType.AutoRoute,
                     SubWorkFlow: '',
@@ -3265,111 +3303,995 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: HttpWebRequestService }, { type: EnvironmentService }] });
 
-class DesignerToolbarComponent {
+class NodeManagementService {
     state;
-    selectedTool = null;
-    isSaving = false;
-    toolSelected = new EventEmitter();
-    saveWorkflow = new EventEmitter();
-    // Simple array of toolbar items
-    toolbarItems = [
-        { id: 'swimlane', label: 'Swimlane' },
-        { id: 'stage', label: 'Stage' },
-        { id: 'action', label: 'Action' },
-        { id: 'form', label: 'Form' },
-        { id: 'decision', label: 'Decision' },
-        { id: 'subflow', label: 'Subflow' },
-    ];
     constructor(state) {
         this.state = state;
     }
-    // Handle tool button click
-    onToolClick(tool) {
-        this.toolSelected.emit(tool);
-    }
-    isEnabled(type) {
-        switch (type) {
-            case 'swimlane':
-                return true;
-            case 'stage':
-            case 'decision':
-                return this.state.swimlanes.length > 0;
-            case 'form':
-            case 'action':
-            case 'subflow':
-                // These can be enabled later when you implement connections
-                return this.state.getNodeCount() > 0;
-            default:
-                return false;
+    /**
+     * Adds a new node to the specified swimlane
+     */
+    addNode(swimlaneIndex, type, x, y, stageData, workflowData) {
+        if (!this.state.swimlanes[swimlaneIndex] ||
+            !type ||
+            (type !== 'stage' &&
+                type !== 'decision' &&
+                type !== 'form' &&
+                type !== 'subflow')) {
+            return null;
         }
+        // Adjust position relative to swimlane
+        const adjustedY = y - swimlaneIndex * 263 - 40; // Subtracting header height
+        // Generate a unique ID
+        const id = `${type}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        // Create node with dimensions based on type
+        const node = {
+            id,
+            type,
+            x,
+            y: adjustedY,
+            width: type === 'subflow' ? 150 : 169, // Width from SVG
+            height: 100, // Height from SVG
+            isStartNode: false, // Default to false
+            stageData: stageData || {}, // Store stage data
+            workflowData: workflowData || null,
+        };
+        // If this is the first node in the entire workflow, mark it as the start node
+        if (this.getNodeCount() === 0) {
+            node.isStartNode = true;
+            this.state.startNodeId = id;
+        }
+        // Generate connection points for the node
+        node.connectionPoints = this.generateConnectionPoints(node);
+        // Add node to the swimlane
+        if (!this.state.swimlanes[swimlaneIndex].nodes) {
+            this.state.swimlanes[swimlaneIndex].nodes = [];
+        }
+        this.state.swimlanes[swimlaneIndex].nodes.push(node);
+        return node;
     }
-    onSaveClick() {
-        this.saveWorkflow.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: { selectedTool: "selectedTool", isSaving: "isSaving" }, outputs: { toolSelected: "toolSelected", saveWorkflow: "saveWorkflow" }, ngImport: i0, template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n\n  <button class=\"save-button\" (click)=\"onSaveClick()\" [disabled]=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save Workflow\" }}\n  </button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-designer-toolbar', template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n\n  <button class=\"save-button\" (click)=\"onSaveClick()\" [disabled]=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save Workflow\" }}\n  </button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: WorkflowDesignerState }], propDecorators: { selectedTool: [{
-                type: Input
-            }], isSaving: [{
-                type: Input
-            }], toolSelected: [{
-                type: Output
-            }], saveWorkflow: [{
-                type: Output
-            }] } });
-
-class StageDialogComponent {
-    fb;
-    dataService;
-    // @Input() visible: boolean = false;
-    // In stage-dialog.component.ts - check input handling
-    visible = input(false);
-    stageData = {}; // For editing existing stages
-    closed = new EventEmitter();
-    saved = new EventEmitter();
-    stageForm;
-    tags = [];
-    actorRules = Object.values(StageActorRule);
-    selectedTagIds = [];
-    constructor(fb, dataService) {
-        this.fb = fb;
-        this.dataService = dataService;
-        this.stageForm = this.fb.group({
-            Name: ['', Validators.required],
-            Description: [''],
-            MinNoOfActor: [0],
-            Duration: [0],
-            PassOnRule: [''],
-            ActorRule: [StageActorRule.None],
-            Tags: [[]],
-        });
+    /**
+     * Gets the total count of nodes across all swimlanes
+     */
+    getNodeCount() {
+        return this.state.swimlanes.reduce((count, swimlane) => count + (swimlane.nodes?.length || 0), 0);
     }
-    ngOnInit() {
-        // Load tags
-        this.dataService.getTags().then((data) => {
-            this.tags = data.Result;
-            // If we have stage data with tags, update selectedTagIds after tags are loaded
-            if (this.stageData &&
-                this.stageData.Tags &&
-                this.stageData.Tags.length > 0) {
-                this.selectedTagIds = this.stageData.Tags.map((tag) => tag.Id);
+    /**
+     * Find a node by ID
+     */
+    findNodeById(id) {
+        for (let i = 0; i < this.state.swimlanes.length; i++) {
+            const swimlane = this.state.swimlanes[i];
+            const node = swimlane.nodes?.find((n) => n.id === id);
+            if (node) {
+                return { node, swimlaneIndex: i };
+            }
+        }
+        return null;
+    }
+    /**
+     * Generate connection points for a node
+     */
+    generateConnectionPoints(node) {
+        const points = [];
+        const spacing = 50; // Space between connection points
+        if (node.type === 'stage') {
+            // Rectangular shapes - add points around the rectangle
+            // Top edge points
+            for (let x = spacing; x < node.width; x += spacing) {
+                points.push({
+                    id: `${node.id}-top-${x}`,
+                    nodeId: node.id,
+                    x: x,
+                    y: 0,
+                    type: 'top',
+                });
+            }
+            // Right edge points
+            for (let y = spacing; y < node.height; y += spacing) {
+                points.push({
+                    id: `${node.id}-right-${y}`,
+                    nodeId: node.id,
+                    x: node.width,
+                    y: y,
+                    type: 'right',
+                });
+            }
+            // Bottom edge points
+            for (let x = spacing; x < node.width; x += spacing) {
+                points.push({
+                    id: `${node.id}-bottom-${x}`,
+                    nodeId: node.id,
+                    x: x,
+                    y: node.height,
+                    type: 'bottom',
+                });
+            }
+            // Left edge points
+            for (let y = spacing; y < node.height; y += spacing) {
+                points.push({
+                    id: `${node.id}-left-${y}`,
+                    nodeId: node.id,
+                    x: 0,
+                    y: y,
+                    type: 'left',
+                });
+            }
+        }
+        else if (node.type === 'decision') {
+            // Diamond shape - add points at the four corners
+            points.push({
+                id: `${node.id}-top-0`,
+                nodeId: node.id,
+                x: node.width / 2,
+                y: 0,
+                type: 'top',
+            });
+            points.push({
+                id: `${node.id}-right-0`,
+                nodeId: node.id,
+                x: node.width,
+                y: node.height / 2,
+                type: 'right',
+            });
+            points.push({
+                id: `${node.id}-bottom-0`,
+                nodeId: node.id,
+                x: node.width / 2,
+                y: node.height,
+                type: 'bottom',
+            });
+            points.push({
+                id: `${node.id}-left-0`,
+                nodeId: node.id,
+                x: 0,
+                y: node.height / 2,
+                type: 'left',
+            });
+        }
+        else if (node.type === 'form') {
+            // Form only has input connection points, no output points
+            // Left edge points (for input connections)
+            for (let y = spacing; y < node.height; y += spacing) {
+                points.push({
+                    id: `${node.id}-left-${y}`,
+                    nodeId: node.id,
+                    x: 0,
+                    y: y,
+                    type: 'left',
+                });
+            }
+        }
+        else if (node.type === 'subflow') {
+            // Hexagon shape - add points at the six corners
+            points.push({
+                id: `${node.id}-top-0`,
+                nodeId: node.id,
+                x: node.width / 2,
+                y: 0,
+                type: 'top',
+            });
+            points.push({
+                id: `${node.id}-right-top`,
+                nodeId: node.id,
+                x: node.width,
+                y: node.height / 4,
+                type: 'right',
+            });
+            points.push({
+                id: `${node.id}-right-bottom`,
+                nodeId: node.id,
+                x: node.width,
+                y: (node.height * 3) / 4,
+                type: 'right',
+            });
+            points.push({
+                id: `${node.id}-bottom-0`,
+                nodeId: node.id,
+                x: node.width / 2,
+                y: node.height,
+                type: 'bottom',
+            });
+            points.push({
+                id: `${node.id}-left-bottom`,
+                nodeId: node.id,
+                x: 0,
+                y: (node.height * 3) / 4,
+                type: 'left',
+            });
+            points.push({
+                id: `${node.id}-left-top`,
+                nodeId: node.id,
+                x: 0,
+                y: node.height / 4,
+                type: 'left',
+            });
+        }
+        return points;
+    }
+    /**
+     * Update node properties
+     */
+    updateNodeProperties(nodeId, properties) {
+        const nodeInfo = this.findNodeById(nodeId);
+        if (!nodeInfo)
+            return false;
+        const { node, swimlaneIndex } = nodeInfo;
+        // Update the node with new properties
+        Object.assign(node, properties);
+        return true;
+    }
+    /**
+     * Update stage data for a node
+     */
+    updateStageData(nodeId, stageData) {
+        const nodeInfo = this.findNodeById(nodeId);
+        if (!nodeInfo)
+            return false;
+        const { node } = nodeInfo;
+        // Update the stage data
+        node.stageData = {
+            ...node.stageData,
+            ...stageData,
+        };
+        return true;
+    }
+    /**
+     * Set a node as a start node
+     */
+    setAsStartNode(nodeId) {
+        // First, clear any existing start nodes
+        this.state.swimlanes.forEach((swimlane) => {
+            swimlane.nodes?.forEach((node) => {
+                if (node.isStartNode) {
+                    node.isStartNode = false;
+                }
+            });
+        });
+        // Then set the new start node
+        const nodeInfo = this.findNodeById(nodeId);
+        if (!nodeInfo)
+            return false;
+        nodeInfo.node.isStartNode = true;
+        this.state.startNodeId = nodeId;
+        return true;
+    }
+    /**
+     * Delete a node
+     */
+    deleteNode(nodeId) {
+        const nodeInfo = this.findNodeById(nodeId);
+        if (!nodeInfo)
+            return false;
+        const { swimlaneIndex } = nodeInfo;
+        // Find the node index in the swimlane
+        const nodeIndex = this.state.swimlanes[swimlaneIndex].nodes?.findIndex((n) => n.id === nodeId);
+        if (nodeIndex === undefined || nodeIndex === -1)
+            return false;
+        // Remove the node
+        this.state.swimlanes[swimlaneIndex].nodes?.splice(nodeIndex, 1);
+        return true;
+    }
+    /**
+     * Check if a node has outgoing connections
+     */
+    hasOutgoingConnections(nodeId) {
+        return this.state.connections.some((conn) => conn.sourceNodeId === nodeId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }] });
+
+class SwimlaneService {
+    state;
+    swimlaneHeight = 263;
+    constructor(state) {
+        this.state = state;
+    }
+    /**
+     * Add a new swimlane
+     */
+    addSwimlane(name, tags) {
+        const newSwimlane = {
+            order: this.state.swimlanes.length,
+            label: name,
+            tags,
+            nodes: [],
+        };
+        this.state.swimlanes.push(newSwimlane);
+        return newSwimlane;
+    }
+    /**
+     * Update an existing swimlane
+     */
+    updateSwimlane(index, name, tags) {
+        if (index < 0 || index >= this.state.swimlanes.length) {
+            console.error('Invalid swimlane index:', index);
+            return false;
+        }
+        this.state.swimlanes[index] = {
+            ...this.state.swimlanes[index],
+            label: name,
+            tags: tags,
+        };
+        return true;
+    }
+    /**
+     * Reorder swimlanes (move a swimlane up or down in the list)
+     */
+    reorderSwimlane(fromIndex, toIndex) {
+        if (fromIndex < 0 ||
+            fromIndex >= this.state.swimlanes.length ||
+            toIndex < 0 ||
+            toIndex >= this.state.swimlanes.length) {
+            return false;
+        }
+        // Remove the swimlane from its current position
+        const [swimlane] = this.state.swimlanes.splice(fromIndex, 1);
+        // Insert it at the new position
+        this.state.swimlanes.splice(toIndex, 0, swimlane);
+        // Update order properties for all swimlanes
+        this.state.swimlanes.forEach((lane, idx) => {
+            lane.order = idx;
+        });
+        return true;
+    }
+    /**
+     * Delete a swimlane by index
+     */
+    deleteSwimlane(index) {
+        if (index < 0 || index >= this.state.swimlanes.length) {
+            return false;
+        }
+        // Check if the swimlane has nodes
+        if (this.state.swimlanes[index].nodes?.length) {
+            console.error('Cannot delete swimlane with nodes');
+            return false;
+        }
+        // Remove the swimlane
+        this.state.swimlanes.splice(index, 1);
+        // Update order properties for all swimlanes
+        this.state.swimlanes.forEach((lane, idx) => {
+            lane.order = idx;
+        });
+        return true;
+    }
+    /**
+     * Get all swimlanes
+     */
+    getSwimlanes() {
+        return this.state.swimlanes;
+    }
+    /**
+     * Get swimlane by index
+     */
+    getSwimlane(index) {
+        if (index < 0 || index >= this.state.swimlanes.length) {
+            return null;
+        }
+        return this.state.swimlanes[index];
+    }
+    /**
+     * Calculate total canvas height needed for all swimlanes
+     */
+    calculateCanvasHeight(minHeight = 2000) {
+        const requiredHeight = (this.state.swimlanes.length + 1) * this.swimlaneHeight;
+        return Math.max(minHeight, requiredHeight);
+    }
+    /**
+     * Check if a Y position is within any swimlane
+     */
+    isPositionInsideSwimlane(y) {
+        // Check if y position is within any swimlane
+        const swimlaneCount = this.state.swimlanes.length;
+        if (swimlaneCount === 0)
+            return false;
+        // Each swimlane has a height of 263px
+        const totalSwimlaneHeight = swimlaneCount * this.swimlaneHeight;
+        // Check if y is within the total height of all swimlanes
+        return y >= 0 && y < totalSwimlaneHeight;
+    }
+    /**
+     * Calculate swimlane index from Y position
+     */
+    getSwimlaneIndexFromPosition(y) {
+        if (!this.isPositionInsideSwimlane(y))
+            return -1;
+        return Math.floor(y / this.swimlaneHeight);
+    }
+    /**
+     * Find swimlane index by Lane ID
+     */
+    findSwimlaneIndexByLaneId(laneId) {
+        // In a real implementation, you would maintain a mapping between API lane IDs and UI swimlane indices
+        // For now we'll just return the index based on position
+        const parts = laneId.split('-');
+        if (parts.length > 1) {
+            const index = parseInt(parts[1]);
+            if (!isNaN(index) && index < this.state.swimlanes.length) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }] });
+
+class DesignerToolbarComponent {
+    nodeService;
+    swimlaneService;
+    selectedTool = null;
+    isSaving = false;
+    toolSelected = new EventEmitter();
+    saveWorkflow = new EventEmitter();
+    // Simple array of toolbar items
+    toolbarItems = [
+        { id: 'swimlane', label: 'Swimlane' },
+        { id: 'stage', label: 'Stage' },
+        { id: 'action', label: 'Action' },
+        { id: 'form', label: 'Form' },
+        { id: 'decision', label: 'Decision' },
+        { id: 'subflow', label: 'Subflow' },
+    ];
+    constructor(nodeService, swimlaneService) {
+        this.nodeService = nodeService;
+        this.swimlaneService = swimlaneService;
+    }
+    /**
+     * Handle tool button click
+     */
+    onToolClick(tool) {
+        this.toolSelected.emit(tool);
+    }
+    /**
+     * Check if a tool should be enabled
+     */
+    isEnabled(type) {
+        switch (type) {
+            case 'swimlane':
+                return true; // Always enabled
+            case 'stage':
+            case 'decision':
+                // Enabled if there are swimlanes available
+                return this.swimlaneService.getSwimlanes().length > 0;
+            case 'form':
+            case 'action':
+            case 'subflow':
+                // Only enabled if there are nodes in the workflow
+                return this.nodeService.getNodeCount() > 0;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Handle save button click
+     */
+    onSaveClick() {
+        this.saveWorkflow.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: NodeManagementService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: { selectedTool: "selectedTool", isSaving: "isSaving" }, outputs: { toolSelected: "toolSelected", saveWorkflow: "saveWorkflow" }, ngImport: i0, template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n\n  <button class=\"save-button\" (click)=\"onSaveClick()\" [disabled]=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save Workflow\" }}\n  </button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-designer-toolbar', template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n\n  <button class=\"save-button\" (click)=\"onSaveClick()\" [disabled]=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save Workflow\" }}\n  </button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: NodeManagementService }, { type: SwimlaneService }], propDecorators: { selectedTool: [{
+                type: Input
+            }], isSaving: [{
+                type: Input
+            }], toolSelected: [{
+                type: Output
+            }], saveWorkflow: [{
+                type: Output
+            }] } });
+
+class StageNodeComponent {
+    state;
+    dataService;
+    node;
+    isStartNode = false;
+    stageData = {};
+    stagePropertiesUpdated = new EventEmitter();
+    parallelExecutionToggled = new EventEmitter();
+    showShieldDialog = new EventEmitter();
+    // Properties for icon click events
+    showFormPopup = false;
+    showTimerPopup = false;
+    showActionPopupLeft = false;
+    showActionPopupRight = false;
+    showCodePopup = false;
+    formsList = [];
+    isLoadingForms = false;
+    formPopupX = 0;
+    formPopupY = 0;
+    constructor(state, dataService) {
+        this.state = state;
+        this.dataService = dataService;
+    }
+    ngOnInit() {
+        console.log('Stage node initialized with:', this.node);
+        this.updateConnectedStagesInfo();
+    }
+    // Method to check if this stage has multiple outgoing connections to other stages
+    updateConnectedStagesInfo() {
+        // Count the number of outgoing connections that connect to stages
+        const outgoingConnections = this.state.connections.filter((conn) => conn.sourceNodeId === this.node.id);
+        // Check if the target nodes are stages
+        const connectedStageNodes = outgoingConnections
+            .map((conn) => this.state.findNodeById(conn.targetNodeId))
+            .filter((nodeInfo) => nodeInfo && nodeInfo.node.type === 'stage');
+        this.node.hasMultipleConnectedStages = connectedStageNodes.length > 1;
+    }
+    get hasMultipleConnectedStages() {
+        return this.node.hasMultipleConnectedStages === true;
+    }
+    get isParallelExecution() {
+        return this.node.stageData?.hasParallel === true;
+    }
+    selectForm(form) {
+        // If form is null, we're clearing the selection
+        if (!this.node.stageData) {
+            this.node.stageData = {};
+        }
+        if (form) {
+            this.node.stageData.formId = form.Id;
+            this.node.stageData.formName = form.Name;
+        }
+        else {
+            // Clear form selection
+            delete this.node.stageData.formId;
+            delete this.node.stageData.formName;
+        }
+        // Close the popup
+        this.showFormPopup = false;
+        // Emit an event to update the stage data
+        this.stagePropertiesUpdated.emit({
+            nodeId: this.node.id,
+            stageData: this.node.stageData,
+        });
+    }
+    toggleFormPopup(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Calculate absolute position for the popup
+            const rect = event.target.getBoundingClientRect();
+            this.formPopupX = rect.left + window.scrollX;
+            this.formPopupY = rect.top + window.scrollY;
+        }
+        // If we're opening the popup, load forms
+        if (!this.showFormPopup) {
+            this.isLoadingForms = true;
+            this.dataService
+                .getForms()
+                .then((response) => {
+                this.formsList = response.Result;
+                this.isLoadingForms = false;
+            })
+                .catch((error) => {
+                console.error('Error loading forms:', error);
+                this.isLoadingForms = false;
+            });
+        }
+        this.showFormPopup = !this.showFormPopup;
+    }
+    toggleShieldPopup(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        console.log('Shield icon clicked for node:', this.node.id);
+        this.showShieldDialog.emit(this.node.id);
+    }
+    toggleTimerPopup(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.showTimerPopup = !this.showTimerPopup;
+    }
+    toggleActionPopup(side, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (side === 'left') {
+            this.showActionPopupLeft = !this.showActionPopupLeft;
+        }
+        else {
+            this.showActionPopupRight = !this.showActionPopupRight;
+        }
+    }
+    toggleCodePopup(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        // Toggle parallel execution state
+        const newParallelState = !this.isParallelExecution;
+        // Update this node's stage data
+        if (!this.node.stageData) {
+            this.node.stageData = {};
+        }
+        this.node.stageData.hasParallel = newParallelState;
+        console.log(`Parallel execution ${newParallelState ? 'enabled' : 'disabled'} for node:`, this.node.id);
+    }
+    // This method should be called whenever connections change
+    refreshState() {
+        this.updateConnectedStagesInfo();
+    }
+    onStagePropertiesSaved(stageData) {
+        // Emit the event to the parent component with the node id and updated data
+        this.stagePropertiesUpdated.emit({
+            nodeId: this.node.id,
+            stageData: stageData,
+        });
+        console.log('Stage properties updated:', stageData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageNodeComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: { node: "node", isStartNode: "isStartNode", stageData: "stageData" }, outputs: { stagePropertiesUpdated: "stagePropertiesUpdated", parallelExecutionToggled: "parallelExecutionToggled", showShieldDialog: "showShieldDialog" }, ngImport: i0, template: "<svg:g>\n  <!-- Stage node -->\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    [attr.width]=\"node.width\"\n    [attr.height]=\"node.height\"\n    fill=\"none\"\n    stroke=\"#D36CFF\"\n    stroke-width=\"1\"\n  ></svg:rect>\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g\n    (click)=\"toggleFormPopup($event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 6)\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n      [attr.fill]=\"node.stageData?.formId ? '#D36CFF' : 'black'\"\n    />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g\n    (click)=\"toggleShieldPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\"\n      fill=\"black\"\n    />\n    <svg:path\n      d=\"M12 22.5L7.36801 20.0303C6.0474 19.3279 4.94303 18.2791 4.17348 16.9964C3.40393 15.7138 2.99825 14.2458 3.00001 12.75V3C3.00001 2.60218 3.15804 2.22064 3.43935 1.93934C3.72065 1.65804 4.10218 1.5 4.50001 1.5H19.5C19.8978 1.5 20.2794 1.65804 20.5607 1.93934C20.842 2.22064 21 2.60218 21 3V12.75C21.0018 14.2458 20.5961 15.7138 19.8265 16.9964C19.057 18.2791 17.9526 19.3279 16.632 20.0303L12 22.5ZM4.50001 3V12.75C4.49917 13.9738 4.83141 15.1747 5.46111 16.224C6.09082 17.2733 6.99423 18.1315 8.07451 18.7065L12 20.7997L15.9255 18.7073C17.0059 18.1322 17.9094 17.2739 18.5391 16.2244C19.1688 15.175 19.501 13.9739 19.5 12.75V3H4.50001Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('left', $event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 38)\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('right', $event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g\n    *ngIf=\"hasMultipleConnectedStages\"\n    (click)=\"toggleCodePopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\"\n  >\n    <svg:text\n      font-family=\"'Plus Jakarta Sans', sans-serif\"\n      font-weight=\"500\"\n      font-size=\"16px\"\n      dominant-baseline=\"middle\"\n      [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\"\n    >\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g\n    (click)=\"toggleTimerPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\n    \"\n  >\n    <svg:path\n      d=\"M11.5 3C14.0196 3 16.4359 4.00089 18.2175 5.78249C19.9991 7.56408 21 9.98044 21 12.5C21 15.0196 19.9991 17.4359 18.2175 19.2175C16.4359 20.9991 14.0196 22 11.5 22C8.98044 22 6.56408 20.9991 4.78249 19.2175C3.00089 17.4359 2 15.0196 2 12.5C2 9.98044 3.00089 7.56408 4.78249 5.78249C6.56408 4.00089 8.98044 3 11.5 3ZM11.5 4C9.24566 4 7.08365 4.89553 5.48959 6.48959C3.89553 8.08365 3 10.2457 3 12.5C3 14.7543 3.89553 16.9163 5.48959 18.5104C7.08365 20.1045 9.24566 21 11.5 21C12.6162 21 13.7215 20.7801 14.7528 20.353C15.7841 19.9258 16.7211 19.2997 17.5104 18.5104C18.2997 17.7211 18.9258 16.7841 19.353 15.7528C19.7801 14.7215 20 13.6162 20 12.5C20 10.2457 19.1045 8.08365 17.5104 6.48959C15.9163 4.89553 13.7543 4 11.5 4ZM11 7H12V12.42L16.7 15.13L16.2 16L11 13V7Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text\n    [attr.x]=\"node.width / 2\"\n    [attr.y]=\"node.height / 2\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"middle\"\n    font-size=\"14\"\n    fill=\"#000000\"\n  >\n    {{ node.stageData?.Name || \"Stage\" }}\n  </svg:text>\n</svg:g>\n\n<!-- <lib-stage-dialog\n  [visible]=\"showShieldPopup()\"\n  [stageData]=\"node.stageData || {}\"\n  (closed)=\"showShieldPopup.set(false)\"\n  (saved)=\"onStagePropertiesSaved($event)\"\n></lib-stage-dialog> -->\n\n<div\n  *ngIf=\"showFormPopup\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"formPopupX\"\n  [style.top.px]=\"formPopupY\"\n  [style.background-color]=\"'white'\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n      dropdown-content\n      style=\"background-color: white; z-index: 1000\"\n    >\n      <h4 class=\"mb-2 font-medium\">Select Form</h4>\n      <div *ngIf=\"isLoadingForms\" class=\"text-center py-2\">\n        Loading forms...\n      </div>\n      <div *ngIf=\"!isLoadingForms\" class=\"max-h-48 overflow-y-auto\">\n        <div class=\"mb-2\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(null)\"\n          >\n            Clear form selection\n          </button>\n        </div>\n        <div *ngFor=\"let form of formsList\" class=\"mb-1\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(form)\"\n          >\n            {{ form.Name }}\n          </button>\n        </div>\n        <div\n          *ngIf=\"formsList.length === 0\"\n          class=\"text-center py-2 text-gray-500\"\n        >\n          No forms available\n        </div>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".stage-icon{cursor:pointer}.stage-icon:hover path{fill:#d36cff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svg:g[lib-stage-node]', template: "<svg:g>\n  <!-- Stage node -->\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    [attr.width]=\"node.width\"\n    [attr.height]=\"node.height\"\n    fill=\"none\"\n    stroke=\"#D36CFF\"\n    stroke-width=\"1\"\n  ></svg:rect>\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g\n    (click)=\"toggleFormPopup($event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 6)\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n      [attr.fill]=\"node.stageData?.formId ? '#D36CFF' : 'black'\"\n    />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g\n    (click)=\"toggleShieldPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\"\n      fill=\"black\"\n    />\n    <svg:path\n      d=\"M12 22.5L7.36801 20.0303C6.0474 19.3279 4.94303 18.2791 4.17348 16.9964C3.40393 15.7138 2.99825 14.2458 3.00001 12.75V3C3.00001 2.60218 3.15804 2.22064 3.43935 1.93934C3.72065 1.65804 4.10218 1.5 4.50001 1.5H19.5C19.8978 1.5 20.2794 1.65804 20.5607 1.93934C20.842 2.22064 21 2.60218 21 3V12.75C21.0018 14.2458 20.5961 15.7138 19.8265 16.9964C19.057 18.2791 17.9526 19.3279 16.632 20.0303L12 22.5ZM4.50001 3V12.75C4.49917 13.9738 4.83141 15.1747 5.46111 16.224C6.09082 17.2733 6.99423 18.1315 8.07451 18.7065L12 20.7997L15.9255 18.7073C17.0059 18.1322 17.9094 17.2739 18.5391 16.2244C19.1688 15.175 19.501 13.9739 19.5 12.75V3H4.50001Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('left', $event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 38)\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('right', $event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g\n    *ngIf=\"hasMultipleConnectedStages\"\n    (click)=\"toggleCodePopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\"\n  >\n    <svg:text\n      font-family=\"'Plus Jakarta Sans', sans-serif\"\n      font-weight=\"500\"\n      font-size=\"16px\"\n      dominant-baseline=\"middle\"\n      [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\"\n    >\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g\n    (click)=\"toggleTimerPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\n    \"\n  >\n    <svg:path\n      d=\"M11.5 3C14.0196 3 16.4359 4.00089 18.2175 5.78249C19.9991 7.56408 21 9.98044 21 12.5C21 15.0196 19.9991 17.4359 18.2175 19.2175C16.4359 20.9991 14.0196 22 11.5 22C8.98044 22 6.56408 20.9991 4.78249 19.2175C3.00089 17.4359 2 15.0196 2 12.5C2 9.98044 3.00089 7.56408 4.78249 5.78249C6.56408 4.00089 8.98044 3 11.5 3ZM11.5 4C9.24566 4 7.08365 4.89553 5.48959 6.48959C3.89553 8.08365 3 10.2457 3 12.5C3 14.7543 3.89553 16.9163 5.48959 18.5104C7.08365 20.1045 9.24566 21 11.5 21C12.6162 21 13.7215 20.7801 14.7528 20.353C15.7841 19.9258 16.7211 19.2997 17.5104 18.5104C18.2997 17.7211 18.9258 16.7841 19.353 15.7528C19.7801 14.7215 20 13.6162 20 12.5C20 10.2457 19.1045 8.08365 17.5104 6.48959C15.9163 4.89553 13.7543 4 11.5 4ZM11 7H12V12.42L16.7 15.13L16.2 16L11 13V7Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text\n    [attr.x]=\"node.width / 2\"\n    [attr.y]=\"node.height / 2\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"middle\"\n    font-size=\"14\"\n    fill=\"#000000\"\n  >\n    {{ node.stageData?.Name || \"Stage\" }}\n  </svg:text>\n</svg:g>\n\n<!-- <lib-stage-dialog\n  [visible]=\"showShieldPopup()\"\n  [stageData]=\"node.stageData || {}\"\n  (closed)=\"showShieldPopup.set(false)\"\n  (saved)=\"onStagePropertiesSaved($event)\"\n></lib-stage-dialog> -->\n\n<div\n  *ngIf=\"showFormPopup\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"formPopupX\"\n  [style.top.px]=\"formPopupY\"\n  [style.background-color]=\"'white'\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n      dropdown-content\n      style=\"background-color: white; z-index: 1000\"\n    >\n      <h4 class=\"mb-2 font-medium\">Select Form</h4>\n      <div *ngIf=\"isLoadingForms\" class=\"text-center py-2\">\n        Loading forms...\n      </div>\n      <div *ngIf=\"!isLoadingForms\" class=\"max-h-48 overflow-y-auto\">\n        <div class=\"mb-2\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(null)\"\n          >\n            Clear form selection\n          </button>\n        </div>\n        <div *ngFor=\"let form of formsList\" class=\"mb-1\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(form)\"\n          >\n            {{ form.Name }}\n          </button>\n        </div>\n        <div\n          *ngIf=\"formsList.length === 0\"\n          class=\"text-center py-2 text-gray-500\"\n        >\n          No forms available\n        </div>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".stage-icon{cursor:pointer}.stage-icon:hover path{fill:#d36cff}\n"] }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { node: [{
+                type: Input
+            }], isStartNode: [{
+                type: Input
+            }], stageData: [{
+                type: Input
+            }], stagePropertiesUpdated: [{
+                type: Output
+            }], parallelExecutionToggled: [{
+                type: Output
+            }], showShieldDialog: [{
+                type: Output
+            }] } });
+
+/**
+ * Service for managing various popups in the workflow designer
+ */
+class PopupService {
+    dataService;
+    // Connection creation popup
+    _connectionPopupVisible = new BehaviorSubject(false);
+    _connectionPopupPosition = new BehaviorSubject({ x: 0, y: 0 });
+    _allowedNodeTypes = new BehaviorSubject([]);
+    // Form selection popup for stages
+    _formPopupVisible = new BehaviorSubject(false);
+    _formPopupPosition = new BehaviorSubject({
+        x: 0,
+        y: 0,
+    });
+    _formsList = new BehaviorSubject([]);
+    _isLoadingForms = new BehaviorSubject(false);
+    _selectedNodeForForm = new BehaviorSubject(null);
+    // Workflow form selection popup for start node
+    _startNodeFormPopupVisible = new BehaviorSubject(false);
+    _startNodeFormPopupPosition = new BehaviorSubject({ x: 0, y: 0 });
+    // Subflow selection popup
+    _subflowPopupVisible = new BehaviorSubject(false);
+    _subflowPopupPosition = new BehaviorSubject({ x: 0, y: 0 });
+    _workflowsList = new BehaviorSubject([]);
+    _isLoadingWorkflows = new BehaviorSubject(false);
+    _pendingSubflowPosition = new BehaviorSubject(null);
+    // Connection data for popups
+    _pendingConnectionSourcePoint = new BehaviorSubject(null);
+    _pendingConnectionSourceSwimlaneIndex = new BehaviorSubject(null);
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
+    // Connection popup observables
+    get connectionPopupVisible() {
+        return this._connectionPopupVisible.asObservable();
+    }
+    get connectionPopupPosition() {
+        return this._connectionPopupPosition.asObservable();
+    }
+    get allowedNodeTypes() {
+        return this._allowedNodeTypes.asObservable();
+    }
+    // Form popup observables
+    get formPopupVisible() {
+        return this._formPopupVisible.asObservable();
+    }
+    get formPopupPosition() {
+        return this._formPopupPosition.asObservable();
+    }
+    get formsList() {
+        return this._formsList.asObservable();
+    }
+    get isLoadingForms() {
+        return this._isLoadingForms.asObservable();
+    }
+    get selectedNodeForForm() {
+        return this._selectedNodeForForm.asObservable();
+    }
+    // Start node form popup observables
+    get startNodeFormPopupVisible() {
+        return this._startNodeFormPopupVisible.asObservable();
+    }
+    get startNodeFormPopupPosition() {
+        return this._startNodeFormPopupPosition.asObservable();
+    }
+    // Subflow popup observables
+    get subflowPopupVisible() {
+        return this._subflowPopupVisible.asObservable();
+    }
+    get subflowPopupPosition() {
+        return this._subflowPopupPosition.asObservable();
+    }
+    get workflowsList() {
+        return this._workflowsList.asObservable();
+    }
+    get isLoadingWorkflows() {
+        return this._isLoadingWorkflows.asObservable();
+    }
+    get pendingSubflowPosition() {
+        return this._pendingSubflowPosition.asObservable();
+    }
+    // Connection data observables
+    get pendingConnectionSourcePoint() {
+        return this._pendingConnectionSourcePoint.asObservable();
+    }
+    get pendingConnectionSourceSwimlaneIndex() {
+        return this._pendingConnectionSourceSwimlaneIndex.asObservable();
+    }
+    /**
+     * Show connection creation popup
+     */
+    showConnectionPopup(x, y, allowedNodeTypes) {
+        this._connectionPopupPosition.next({ x, y });
+        this._allowedNodeTypes.next(allowedNodeTypes);
+        this._connectionPopupVisible.next(true);
+    }
+    /**
+     * Hide connection creation popup
+     */
+    hideConnectionPopup() {
+        this._connectionPopupVisible.next(false);
+    }
+    /**
+     * Store connection source data for use in other popups
+     */
+    storeConnectionSourceData(point, swimlaneIndex) {
+        this._pendingConnectionSourcePoint.next(point);
+        this._pendingConnectionSourceSwimlaneIndex.next(swimlaneIndex);
+    }
+    /**
+     * Clear connection source data
+     */
+    clearConnectionSourceData() {
+        this._pendingConnectionSourcePoint.next(null);
+        this._pendingConnectionSourceSwimlaneIndex.next(null);
+    }
+    /**
+     * Show form selection popup for a stage
+     */
+    async showFormPopup(x, y, nodeId) {
+        this._formPopupPosition.next({ x, y });
+        this._selectedNodeForForm.next(nodeId);
+        this._formPopupVisible.next(true);
+        // Load forms
+        this._isLoadingForms.next(true);
+        try {
+            const response = await this.dataService.getForms();
+            this._formsList.next(response.Result);
+        }
+        catch (error) {
+            console.error('Error loading forms:', error);
+            this._formsList.next([]);
+        }
+        finally {
+            this._isLoadingForms.next(false);
+        }
+    }
+    /**
+     * Hide form selection popup
+     */
+    hideFormPopup() {
+        this._formPopupVisible.next(false);
+        this._selectedNodeForForm.next(null);
+    }
+    /**
+     * Show workflow form selection popup for start node
+     */
+    async showStartNodeFormPopup(x, y) {
+        this._startNodeFormPopupPosition.next({ x, y });
+        this._startNodeFormPopupVisible.next(true);
+        // Load forms
+        this._isLoadingForms.next(true);
+        try {
+            const response = await this.dataService.getForms();
+            this._formsList.next(response.Result);
+        }
+        catch (error) {
+            console.error('Error loading forms:', error);
+            this._formsList.next([]);
+        }
+        finally {
+            this._isLoadingForms.next(false);
+        }
+    }
+    /**
+     * Hide workflow form selection popup
+     */
+    hideStartNodeFormPopup() {
+        this._startNodeFormPopupVisible.next(false);
+    }
+    /**
+     * Show subflow selection popup
+     */
+    async showSubflowPopup(x, y, swimlaneIndex) {
+        this._subflowPopupPosition.next({ x, y });
+        this._pendingSubflowPosition.next({ swimlaneIndex, x, y });
+        this._subflowPopupVisible.next(true);
+        // Load workflows
+        this._isLoadingWorkflows.next(true);
+        try {
+            const response = await this.dataService.getWorkflows();
+            this._workflowsList.next(response.Result);
+        }
+        catch (error) {
+            console.error('Error loading workflows:', error);
+            this._workflowsList.next([]);
+        }
+        finally {
+            this._isLoadingWorkflows.next(false);
+        }
+    }
+    /**
+     * Hide subflow selection popup
+     */
+    hideSubflowPopup() {
+        this._subflowPopupVisible.next(false);
+        this._pendingSubflowPosition.next(null);
+    }
+    // Current values for internal use
+    getCurrentValues() {
+        return {
+            connectionPopupVisible: this._connectionPopupVisible.getValue(),
+            connectionPopupPosition: this._connectionPopupPosition.getValue(),
+            allowedNodeTypes: this._allowedNodeTypes.getValue(),
+            formPopupVisible: this._formPopupVisible.getValue(),
+            formPopupPosition: this._formPopupPosition.getValue(),
+            formsList: this._formsList.getValue(),
+            isLoadingForms: this._isLoadingForms.getValue(),
+            selectedNodeForForm: this._selectedNodeForForm.getValue(),
+            startNodeFormPopupVisible: this._startNodeFormPopupVisible.getValue(),
+            startNodeFormPopupPosition: this._startNodeFormPopupPosition.getValue(),
+            subflowPopupVisible: this._subflowPopupVisible.getValue(),
+            subflowPopupPosition: this._subflowPopupPosition.getValue(),
+            workflowsList: this._workflowsList.getValue(),
+            isLoadingWorkflows: this._isLoadingWorkflows.getValue(),
+            pendingSubflowPosition: this._pendingSubflowPosition.getValue(),
+            pendingConnectionSourcePoint: this._pendingConnectionSourcePoint.getValue(),
+            pendingConnectionSourceSwimlaneIndex: this._pendingConnectionSourceSwimlaneIndex.getValue(),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, deps: [{ token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WorkflowDataService }] });
+
+class StageDialogComponent {
+    fb;
+    dataService;
+    nodeService;
+    popupService;
+    // Use Angular's signal-based input
+    visible = input(false);
+    stageData = {}; // For editing existing stages
+    closed = new EventEmitter();
+    saved = new EventEmitter();
+    stageForm;
+    tags = [];
+    actorRules = Object.values(StageActorRule);
+    selectedTagIds = [];
+    hasOutgoingConnections = false;
+    constructor(fb, dataService, nodeService, popupService) {
+        this.fb = fb;
+        this.dataService = dataService;
+        this.nodeService = nodeService;
+        this.popupService = popupService;
+        this.stageForm = this.fb.group({
+            Name: ['', Validators.required],
+            Description: [''],
+            MinNoOfActor: [0],
+            Duration: [0],
+            PassOnRule: [''],
+            ActorRule: [StageActorRule.None],
+            IsExitPoint: [false],
+            Tags: [[]],
+        });
+    }
+    ngOnInit() {
+        // Load tags
+        this.loadTags();
+        // If editing an existing stage, populate form
+        this.initFormWithStageData();
+    }
+    ngOnChanges(changes) {
+        // If stageData changes, update the form
+        if (changes['stageData'] && this.stageData) {
+            this.stageForm.patchValue({
+                Name: this.stageData.Name || '',
+                Description: this.stageData.Description || '',
+                MinNoOfActor: this.stageData.MinNoOfActor || 0,
+                Duration: this.stageData.Duration || 0,
+                PassOnRule: this.stageData.PassOnRule || '',
+                ActorRule: this.stageData.ActorRule || StageActorRule.None,
+                IsExitPoint: this.stageData.IsExitPoint || false,
+            });
+            // Update selected tags
+            if (this.stageData.Tags && this.stageData.Tags.length > 0) {
+                this.selectedTagIds = this.stageData.Tags.map((tag) => tag.Id);
+            }
+            else {
+                this.selectedTagIds = [];
+            }
+        }
+    }
+    /**
+     * Load tags from data service
+     */
+    loadTags() {
+        this.dataService.getTags().then((data) => {
+            this.tags = data.Result;
+            // If we have stage data with tags, update selectedTagIds after tags are loaded
+            if (this.stageData &&
+                this.stageData.Tags &&
+                this.stageData.Tags.length > 0) {
+                this.selectedTagIds = this.stageData.Tags.map((tag) => tag.Id);
+            }
+        });
+    }
+    /**
+     * Initialize form with stage data if provided
+     */
+    initFormWithStageData() {
+        if (this.stageData) {
+            console.log('Initializing form with stage data:', this.stageData);
+            this.stageForm.patchValue({
+                Name: this.stageData.Name || '',
+                Description: this.stageData.Description || '',
+                MinNoOfActor: this.stageData.MinNoOfActor || 0,
+                Duration: this.stageData.Duration || 0,
+                PassOnRule: this.stageData.PassOnRule || '',
+                ActorRule: this.stageData.ActorRule || StageActorRule.None,
+                IsExitPoint: this.stageData.IsExitPoint || false,
+            });
+        }
+    }
+    checkOutgoingConnections() {
+        if (this.stageData && this.stageData.Id) {
+            // Check if there are outgoing connections from this stage
+            this.hasOutgoingConnections = this.nodeService.hasOutgoingConnections(this.stageData.Id);
+            // If there are outgoing connections, disable IsExitPoint
+            if (this.hasOutgoingConnections) {
+                this.stageForm.get('IsExitPoint')?.disable();
+            }
+            else {
+                this.stageForm.get('IsExitPoint')?.enable();
             }
-        });
-        // If editing an existing stage, populate form
-        if (this.stageData) {
-            console.log('Initializing form with stage data:', this.stageData);
-            this.stageForm.patchValue({
-                Name: this.stageData.Name || '',
-                Description: this.stageData.Description || '',
-                MinNoOfActor: this.stageData.MinNoOfActor || 0,
-                Duration: this.stageData.Duration || 0,
-                PassOnRule: this.stageData.PassOnRule || '',
-                ActorRule: this.stageData.ActorRule || StageActorRule.None,
-            });
         }
     }
     onDialogClose(event) {
@@ -3382,7 +4304,9 @@ class StageDialogComponent {
                 ...this.stageForm.value,
                 Tags: selectedTags,
             };
+            // Reset form after saving
             this.stageForm.reset();
+            // Emit the saved data to the parent component
             this.saved.emit(stageData);
         }
     }
@@ -3401,13 +4325,13 @@ class StageDialogComponent {
     onDialogOpen(event) {
         console.log('Dialog opened:', event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, deps: [{ token: i1$2.FormBuilder }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n      <!-- Stage Name -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n        <input\n          type=\"text\"\n          formControlName=\"Name\"\n          placeholder=\"Enter Stage Name\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Description -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Description</label>\n        <textarea\n          formControlName=\"Description\"\n          placeholder=\"Enter Description\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n          rows=\"3\"\n        ></textarea>\n      </div>\n\n      <!-- Recipient Count -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n        <input\n          type=\"number\"\n          formControlName=\"MinNoOfActor\"\n          placeholder=\"Enter Count\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Pass On Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n        <input\n          type=\"text\"\n          formControlName=\"PassOnRule\"\n          placeholder=\"Select Rule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Duration -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Duration</label>\n        <input\n          type=\"number\"\n          formControlName=\"Duration\"\n          placeholder=\"Set Duration\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Actor Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n        <select\n          formControlName=\"ActorRule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        >\n          <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n            {{ rule }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Tags -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Tags</label>\n        <div\n          class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n        >\n          <div *ngFor=\"let tag of tags\" class=\"py-1\">\n            <label class=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTagSelected(tag.Id)\"\n                (change)=\"toggleTagSelection(tag.Id)\"\n                class=\"mr-2\"\n              />\n              <span>{{ tag.Name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i8.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, deps: [{ token: i1$2.FormBuilder }, { token: WorkflowDataService }, { token: NodeManagementService }, { token: PopupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n      <!-- Stage Name -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n        <input\n          type=\"text\"\n          formControlName=\"Name\"\n          placeholder=\"Enter Stage Name\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Description -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Description</label>\n        <textarea\n          formControlName=\"Description\"\n          placeholder=\"Enter Description\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n          rows=\"3\"\n        ></textarea>\n      </div>\n\n      <!-- Recipient Count -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n        <input\n          type=\"number\"\n          formControlName=\"MinNoOfActor\"\n          placeholder=\"Enter Count\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Pass On Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n        <input\n          type=\"text\"\n          formControlName=\"PassOnRule\"\n          placeholder=\"Select Rule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Duration -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Duration</label>\n        <input\n          type=\"number\"\n          formControlName=\"Duration\"\n          placeholder=\"Set Duration\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Actor Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n        <select\n          formControlName=\"ActorRule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        >\n          <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n            {{ rule }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Exit Point</label>\n        <div class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"IsExitPoint\"\n            [disabled]=\"hasOutgoingConnections\"\n            class=\"mr-2 h-4 w-4\"\n          />\n          <span class=\"text-sm text-gray-600\">Mark as workflow end point</span>\n        </div>\n      </div>\n\n      <!-- Tags -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Tags</label>\n        <div\n          class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n        >\n          <div *ngFor=\"let tag of tags\" class=\"py-1\">\n            <label class=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTagSelected(tag.Id)\"\n                (change)=\"toggleTagSelection(tag.Id)\"\n                class=\"mr-2\"\n              />\n              <span>{{ tag.Name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i8.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n      <!-- Stage Name -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n        <input\n          type=\"text\"\n          formControlName=\"Name\"\n          placeholder=\"Enter Stage Name\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Description -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Description</label>\n        <textarea\n          formControlName=\"Description\"\n          placeholder=\"Enter Description\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n          rows=\"3\"\n        ></textarea>\n      </div>\n\n      <!-- Recipient Count -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n        <input\n          type=\"number\"\n          formControlName=\"MinNoOfActor\"\n          placeholder=\"Enter Count\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Pass On Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n        <input\n          type=\"text\"\n          formControlName=\"PassOnRule\"\n          placeholder=\"Select Rule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Duration -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Duration</label>\n        <input\n          type=\"number\"\n          formControlName=\"Duration\"\n          placeholder=\"Set Duration\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Actor Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n        <select\n          formControlName=\"ActorRule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        >\n          <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n            {{ rule }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Tags -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Tags</label>\n        <div\n          class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n        >\n          <div *ngFor=\"let tag of tags\" class=\"py-1\">\n            <label class=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTagSelected(tag.Id)\"\n                (change)=\"toggleTagSelection(tag.Id)\"\n                class=\"mr-2\"\n              />\n              <span>{{ tag.Name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: WorkflowDataService }], propDecorators: { stageData: [{
+            args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n      <!-- Stage Name -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n        <input\n          type=\"text\"\n          formControlName=\"Name\"\n          placeholder=\"Enter Stage Name\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Description -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Description</label>\n        <textarea\n          formControlName=\"Description\"\n          placeholder=\"Enter Description\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n          rows=\"3\"\n        ></textarea>\n      </div>\n\n      <!-- Recipient Count -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n        <input\n          type=\"number\"\n          formControlName=\"MinNoOfActor\"\n          placeholder=\"Enter Count\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Pass On Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n        <input\n          type=\"text\"\n          formControlName=\"PassOnRule\"\n          placeholder=\"Select Rule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Duration -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Duration</label>\n        <input\n          type=\"number\"\n          formControlName=\"Duration\"\n          placeholder=\"Set Duration\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        />\n      </div>\n\n      <!-- Actor Rule -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n        <select\n          formControlName=\"ActorRule\"\n          class=\"w-full px-4 py-2 rounded border border-gray-200\"\n        >\n          <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n            {{ rule }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Exit Point</label>\n        <div class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"IsExitPoint\"\n            [disabled]=\"hasOutgoingConnections\"\n            class=\"mr-2 h-4 w-4\"\n          />\n          <span class=\"text-sm text-gray-600\">Mark as workflow end point</span>\n        </div>\n      </div>\n\n      <!-- Tags -->\n      <div>\n        <label class=\"block text-sm font-medium mb-1\">Tags</label>\n        <div\n          class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n        >\n          <div *ngFor=\"let tag of tags\" class=\"py-1\">\n            <label class=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTagSelected(tag.Id)\"\n                (change)=\"toggleTagSelection(tag.Id)\"\n                class=\"mr-2\"\n              />\n              <span>{{ tag.Name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: WorkflowDataService }, { type: NodeManagementService }, { type: PopupService }], propDecorators: { stageData: [{
                 type: Input
             }], closed: [{
                 type: Output
@@ -3415,174 +4339,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
-class StageNodeComponent {
+class ConditionsPopupComponent {
     state;
-    dataService;
-    node;
-    isStartNode = false;
-    stageData = {};
-    stagePropertiesUpdated = new EventEmitter();
-    parallelExecutionToggled = new EventEmitter();
-    // Properties for icon click events
-    showFormPopup = false;
-    showShieldPopup = false;
-    showTimerPopup = false;
-    showActionPopupLeft = false;
-    showActionPopupRight = false;
-    showCodePopup = false;
-    formsList = [];
-    isLoadingForms = false;
-    formPopupX = 0;
-    formPopupY = 0;
-    constructor(state, dataService) {
+    visible = false;
+    decisionNodeId = '';
+    newConnectionId = '';
+    popupX = 0;
+    popupY = 0;
+    closed = new EventEmitter();
+    saved = new EventEmitter();
+    connectionConditions = [];
+    currentCondition = '';
+    constructor(state) {
         this.state = state;
-        this.dataService = dataService;
     }
     ngOnInit() {
-        console.log('Stage node initialized with:', this.node);
-        this.updateConnectedStagesInfo();
-    }
-    // Method to check if this stage has multiple outgoing connections to other stages
-    updateConnectedStagesInfo() {
-        // Count the number of outgoing connections that connect to stages
-        const outgoingConnections = this.state.connections.filter((conn) => conn.sourceNodeId === this.node.id);
-        // Check if the target nodes are stages
-        const connectedStageNodes = outgoingConnections
-            .map((conn) => this.state.findNodeById(conn.targetNodeId))
-            .filter((nodeInfo) => nodeInfo && nodeInfo.node.type === 'stage');
-        this.node.hasMultipleConnectedStages = connectedStageNodes.length > 1;
-    }
-    get hasMultipleConnectedStages() {
-        return this.node.hasMultipleConnectedStages === true;
-    }
-    get isParallelExecution() {
-        return this.node.stageData?.hasParallel === true;
+        this.loadConnectionConditions();
     }
-    selectForm(form) {
-        // If form is null, we're clearing the selection
-        if (!this.node.stageData) {
-            this.node.stageData = {};
-        }
-        if (form) {
-            this.node.stageData.formId = form.Id;
-            this.node.stageData.formName = form.Name;
-        }
-        else {
-            // Clear form selection
-            delete this.node.stageData.formId;
-            delete this.node.stageData.formName;
-        }
-        // Close the popup
-        this.showFormPopup = false;
-        // Emit an event to update the stage data
-        this.stagePropertiesUpdated.emit({
-            nodeId: this.node.id,
-            stageData: this.node.stageData,
+    loadConnectionConditions() {
+        if (!this.decisionNodeId)
+            return;
+        // Get all connections from this decision node
+        const connections = this.state.connections.filter((conn) => conn.sourceNodeId === this.decisionNodeId);
+        this.connectionConditions = connections.map((conn) => {
+            const targetNode = this.state.findNodeById(conn.targetNodeId)?.node;
+            return {
+                connectionId: conn.id,
+                sourceNodeId: conn.sourceNodeId,
+                targetNodeId: conn.targetNodeId,
+                targetNodeName: targetNode?.stageData?.Name || 'Unknown Stage',
+                condition: conn.condition || '',
+                isActive: conn.id === this.newConnectionId,
+            };
         });
-    }
-    toggleFormPopup(event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            // Calculate absolute position for the popup
-            const rect = event.target.getBoundingClientRect();
-            this.formPopupX = rect.left + window.scrollX;
-            this.formPopupY = rect.top + window.scrollY;
-        }
-        // If we're opening the popup, load forms
-        if (!this.showFormPopup) {
-            this.isLoadingForms = true;
-            this.dataService
-                .getForms()
-                .then((response) => {
-                this.formsList = response.Result;
-                this.isLoadingForms = false;
-            })
-                .catch((error) => {
-                console.error('Error loading forms:', error);
-                this.isLoadingForms = false;
-            });
-        }
-        this.showFormPopup = !this.showFormPopup;
-    }
-    toggleShieldPopup(event) {
-        // Prevent the event from propagating to parent elements
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        // Toggle the shield popup
-        this.showShieldPopup = !this.showShieldPopup;
-        console.log('Shield popup toggled:', this.showShieldPopup, 'with data:', this.node.stageData);
-        // Force change detection in case Angular isn't detecting the state change
-        setTimeout(() => {
-            if (this.showShieldPopup) {
-                console.log('Shield popup should be visible now');
-            }
-        }, 0);
-    }
-    toggleTimerPopup(event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        this.showTimerPopup = !this.showTimerPopup;
-    }
-    toggleActionPopup(side, event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        if (side === 'left') {
-            this.showActionPopupLeft = !this.showActionPopupLeft;
+        // Find the current connection being edited
+        const activeCondition = this.connectionConditions.find((c) => c.isActive);
+        if (activeCondition) {
+            this.currentCondition = activeCondition.condition;
         }
-        else {
-            this.showActionPopupRight = !this.showActionPopupRight;
-        }
-    }
-    toggleCodePopup(event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        // Toggle parallel execution state
-        const newParallelState = !this.isParallelExecution;
-        // Update this node's stage data
-        if (!this.node.stageData) {
-            this.node.stageData = {};
-        }
-        this.node.stageData.hasParallel = newParallelState;
-        console.log(`Parallel execution ${newParallelState ? 'enabled' : 'disabled'} for node:`, this.node.id);
-    }
-    // This method should be called whenever connections change
-    refreshState() {
-        this.updateConnectedStagesInfo();
     }
-    onStagePropertiesSaved(stageData) {
-        // Close the dialog
-        this.showShieldPopup = false;
-        // Emit the event to the parent component with the node id and updated data
-        this.stagePropertiesUpdated.emit({
-            nodeId: this.node.id,
-            stageData: stageData,
+    saveCondition() {
+        this.saved.emit({
+            connectionId: this.newConnectionId,
+            condition: this.currentCondition,
         });
-        console.log('Stage properties updated:', stageData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageNodeComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: { node: "node", isStartNode: "isStartNode", stageData: "stageData" }, outputs: { stagePropertiesUpdated: "stagePropertiesUpdated", parallelExecutionToggled: "parallelExecutionToggled" }, ngImport: i0, template: "<svg:g>\n  <!-- Stage node -->\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    [attr.width]=\"node.width\"\n    [attr.height]=\"node.height\"\n    fill=\"none\"\n    stroke=\"#D36CFF\"\n    stroke-width=\"1\"\n  ></svg:rect>\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g\n    (click)=\"toggleFormPopup($event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 6)\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n      [attr.fill]=\"node.stageData?.formId ? '#D36CFF' : 'black'\"\n    />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g\n    (click)=\"toggleShieldPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\"\n  >\n    <svg:path\n      d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\"\n      fill=\"black\"\n    />\n    <svg:path\n      d=\"M12 22.5L7.36801 20.0303C6.0474 19.3279 4.94303 18.2791 4.17348 16.9964C3.40393 15.7138 2.99825 14.2458 3.00001 12.75V3C3.00001 2.60218 3.15804 2.22064 3.43935 1.93934C3.72065 1.65804 4.10218 1.5 4.50001 1.5H19.5C19.8978 1.5 20.2794 1.65804 20.5607 1.93934C20.842 2.22064 21 2.60218 21 3V12.75C21.0018 14.2458 20.5961 15.7138 19.8265 16.9964C19.057 18.2791 17.9526 19.3279 16.632 20.0303L12 22.5ZM4.50001 3V12.75C4.49917 13.9738 4.83141 15.1747 5.46111 16.224C6.09082 17.2733 6.99423 18.1315 8.07451 18.7065L12 20.7997L15.9255 18.7073C17.0059 18.1322 17.9094 17.2739 18.5391 16.2244C19.1688 15.175 19.501 13.9739 19.5 12.75V3H4.50001Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('left', $event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 38)\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('right', $event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g\n    *ngIf=\"hasMultipleConnectedStages\"\n    (click)=\"toggleCodePopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\"\n  >\n    <svg:text\n      font-family=\"'Plus Jakarta Sans', sans-serif\"\n      font-weight=\"500\"\n      font-size=\"16px\"\n      dominant-baseline=\"middle\"\n      [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\"\n    >\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g\n    (click)=\"toggleTimerPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\n    \"\n  >\n    <svg:path\n      d=\"M11.5 3C14.0196 3 16.4359 4.00089 18.2175 5.78249C19.9991 7.56408 21 9.98044 21 12.5C21 15.0196 19.9991 17.4359 18.2175 19.2175C16.4359 20.9991 14.0196 22 11.5 22C8.98044 22 6.56408 20.9991 4.78249 19.2175C3.00089 17.4359 2 15.0196 2 12.5C2 9.98044 3.00089 7.56408 4.78249 5.78249C6.56408 4.00089 8.98044 3 11.5 3ZM11.5 4C9.24566 4 7.08365 4.89553 5.48959 6.48959C3.89553 8.08365 3 10.2457 3 12.5C3 14.7543 3.89553 16.9163 5.48959 18.5104C7.08365 20.1045 9.24566 21 11.5 21C12.6162 21 13.7215 20.7801 14.7528 20.353C15.7841 19.9258 16.7211 19.2997 17.5104 18.5104C18.2997 17.7211 18.9258 16.7841 19.353 15.7528C19.7801 14.7215 20 13.6162 20 12.5C20 10.2457 19.1045 8.08365 17.5104 6.48959C15.9163 4.89553 13.7543 4 11.5 4ZM11 7H12V12.42L16.7 15.13L16.2 16L11 13V7Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text\n    [attr.x]=\"node.width / 2\"\n    [attr.y]=\"node.height / 2\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"middle\"\n    font-size=\"14\"\n    fill=\"#000000\"\n  >\n    {{ node.stageData?.Name || \"Stage\" }}\n  </svg:text>\n</svg:g>\n\n<lib-stage-dialog\n  [visible]=\"showShieldPopup\"\n  [stageData]=\"node.stageData || {}\"\n  (closed)=\"showShieldPopup = false\"\n  (saved)=\"onStagePropertiesSaved($event)\"\n></lib-stage-dialog>\n\n<div\n  *ngIf=\"showFormPopup\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"formPopupX\"\n  [style.top.px]=\"formPopupY\"\n  [style.background-color]=\"'white'\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n      dropdown-content\n      style=\"background-color: white; z-index: 1000\"\n    >\n      <h4 class=\"mb-2 font-medium\">Select Form</h4>\n      <div *ngIf=\"isLoadingForms\" class=\"text-center py-2\">\n        Loading forms...\n      </div>\n      <div *ngIf=\"!isLoadingForms\" class=\"max-h-48 overflow-y-auto\">\n        <div class=\"mb-2\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(null)\"\n          >\n            Clear form selection\n          </button>\n        </div>\n        <div *ngFor=\"let form of formsList\" class=\"mb-1\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(form)\"\n          >\n            {{ form.Name }}\n          </button>\n        </div>\n        <div\n          *ngIf=\"formsList.length === 0\"\n          class=\"text-center py-2 text-gray-500\"\n        >\n          No forms available\n        </div>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".stage-icon{cursor:pointer}.stage-icon:hover path{fill:#d36cff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }] });
+    onClose() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"mb-3\">\n        <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n      </div>\n\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium mb-1\">Condition</label>\n        <input\n          type=\"text\"\n          [(ngModel)]=\"currentCondition\"\n          placeholder=\"e.g., order.amount > 500,000\"\n          class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n        />\n      </div>\n\n      <div\n        class=\"space-y-3 max-h-60 overflow-y-auto\"\n        *ngIf=\"connectionConditions.length > 1\"\n      >\n        <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n        @for (conn of connectionConditions; track conn.connectionId) { @if\n        (!conn.isActive) {\n        <div class=\"border rounded p-3\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n          </div>\n          <div>\n            <input\n              type=\"text\"\n              [value]=\"conn.condition\"\n              placeholder=\"No condition\"\n              class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n              readonly\n            />\n          </div>\n        </div>\n        } }\n      </div>\n\n      <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n        <button\n          class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n          (click)=\"onClose()\"\n        >\n          Cancel\n        </button>\n        <button\n          class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n          (click)=\"saveCondition()\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:g[lib-stage-node]', template: "<svg:g>\n  <!-- Stage node -->\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    [attr.width]=\"node.width\"\n    [attr.height]=\"node.height\"\n    fill=\"none\"\n    stroke=\"#D36CFF\"\n    stroke-width=\"1\"\n  ></svg:rect>\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g\n    (click)=\"toggleFormPopup($event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 6)\"\n  >\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect\n      x=\"-2\"\n      y=\"-2\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"transparent\"\n      style=\"cursor: pointer\"\n    />\n\n    <svg:path\n      d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n      [attr.fill]=\"node.stageData?.formId ? '#D36CFF' : 'black'\"\n    />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g\n    (click)=\"toggleShieldPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\"\n  >\n    <svg:path\n      d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\"\n      fill=\"black\"\n    />\n    <svg:path\n      d=\"M12 22.5L7.36801 20.0303C6.0474 19.3279 4.94303 18.2791 4.17348 16.9964C3.40393 15.7138 2.99825 14.2458 3.00001 12.75V3C3.00001 2.60218 3.15804 2.22064 3.43935 1.93934C3.72065 1.65804 4.10218 1.5 4.50001 1.5H19.5C19.8978 1.5 20.2794 1.65804 20.5607 1.93934C20.842 2.22064 21 2.60218 21 3V12.75C21.0018 14.2458 20.5961 15.7138 19.8265 16.9964C19.057 18.2791 17.9526 19.3279 16.632 20.0303L12 22.5ZM4.50001 3V12.75C4.49917 13.9738 4.83141 15.1747 5.46111 16.224C6.09082 17.2733 6.99423 18.1315 8.07451 18.7065L12 20.7997L15.9255 18.7073C17.0059 18.1322 17.9094 17.2739 18.5391 16.2244C19.1688 15.175 19.501 13.9739 19.5 12.75V3H4.50001Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('left', $event)\"\n    class=\"stage-icon\"\n    transform=\"translate(6, 38)\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g\n    (click)=\"toggleActionPopup('right', $event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\"\n  >\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g\n    *ngIf=\"hasMultipleConnectedStages\"\n    (click)=\"toggleCodePopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\"\n  >\n    <svg:text\n      font-family=\"'Plus Jakarta Sans', sans-serif\"\n      font-weight=\"500\"\n      font-size=\"16px\"\n      dominant-baseline=\"middle\"\n      [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\"\n    >\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g\n    (click)=\"toggleTimerPopup($event)\"\n    class=\"stage-icon\"\n    [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\n    \"\n  >\n    <svg:path\n      d=\"M11.5 3C14.0196 3 16.4359 4.00089 18.2175 5.78249C19.9991 7.56408 21 9.98044 21 12.5C21 15.0196 19.9991 17.4359 18.2175 19.2175C16.4359 20.9991 14.0196 22 11.5 22C8.98044 22 6.56408 20.9991 4.78249 19.2175C3.00089 17.4359 2 15.0196 2 12.5C2 9.98044 3.00089 7.56408 4.78249 5.78249C6.56408 4.00089 8.98044 3 11.5 3ZM11.5 4C9.24566 4 7.08365 4.89553 5.48959 6.48959C3.89553 8.08365 3 10.2457 3 12.5C3 14.7543 3.89553 16.9163 5.48959 18.5104C7.08365 20.1045 9.24566 21 11.5 21C12.6162 21 13.7215 20.7801 14.7528 20.353C15.7841 19.9258 16.7211 19.2997 17.5104 18.5104C18.2997 17.7211 18.9258 16.7841 19.353 15.7528C19.7801 14.7215 20 13.6162 20 12.5C20 10.2457 19.1045 8.08365 17.5104 6.48959C15.9163 4.89553 13.7543 4 11.5 4ZM11 7H12V12.42L16.7 15.13L16.2 16L11 13V7Z\"\n      fill=\"black\"\n    />\n  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text\n    [attr.x]=\"node.width / 2\"\n    [attr.y]=\"node.height / 2\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"middle\"\n    font-size=\"14\"\n    fill=\"#000000\"\n  >\n    {{ node.stageData?.Name || \"Stage\" }}\n  </svg:text>\n</svg:g>\n\n<lib-stage-dialog\n  [visible]=\"showShieldPopup\"\n  [stageData]=\"node.stageData || {}\"\n  (closed)=\"showShieldPopup = false\"\n  (saved)=\"onStagePropertiesSaved($event)\"\n></lib-stage-dialog>\n\n<div\n  *ngIf=\"showFormPopup\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"formPopupX\"\n  [style.top.px]=\"formPopupY\"\n  [style.background-color]=\"'white'\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n      dropdown-content\n      style=\"background-color: white; z-index: 1000\"\n    >\n      <h4 class=\"mb-2 font-medium\">Select Form</h4>\n      <div *ngIf=\"isLoadingForms\" class=\"text-center py-2\">\n        Loading forms...\n      </div>\n      <div *ngIf=\"!isLoadingForms\" class=\"max-h-48 overflow-y-auto\">\n        <div class=\"mb-2\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(null)\"\n          >\n            Clear form selection\n          </button>\n        </div>\n        <div *ngFor=\"let form of formsList\" class=\"mb-1\">\n          <button\n            class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n            (click)=\"selectForm(form)\"\n          >\n            {{ form.Name }}\n          </button>\n        </div>\n        <div\n          *ngIf=\"formsList.length === 0\"\n          class=\"text-center py-2 text-gray-500\"\n        >\n          No forms available\n        </div>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".stage-icon{cursor:pointer}.stage-icon:hover path{fill:#d36cff}\n"] }]
-        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { node: [{
+            args: [{ selector: 'lib-conditions-popup', template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"mb-3\">\n        <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n      </div>\n\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium mb-1\">Condition</label>\n        <input\n          type=\"text\"\n          [(ngModel)]=\"currentCondition\"\n          placeholder=\"e.g., order.amount > 500,000\"\n          class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n        />\n      </div>\n\n      <div\n        class=\"space-y-3 max-h-60 overflow-y-auto\"\n        *ngIf=\"connectionConditions.length > 1\"\n      >\n        <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n        @for (conn of connectionConditions; track conn.connectionId) { @if\n        (!conn.isActive) {\n        <div class=\"border rounded p-3\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n          </div>\n          <div>\n            <input\n              type=\"text\"\n              [value]=\"conn.condition\"\n              placeholder=\"No condition\"\n              class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n              readonly\n            />\n          </div>\n        </div>\n        } }\n      </div>\n\n      <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n        <button\n          class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n          (click)=\"onClose()\"\n        >\n          Cancel\n        </button>\n        <button\n          class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n          (click)=\"saveCondition()\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"] }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }], propDecorators: { visible: [{
                 type: Input
-            }], isStartNode: [{
+            }], decisionNodeId: [{
                 type: Input
-            }], stageData: [{
+            }], newConnectionId: [{
                 type: Input
-            }], stagePropertiesUpdated: [{
+            }], popupX: [{
+                type: Input
+            }], popupY: [{
+                type: Input
+            }], closed: [{
                 type: Output
-            }], parallelExecutionToggled: [{
+            }], saved: [{
                 type: Output
             }] } });
 
@@ -3594,6 +4417,7 @@ class DesignerCanvasComponent {
     subflowSelected = new EventEmitter();
     pendingStagePosition = null;
     showStageDialog = new EventEmitter();
+    stagePropertiesUpdated = new EventEmitter();
     // Reference to the SVG element
     canvasRef;
     onWindowMouseUp(event) {
@@ -3628,8 +4452,20 @@ class DesignerCanvasComponent {
     subflowPopupX = 0;
     subflowPopupY = 0;
     pendingSubflowPosition = null;
+    pendingDecisionConnection = null;
     pendingConnectionSourcePoint = null;
     pendingConnectionSourceSwimlaneIndex = null;
+    showDecisionConditionDialog = false;
+    showConditionsDialog = false;
+    activeDecisionNodeId = '';
+    activeConnectionId = '';
+    decisionConditionPopupX = 0;
+    decisionConditionPopupY = 0;
+    isCreatingStageFromDecision = false;
+    pendingDecisionCondition = '';
+    activeStageId = null;
+    showStageDialogLocal = false;
+    activeStageData = {};
     constructor(state, dataService) {
         this.state = state;
         this.dataService = dataService;
@@ -3656,9 +4492,59 @@ class DesignerCanvasComponent {
             });
         }
     }
+    onShowShieldDialog(stageId) {
+        // Find the node
+        const nodeInfo = this.state.findNodeById(stageId);
+        if (nodeInfo) {
+            this.activeStageId = stageId;
+            this.activeStageData = nodeInfo.node.stageData || {};
+            this.showStageDialogLocal = true;
+        }
+    }
+    // Add this method to handle dialog closure
+    onStageDialogClosed() {
+        this.showStageDialogLocal = false;
+        this.activeStageId = null;
+        this.activeStageData = {};
+    }
+    // Add this method to handle saving stage data
+    onStageDialogSaved(stageData) {
+        if (this.activeStageId) {
+            // Editing an existing stage
+            const nodeInfo = this.state.findNodeById(this.activeStageId);
+            if (nodeInfo) {
+                // Update the stage data
+                nodeInfo.node.stageData = {
+                    ...nodeInfo.node.stageData,
+                    ...stageData,
+                };
+                console.log('Updated stage data:', nodeInfo.node.stageData);
+                // Emit event for parent component to know about the update
+                this.stagePropertiesUpdated.emit({
+                    nodeId: this.activeStageId,
+                    stageData: nodeInfo.node.stageData,
+                });
+            }
+        }
+        // Close the dialog
+        this.onStageDialogClosed();
+    }
     updateCanvasSize() {
         const requiredHeight = (this.state.swimlanes.length + 1) * this.swimlaneHeight;
         this.canvasHeight = Math.max(2000, requiredHeight); // Ensure we have at least our default height
+        // Update all the swimlane clip paths when size changes
+        setTimeout(() => {
+            this.state.swimlanes.forEach((swimlane, index) => {
+                const clipPathId = `swimlane-clip-${index}`;
+                const clipPathElement = document.getElementById(clipPathId);
+                if (clipPathElement) {
+                    const rectElement = clipPathElement.querySelector('rect');
+                    if (rectElement) {
+                        rectElement.setAttribute('width', this.canvasWidth.toString());
+                    }
+                }
+            });
+        }, 0);
     }
     // Helper method to get the mouse position relative to the SVG canvas
     getMousePosition(event) {
@@ -3704,6 +4590,15 @@ class DesignerCanvasComponent {
     startConnectionDrag(event, point, swimlaneIndex) {
         event.preventDefault();
         event.stopPropagation();
+        // Check if this is an exit point node
+        const nodeInfo = this.state.findNodeById(point.nodeId);
+        if (nodeInfo &&
+            nodeInfo.node.type === 'stage' &&
+            nodeInfo.node.stageData?.IsExitPoint) {
+            // Don't allow connections from exit points
+            console.log('Cannot create connections from exit points');
+            return;
+        }
         const position = this.getMousePosition(event);
         this.state.startConnectionDrag(point, swimlaneIndex, position.x, position.y);
         // Add mouse move and mouse up event listeners to the document
@@ -3713,8 +4608,20 @@ class DesignerCanvasComponent {
     // Use arrow functions to preserve 'this' context
     onMouseMove = (event) => {
         const position = this.getMousePosition(event);
-        this.state.updateConnectionDrag(position.x, position.y);
+        this.updateConnectionDrag(position.x, position.y);
     };
+    updateConnectionDrag(currentX, currentY) {
+        if (this.state.draggingConnectionData.sourcePoint) {
+            this.state.draggingConnectionData.currentX = currentX;
+            this.state.draggingConnectionData.currentY = currentY;
+            // Calculate which swimlane the cursor is over
+            const swimlaneIndex = Math.floor(currentY / this.swimlaneHeight);
+            if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
+                // Ensure the target swimlane is fully visible
+                this.ensureSwimlaneInView(swimlaneIndex);
+            }
+        }
+    }
     onMouseUp = (event) => {
         document.removeEventListener('mousemove', this.onMouseMove);
         document.removeEventListener('mouseup', this.onMouseUp);
@@ -3794,22 +4701,66 @@ class DesignerCanvasComponent {
             return;
         }
         const { endX, endY, sourceSwimlaneIndex } = pathData;
+        // Get source node info
+        const sourcePoint = this.state.draggingConnectionData.sourcePoint;
+        if (!sourcePoint) {
+            this.hideConnectionPopup();
+            return;
+        }
+        const sourceNodeInfo = this.state.findNodeById(sourcePoint.nodeId);
+        if (!sourceNodeInfo) {
+            this.hideConnectionPopup();
+            return;
+        }
+        // If connecting from a decision to a stage, show condition popup first
+        if (sourceNodeInfo.node.type === 'decision' && nodeType === 'stage') {
+            // Store information for later stage creation
+            this.pendingDecisionConnection = {
+                decisionNodeId: sourceNodeInfo.node.id,
+                swimlaneIndex: sourceSwimlaneIndex,
+                x: endX,
+                y: endY,
+            };
+            // Calculate popup position - position it near the decision node
+            const swimlaneOffsetY = sourceSwimlaneIndex * 263 + 40;
+            // Center the popup over the connection endpoint
+            this.decisionConditionPopupX = endX;
+            this.decisionConditionPopupY = endY - 150; // Position above the endpoint
+            // Set decision node ID
+            this.activeDecisionNodeId = sourceNodeInfo.node.id;
+            this.showDecisionConditionDialog = true;
+            // End the connection drag
+            this.hideConnectionPopup();
+            return;
+        }
         // Calculate swimlane-relative position
         const swimlaneOffsetY = sourceSwimlaneIndex * 263 + 40;
         const relativeY = endY - swimlaneOffsetY;
         // Handle preconditions based on node type
         if (nodeType === 'stage') {
-            // Open stage properties dialog instead of creating node directly
-            this.pendingStagePosition = {
-                swimlaneIndex: sourceSwimlaneIndex,
-                x: endX,
-                y: endY,
-            };
-            console.log('Emitting showStageDialog event with position:', this.pendingStagePosition);
-            this.showStageDialog.emit({
-                position: this.pendingStagePosition,
-                isFromConnection: true,
-            });
+            // Create the stage directly with default properties
+            const newNode = this.state.addNode(sourceSwimlaneIndex, 'stage', endX, relativeY, { Name: 'New Stage' } // Add default properties
+            );
+            if (newNode &&
+                newNode.connectionPoints &&
+                newNode.connectionPoints.length > 0 &&
+                sourcePoint) {
+                // Handle connection creation
+                const opposingType = {
+                    right: 'left',
+                    left: 'right',
+                    top: 'bottom',
+                    bottom: 'top',
+                }[sourcePoint.type];
+                const targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
+                if (targetPoint) {
+                    // Create the connection
+                    const connection = this.state.createConnection(newNode.id, targetPoint.id, sourceSwimlaneIndex);
+                    if (connection) {
+                        this.onConnectionCreated(connection);
+                    }
+                }
+            }
             this.hideConnectionPopup();
             return;
         }
@@ -3826,7 +4777,6 @@ class DesignerCanvasComponent {
             newNode.connectionPoints &&
             newNode.connectionPoints.length > 0) {
             // Find the most appropriate connection point (closest to the source)
-            const sourcePoint = this.state.draggingConnectionData.sourcePoint;
             if (sourcePoint) {
                 // For simplicity, use the first connection point of opposing type
                 // In a real implementation, you'd find the closest or most appropriate point
@@ -3841,12 +4791,75 @@ class DesignerCanvasComponent {
                 targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
                 if (targetPoint) {
                     // Create the connection
-                    this.state.createConnection(newNode.id, targetPoint.id, sourceSwimlaneIndex);
+                    const connection = this.state.createConnection(newNode.id, targetPoint.id, sourceSwimlaneIndex);
+                    if (connection) {
+                        this.onConnectionCreated(connection);
+                    }
+                }
+            }
+        }
+        if (sourceNodeInfo) {
+            this.updateNodeConnections(sourceNodeInfo.node);
+        }
+        // End the connection drag
+        this.hideConnectionPopup();
+    }
+    // Method to handle saving the condition
+    onDecisionConditionSaved(event) {
+        if (!this.pendingDecisionConnection) {
+            this.showDecisionConditionDialog = false;
+            return;
+        }
+        const { decisionNodeId, swimlaneIndex, x, y } = this.pendingDecisionConnection;
+        // Create the stage directly with default properties
+        const node = this.state.addNode(swimlaneIndex, 'stage', x, y, { Name: 'New Stage' } // Add default properties
+        );
+        if (node) {
+            const decisionNodeInfo = this.state.findNodeById(decisionNodeId);
+            if (decisionNodeInfo &&
+                node.connectionPoints &&
+                node.connectionPoints.length > 0) {
+                // Find a suitable connection point from the decision node
+                const decisionNode = decisionNodeInfo.node;
+                const decisionNodePoints = decisionNode.connectionPoints || [];
+                const sourcePoint = decisionNodePoints.find((p) => p.type === 'right' || p.type === 'bottom');
+                if (sourcePoint) {
+                    // Find opposing type connection point on the new stage
+                    const opposingType = {
+                        right: 'left',
+                        bottom: 'top',
+                        left: 'right',
+                        top: 'bottom',
+                    }[sourcePoint.type];
+                    const targetPoint = node.connectionPoints.find((p) => p.type === opposingType);
+                    if (targetPoint) {
+                        // Create connection with condition
+                        const connection = {
+                            id: `conn-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+                            sourceNodeId: decisionNode.id,
+                            targetNodeId: node.id,
+                            sourcePointId: sourcePoint.id,
+                            targetPointId: targetPoint.id,
+                            sourceSwimlaneIndex: decisionNodeInfo.swimlaneIndex,
+                            targetSwimlaneIndex: swimlaneIndex,
+                            condition: event.condition,
+                        };
+                        // Add connection to the state
+                        this.state.connections.push(connection);
+                        console.log('Created decision connection with condition:', connection);
+                    }
                 }
             }
         }
-        // End the connection drag
-        this.hideConnectionPopup();
+        // Clear pending data
+        this.pendingDecisionConnection = null;
+        this.pendingDecisionCondition = '';
+        // Hide the condition popup
+        this.showDecisionConditionDialog = false;
+    }
+    onDecisionConditionCancelled() {
+        this.showDecisionConditionDialog = false;
+        // Don't create the stage or connection
     }
     getConnectionPath() {
         const pathData = this.state.getConnectionPathData();
@@ -3884,410 +4897,1107 @@ class DesignerCanvasComponent {
             return '';
         }
     }
-    getOrthogonalPath(startX, startY, endX, endY, pointType) {
-        // Determine initial direction based on connection point type
-        let path = '';
-        // For side points (left/right), start with horizontal line
-        if (pointType === 'left' || pointType === 'right') {
-            // Calculate horizontal distance
-            const horizontalDist = endX - startX;
-            // If the end point is very close horizontally, use a simple 3-segment path
-            if (Math.abs(horizontalDist) < 30) {
-                const midY = (startY + endY) / 2;
-                path = `M ${startX} ${startY} H ${endX} V ${midY} V ${endY}`;
-            }
-            // Otherwise, create a path with horizontal segment first, then vertical, then horizontal
-            else {
-                path = `M ${startX} ${startY} H ${startX + horizontalDist / 2} V ${endY} H ${endX}`;
-            }
+    getOrthogonalPath(startX, startY, endX, endY, pointType) {
+        // Determine initial direction based on connection point type
+        let path = '';
+        // For side points (left/right), start with horizontal line
+        if (pointType === 'left' || pointType === 'right') {
+            // Calculate horizontal distance
+            const horizontalDist = endX - startX;
+            // If the end point is very close horizontally, use a simple 3-segment path
+            if (Math.abs(horizontalDist) < 30) {
+                const midY = (startY + endY) / 2;
+                path = `M ${startX} ${startY} H ${endX} V ${midY} V ${endY}`;
+            }
+            // Otherwise, create a path with horizontal segment first, then vertical, then horizontal
+            else {
+                path = `M ${startX} ${startY} H ${startX + horizontalDist / 2} V ${endY} H ${endX}`;
+            }
+        }
+        // For top/bottom points, start with vertical line
+        else if (pointType === 'top' || pointType === 'bottom') {
+            // Calculate vertical distance
+            const verticalDist = endY - startY;
+            // If the end point is very close vertically, use a simple 3-segment path
+            if (Math.abs(verticalDist) < 30) {
+                const midX = (startX + endX) / 2;
+                path = `M ${startX} ${startY} V ${endY} H ${midX} H ${endX}`;
+            }
+            // Otherwise, create a path with vertical segment first, then horizontal, then vertical
+            else {
+                path = `M ${startX} ${startY} V ${startY + verticalDist / 2} H ${endX} V ${endY}`;
+            }
+        }
+        return path;
+    }
+    onStagePropertiesUpdated(event) {
+        // Find the node in the swimlanes
+        for (let i = 0; i < this.state.swimlanes.length; i++) {
+            const swimlane = this.state.swimlanes[i];
+            const nodeIndex = swimlane.nodes?.findIndex((n) => n.id === event.nodeId);
+            if (nodeIndex !== undefined && nodeIndex >= 0) {
+                // Update the stage data
+                if (swimlane.nodes) {
+                    swimlane.nodes[nodeIndex].stageData = {
+                        ...swimlane.nodes[nodeIndex].stageData,
+                        ...event.stageData,
+                    };
+                    console.log('Updated stage data in swimlane:', i, 'node:', nodeIndex, 'data:', swimlane.nodes[nodeIndex].stageData);
+                }
+                break;
+            }
+        }
+    }
+    onConnectionCreated(connection) {
+        // After a connection is created, refresh the source node to update its state
+        const sourceNodeInfo = this.state.findNodeById(connection.sourceNodeId);
+        if (sourceNodeInfo && sourceNodeInfo.node.type === 'stage') {
+            // Refresh node state
+            this.updateNodeConnections(sourceNodeInfo.node);
+        }
+    }
+    // Helper method to update node's connection status
+    updateNodeConnections(node) {
+        // Count the number of outgoing connections that connect to stages
+        const outgoingConnections = this.state.connections.filter((conn) => conn.sourceNodeId === node.id);
+        // Check if the target nodes are stages
+        const connectedStageNodes = outgoingConnections
+            .map((conn) => this.state.findNodeById(conn.targetNodeId))
+            .filter((nodeInfo) => nodeInfo && nodeInfo.node.type === 'stage');
+        node.hasMultipleConnectedStages = connectedStageNodes.length > 1;
+    }
+    onEditSwimlane(event, swimlane, swimlaneIndex) {
+        event.stopPropagation(); // Prevent the canvas click event from firing
+        event.preventDefault();
+        console.log('Edit swimlane button clicked for swimlane:', swimlaneIndex);
+        // Emit a special event for editing a swimlane
+        this.clickedPosition.emit({
+            x: -1, // Special value to indicate edit mode
+            y: swimlaneIndex,
+        });
+    }
+    // showStartNodeFormPopup(event: MouseEvent): void {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    //   // Implementation will be similar to the stage form popup
+    //   // We'll need to add UI elements for this
+    //   console.log('Start node form popup requested');
+    //   // For now, this is a placeholder
+    //   // The actual implementation would load forms and add them to the workflow
+    // }
+    toggleStartNodeFormPopup(event, nodeX, nodeY, swimlaneIndex) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Set popup position
+        const swimlaneOffset = swimlaneIndex * 263 + 40;
+        this.startNodeFormPopupX = nodeX - 30; // Position near the start node
+        this.startNodeFormPopupY = nodeY + swimlaneOffset;
+        // If we're opening the popup, load forms
+        if (!this.showStartNodeFormPopup) {
+            this.isLoadingStartNodeForms = true;
+            this.dataService
+                .getForms()
+                .then((response) => {
+                this.startNodeFormsList = response.Result;
+                this.isLoadingStartNodeForms = false;
+            })
+                .catch((error) => {
+                console.error('Error loading forms:', error);
+                this.isLoadingStartNodeForms = false;
+            });
+        }
+        this.showStartNodeFormPopup = !this.showStartNodeFormPopup;
+    }
+    selectStartNodeForm(form) {
+        if (form) {
+            this.state.setWorkflowForm(form.Id, form.Name);
+        }
+        else {
+            this.state.setWorkflowForm(null, null);
+        }
+        // Close the popup
+        this.showStartNodeFormPopup = false;
+    }
+    showSubflowSelectionPopup(x, y, swimlaneIndex) {
+        this.subflowPopupX = x;
+        this.subflowPopupY = y;
+        this.pendingSubflowPosition = { swimlaneIndex, x, y };
+        // Store connection data if we're creating from a connection
+        if (this.state.isConnectionDragging()) {
+            // Store the source connection data
+            this.pendingConnectionSourcePoint =
+                this.state.draggingConnectionData.sourcePoint ?? null;
+            this.pendingConnectionSourceSwimlaneIndex =
+                this.state.draggingConnectionData.sourceSwimlaneIndex ?? null;
+            console.log('Stored connection data for subflow:', {
+                sourcePoint: this.pendingConnectionSourcePoint,
+                sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
+            });
+        }
+        // Load workflows
+        this.isLoadingWorkflows = true;
+        this.dataService
+            .getWorkflows()
+            .then((response) => {
+            this.workflowsList = response.Result;
+            this.isLoadingWorkflows = false;
+        })
+            .catch((error) => {
+            console.error('Error loading workflows:', error);
+            this.isLoadingWorkflows = false;
+        });
+        this.showSubflowPopup = true;
+    }
+    selectSubflowWorkflow(workflow) {
+        console.log('Selecting workflow for subflow:', workflow.Name);
+        console.log('Pending connection data:', {
+            sourcePoint: this.pendingConnectionSourcePoint,
+            sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
+            position: this.pendingSubflowPosition,
+        });
+        if (this.pendingSubflowPosition) {
+            const { swimlaneIndex, x, y } = this.pendingSubflowPosition;
+            // Create the subflow node with the selected workflow data
+            const node = this.state.addNode(swimlaneIndex, 'subflow', x, y, undefined, // No stage data
+            { id: workflow.Id, name: workflow.Name });
+            console.log('Created subflow node:', node);
+            // If this was created from a connection, create the connection
+            if (node && this.pendingConnectionSourcePoint) {
+                console.log('Creating connection to new subflow node');
+                // Find a suitable connection point on the new node
+                if (node.connectionPoints && node.connectionPoints.length > 0) {
+                    const sourcePoint = this.pendingConnectionSourcePoint;
+                    // Find opposing type connection point
+                    const opposingType = {
+                        right: 'left',
+                        left: 'right',
+                        top: 'bottom',
+                        bottom: 'top',
+                    }[sourcePoint.type];
+                    const targetPoint = node.connectionPoints.find((p) => p.type === opposingType);
+                    if (targetPoint) {
+                        // Create connection
+                        const connection = {
+                            id: `conn-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+                            sourceNodeId: sourcePoint.nodeId,
+                            targetNodeId: node.id,
+                            sourcePointId: sourcePoint.id,
+                            targetPointId: targetPoint.id,
+                            sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
+                            targetSwimlaneIndex: swimlaneIndex,
+                        };
+                        // Add connection directly to the state's connections array
+                        this.state.connections.push(connection);
+                        console.log('Added connection to state:', connection);
+                        console.log('Connections after adding:', this.state.connections);
+                        this.onConnectionCreated(connection);
+                    }
+                }
+                this.state.endConnectionDrag();
+            }
+            // Reset selection tool in parent component
+            this.subflowSelected.emit();
+        }
+        // Clean up
+        this.showSubflowPopup = false;
+        this.pendingSubflowPosition = null;
+        this.pendingConnectionSourcePoint = null;
+        this.pendingConnectionSourceSwimlaneIndex = null;
+    }
+    showDecisionConditionsPopup(event, node, swimlaneIndex) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Get the position for the popup
+        const position = this.getMousePosition(event);
+        const globalX = position.x;
+        const globalY = position.y;
+        // Find all connections from this decision node
+        const connections = this.state.connections.filter((conn) => conn.sourceNodeId === node.id);
+        if (connections.length === 0) {
+            // No connections to show
+            return;
+        }
+        // Show the decision conditions popup
+        this.activeDecisionNodeId = node.id;
+        this.decisionConditionPopupX = globalX;
+        this.decisionConditionPopupY = globalY;
+        // Set the correct popup visibility flag - this is likely the issue
+        this.showDecisionConditionDialog = true;
+        console.log('Showing decision popup:', {
+            x: globalX,
+            y: globalY,
+            nodeId: node.id,
+            isVisible: this.showDecisionConditionDialog,
+        });
+    }
+    ensureSwimlaneInView(swimlaneIndex) {
+        // Ensure we have enough swimlanes visible
+        const requiredHeight = (swimlaneIndex + 1) * this.swimlaneHeight;
+        if (this.canvasHeight < requiredHeight) {
+            this.canvasHeight = requiredHeight;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", showStageDialog: "showStageDialog", stagePropertiesUpdated: "stagePropertiesUpdated" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n  <svg\n    #canvas\n    [attr.width]=\"canvasWidth\"\n    [attr.height]=\"canvasHeight\"\n    class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\"\n  >\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern\n        id=\"grid\"\n        [attr.width]=\"gridSize\"\n        [attr.height]=\"gridSize\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <path\n          d=\"M 20 0 L 0 0 0 20\"\n          fill=\"none\"\n          stroke=\"#e2e8f0\"\n          stroke-width=\"0.5\"\n        />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker\n        id=\"arrowhead\"\n        markerWidth=\"10\"\n        markerHeight=\"7\"\n        refX=\"9\"\n        refY=\"3.5\"\n        orient=\"auto\"\n      >\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point styles -->\n      <circle\n        id=\"connection-point-template\"\n        r=\"5\"\n        fill=\"#D36CFF\"\n        stroke=\"#FFFFFF\"\n        stroke-width=\"1\"\n      />\n\n      <!-- Dashed line style for connection preview -->\n      <pattern\n        id=\"dashed-line\"\n        width=\"10\"\n        height=\"10\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"5\"\n          x2=\"10\"\n          y2=\"5\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"2\"\n          stroke-dasharray=\"5,5\"\n        />\n      </pattern>\n\n      @for (swimlane of state.swimlanes; track swimlane.order) {\n      <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n        <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n      </clipPath>\n      }\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      font-family=\"sans-serif\"\n      font-size=\"16\"\n      fill=\"#94a3b8\"\n      text-anchor=\"middle\"\n    >\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <g\n      [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n      [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n    >\n      <!-- Swimlane container -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        [attr.height]=\"263\"\n        fill=\"#ffffff\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane header -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        height=\"40\"\n        fill=\"#f8fafc\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane label -->\n      <text\n        x=\"20\"\n        y=\"25\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#333333\"\n        font-weight=\"bold\"\n      >\n        {{ swimlane.label }}\n      </text>\n\n      <!-- Edit button -->\n      <g\n        class=\"edit-swimlane-button\"\n        [attr.transform]=\"'translate(100, 20)'\"\n        (click)=\"\n          onEditSwimlane($event, swimlane, swimlane.order);\n          $event.stopPropagation()\n        \"\n      >\n        <rect\n          x=\"-5\"\n          y=\"-15\"\n          width=\"40\"\n          height=\"20\"\n          fill=\"#f3e8ff\"\n          rx=\"3\"\n          ry=\"3\"\n          stroke=\"#d8b4fe\"\n          stroke-width=\"1\"\n        ></rect>\n        <text\n          x=\"15\"\n          y=\"0\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#7e22ce\"\n          text-anchor=\"middle\"\n        >\n          Edit\n        </text>\n      </g>\n\n      <!-- Tag indicators -->\n      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n    </g>\n    }\n\n    <!-- Nodes -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- Render nodes in this swimlane -->\n    @for (node of swimlane.nodes; track node.id) {\n    <g\n      class=\"node-element\"\n      [attr.transform]=\"'translate(' + node.x + ',' + (node.y + 40) + ')'\"\n      (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseleave)=\"hideConnectionPoints(node.id)\"\n    >\n      <!-- Start node indicator (circle and arrow) for the first node -->\n      @if (node.isStartNode) {\n      <!-- Circle -->\n      <circle\n        cx=\"-30\"\n        cy=\"50\"\n        r=\"15\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></circle>\n      <!-- Form icon for start node -->\n      <svg:g\n        (click)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n        \"\n        class=\"stage-icon\"\n        transform=\"translate(-45, 42)\"\n        style=\"cursor: pointer; pointer-events: all\"\n      >\n        <!-- Transparent rectangle to capture clicks -->\n        <svg:rect\n          x=\"-2\"\n          y=\"-2\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"transparent\"\n          style=\"cursor: pointer\"\n        />\n        <svg:path\n          d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n          [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n          transform=\"scale(0.7)\"\n        />\n      </svg:g>\n      <!-- Arrow from circle to node -->\n      <path\n        d=\"M -20 50 L 0 50\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n      }\n\n      <!-- Exit point indicator (circle and arrow) -->\n      @if (node.stageData?.IsExitPoint) {\n      <!-- Arrow from node to circle -->\n      <path\n        [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n      <!-- Circle -->\n      <circle\n        [attr.cx]=\"node.width + 50\"\n        cy=\"50\"\n        r=\"30\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n      ></circle>\n      }\n\n      <!-- Stage node -->\n      @if (node.type === 'stage') {\n      <!-- <rect\n                  x=\"0\"\n                  y=\"0\"\n                  [attr.width]=\"node.width\"\n                  [attr.height]=\"node.height\"\n                  fill=\"none\"\n                  stroke=\"#D36CFF\"\n                  stroke-width=\"1\"\n                ></rect> -->\n      <svg:g\n        lib-stage-node\n        [node]=\"node\"\n        [isStartNode]=\"node.isStartNode\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n        (showShieldDialog)=\"onShowShieldDialog($event)\"\n      ></svg:g>\n      }\n\n      <!-- Decision node -->\n      @if (node.type === 'decision') {\n      <path\n        [attr.d]=\"\n          'M 0 ' +\n          node.height / 2 +\n          ' L ' +\n          node.width / 2 +\n          ' 0' +\n          ' L ' +\n          node.width +\n          ' ' +\n          node.height / 2 +\n          ' L ' +\n          node.width / 2 +\n          ' ' +\n          node.height +\n          ' Z'\n        \"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></path>\n\n      <!-- Decision node condition indicator icon -->\n      <svg:g\n        (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\"\n        class=\"decision-condition-icon\"\n        [attr.transform]=\"\n          'translate(' +\n          (node.width / 2 - 10) +\n          ',' +\n          (node.height / 2 - 10) +\n          ')'\n        \"\n      >\n        <svg:rect\n          x=\"-5\"\n          y=\"-5\"\n          width=\"30\"\n          height=\"30\"\n          fill=\"transparent\"\n          style=\"cursor: pointer\"\n        />\n        <svg:path\n          d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n          fill=\"#D36CFF\"\n        />\n      </svg:g>\n      }\n\n      <!-- Form node -->\n      @if (node.type === 'form') {\n      <path\n        d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n        transform=\"scale(0.7)\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n        transform=\"scale(0.7)\"\n        stroke=\"#D36CFF\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#D36CFF\"\n      >\n        Form\n      </text>\n      }\n\n      <!-- Subflow node -->\n      @if (node.type === 'subflow') {\n      <path\n        [attr.d]=\"\n          'M 1 ' +\n          node.height / 4 +\n          ' L ' +\n          node.width / 2 +\n          ' 1 L ' +\n          (node.width - 1) +\n          ' ' +\n          node.height / 4 +\n          ' V ' +\n          (node.height * 3) / 4 +\n          ' L ' +\n          node.width / 2 +\n          ' ' +\n          (node.height - 1) +\n          ' L 1 ' +\n          (node.height * 3) / 4 +\n          ' Z'\n        \"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></path>\n      <text\n        [attr.x]=\"node.width / 2\"\n        [attr.y]=\"node.height / 2\"\n        text-anchor=\"middle\"\n        alignment-baseline=\"middle\"\n        font-family=\"sans-serif\"\n        font-size=\"10\"\n        fill=\"#000000\"\n      >\n        <!-- Limit text length -->\n        {{\n          (node.workflowData?.name || \"Subflow\").length > 12\n            ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n            : node.workflowData?.name || \"Subflow\"\n        }}\n      </text>\n      }\n\n      <!-- Connection points for this node -->\n      @for (point of node.connectionPoints || []; track point.id) { @if\n      (isConnectionPointVisible(node.id)) {\n      <use\n        [attr.href]=\"'#connection-point-template'\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n        [attr.id]=\"point.id\"\n        (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n      />\n      } }\n    </g>\n    <!-- A transparent hover area for improved hover detection -->\n    <rect\n      [attr.x]=\"node.x - 10\"\n      [attr.y]=\"node.y + 40 - 10\"\n      [attr.width]=\"node.width + 20\"\n      [attr.height]=\"node.height + 20\"\n      fill=\"transparent\"\n      (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseout)=\"hideConnectionPoints(node.id)\"\n      style=\"pointer-events: none\"\n    />\n    } }\n\n    <!-- Connections -->\n    @for (connection of state.connections; track connection.id) {\n    <g class=\"connection-element\">\n      <path\n        [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        fill=\"none\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPath()\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"5,5\"\n        fill=\"none\"\n      ></path>\n    </g>\n    }\n  </svg>\n\n  <div\n    *ngIf=\"popupVisible\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"popupX\"\n    [style.top.px]=\"popupY\"\n  >\n    <verben-pop-Up\n      [dropdownOpen]=\"true\"\n      [customStyles]=\"{ 'z-index': '99' }\"\n      [enableMouseLeave]=\"false\"\n    >\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n        dropdown-content\n      >\n        <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n        <div class=\"flex flex-col gap-2\">\n          <ng-container *ngFor=\"let type of allowedNodeTypes\">\n            <button\n              class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\"\n            >\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button\n            class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showStartNodeFormPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n        <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n          Loading forms...\n        </div>\n        <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n          <div class=\"mb-2\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\"\n            >\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(form)\"\n            >\n              {{ form.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"startNodeFormsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showSubflowPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n        <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n          Loading workflows...\n        </div>\n        <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectSubflowWorkflow(workflow)\"\n            >\n              {{ workflow.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"workflowsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <lib-conditions-popup\n    [visible]=\"showDecisionConditionDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [newConnectionId]=\"activeConnectionId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n    (saved)=\"onDecisionConditionSaved($event)\"\n  ></lib-conditions-popup>\n\n  <!-- <lib-decision-popup\n    [visible]=\"showConditionsDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n  ></lib-decision-popup> -->\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialogLocal\"\n    [stageData]=\"activeStageData || {}\"\n    (closed)=\"onStageDialogClosed()\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-designer-canvas', template: "<div class=\"canvas-container\">\n  <svg\n    #canvas\n    [attr.width]=\"canvasWidth\"\n    [attr.height]=\"canvasHeight\"\n    class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\"\n  >\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern\n        id=\"grid\"\n        [attr.width]=\"gridSize\"\n        [attr.height]=\"gridSize\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <path\n          d=\"M 20 0 L 0 0 0 20\"\n          fill=\"none\"\n          stroke=\"#e2e8f0\"\n          stroke-width=\"0.5\"\n        />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker\n        id=\"arrowhead\"\n        markerWidth=\"10\"\n        markerHeight=\"7\"\n        refX=\"9\"\n        refY=\"3.5\"\n        orient=\"auto\"\n      >\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point styles -->\n      <circle\n        id=\"connection-point-template\"\n        r=\"5\"\n        fill=\"#D36CFF\"\n        stroke=\"#FFFFFF\"\n        stroke-width=\"1\"\n      />\n\n      <!-- Dashed line style for connection preview -->\n      <pattern\n        id=\"dashed-line\"\n        width=\"10\"\n        height=\"10\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"5\"\n          x2=\"10\"\n          y2=\"5\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"2\"\n          stroke-dasharray=\"5,5\"\n        />\n      </pattern>\n\n      @for (swimlane of state.swimlanes; track swimlane.order) {\n      <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n        <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n      </clipPath>\n      }\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      font-family=\"sans-serif\"\n      font-size=\"16\"\n      fill=\"#94a3b8\"\n      text-anchor=\"middle\"\n    >\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <g\n      [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n      [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n    >\n      <!-- Swimlane container -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        [attr.height]=\"263\"\n        fill=\"#ffffff\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane header -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        height=\"40\"\n        fill=\"#f8fafc\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane label -->\n      <text\n        x=\"20\"\n        y=\"25\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#333333\"\n        font-weight=\"bold\"\n      >\n        {{ swimlane.label }}\n      </text>\n\n      <!-- Edit button -->\n      <g\n        class=\"edit-swimlane-button\"\n        [attr.transform]=\"'translate(100, 20)'\"\n        (click)=\"\n          onEditSwimlane($event, swimlane, swimlane.order);\n          $event.stopPropagation()\n        \"\n      >\n        <rect\n          x=\"-5\"\n          y=\"-15\"\n          width=\"40\"\n          height=\"20\"\n          fill=\"#f3e8ff\"\n          rx=\"3\"\n          ry=\"3\"\n          stroke=\"#d8b4fe\"\n          stroke-width=\"1\"\n        ></rect>\n        <text\n          x=\"15\"\n          y=\"0\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#7e22ce\"\n          text-anchor=\"middle\"\n        >\n          Edit\n        </text>\n      </g>\n\n      <!-- Tag indicators -->\n      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n    </g>\n    }\n\n    <!-- Nodes -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- Render nodes in this swimlane -->\n    @for (node of swimlane.nodes; track node.id) {\n    <g\n      class=\"node-element\"\n      [attr.transform]=\"'translate(' + node.x + ',' + (node.y + 40) + ')'\"\n      (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseleave)=\"hideConnectionPoints(node.id)\"\n    >\n      <!-- Start node indicator (circle and arrow) for the first node -->\n      @if (node.isStartNode) {\n      <!-- Circle -->\n      <circle\n        cx=\"-30\"\n        cy=\"50\"\n        r=\"15\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></circle>\n      <!-- Form icon for start node -->\n      <svg:g\n        (click)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n        \"\n        class=\"stage-icon\"\n        transform=\"translate(-45, 42)\"\n        style=\"cursor: pointer; pointer-events: all\"\n      >\n        <!-- Transparent rectangle to capture clicks -->\n        <svg:rect\n          x=\"-2\"\n          y=\"-2\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"transparent\"\n          style=\"cursor: pointer\"\n        />\n        <svg:path\n          d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n          [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n          transform=\"scale(0.7)\"\n        />\n      </svg:g>\n      <!-- Arrow from circle to node -->\n      <path\n        d=\"M -20 50 L 0 50\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n      }\n\n      <!-- Exit point indicator (circle and arrow) -->\n      @if (node.stageData?.IsExitPoint) {\n      <!-- Arrow from node to circle -->\n      <path\n        [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n      <!-- Circle -->\n      <circle\n        [attr.cx]=\"node.width + 50\"\n        cy=\"50\"\n        r=\"30\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n      ></circle>\n      }\n\n      <!-- Stage node -->\n      @if (node.type === 'stage') {\n      <!-- <rect\n                  x=\"0\"\n                  y=\"0\"\n                  [attr.width]=\"node.width\"\n                  [attr.height]=\"node.height\"\n                  fill=\"none\"\n                  stroke=\"#D36CFF\"\n                  stroke-width=\"1\"\n                ></rect> -->\n      <svg:g\n        lib-stage-node\n        [node]=\"node\"\n        [isStartNode]=\"node.isStartNode\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n        (showShieldDialog)=\"onShowShieldDialog($event)\"\n      ></svg:g>\n      }\n\n      <!-- Decision node -->\n      @if (node.type === 'decision') {\n      <path\n        [attr.d]=\"\n          'M 0 ' +\n          node.height / 2 +\n          ' L ' +\n          node.width / 2 +\n          ' 0' +\n          ' L ' +\n          node.width +\n          ' ' +\n          node.height / 2 +\n          ' L ' +\n          node.width / 2 +\n          ' ' +\n          node.height +\n          ' Z'\n        \"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></path>\n\n      <!-- Decision node condition indicator icon -->\n      <svg:g\n        (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\"\n        class=\"decision-condition-icon\"\n        [attr.transform]=\"\n          'translate(' +\n          (node.width / 2 - 10) +\n          ',' +\n          (node.height / 2 - 10) +\n          ')'\n        \"\n      >\n        <svg:rect\n          x=\"-5\"\n          y=\"-5\"\n          width=\"30\"\n          height=\"30\"\n          fill=\"transparent\"\n          style=\"cursor: pointer\"\n        />\n        <svg:path\n          d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n          fill=\"#D36CFF\"\n        />\n      </svg:g>\n      }\n\n      <!-- Form node -->\n      @if (node.type === 'form') {\n      <path\n        d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n        transform=\"scale(0.7)\"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n        transform=\"scale(0.7)\"\n        stroke=\"#D36CFF\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#D36CFF\"\n      >\n        Form\n      </text>\n      }\n\n      <!-- Subflow node -->\n      @if (node.type === 'subflow') {\n      <path\n        [attr.d]=\"\n          'M 1 ' +\n          node.height / 4 +\n          ' L ' +\n          node.width / 2 +\n          ' 1 L ' +\n          (node.width - 1) +\n          ' ' +\n          node.height / 4 +\n          ' V ' +\n          (node.height * 3) / 4 +\n          ' L ' +\n          node.width / 2 +\n          ' ' +\n          (node.height - 1) +\n          ' L 1 ' +\n          (node.height * 3) / 4 +\n          ' Z'\n        \"\n        fill=\"none\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"1\"\n      ></path>\n      <text\n        [attr.x]=\"node.width / 2\"\n        [attr.y]=\"node.height / 2\"\n        text-anchor=\"middle\"\n        alignment-baseline=\"middle\"\n        font-family=\"sans-serif\"\n        font-size=\"10\"\n        fill=\"#000000\"\n      >\n        <!-- Limit text length -->\n        {{\n          (node.workflowData?.name || \"Subflow\").length > 12\n            ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n            : node.workflowData?.name || \"Subflow\"\n        }}\n      </text>\n      }\n\n      <!-- Connection points for this node -->\n      @for (point of node.connectionPoints || []; track point.id) { @if\n      (isConnectionPointVisible(node.id)) {\n      <use\n        [attr.href]=\"'#connection-point-template'\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n        [attr.id]=\"point.id\"\n        (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n      />\n      } }\n    </g>\n    <!-- A transparent hover area for improved hover detection -->\n    <rect\n      [attr.x]=\"node.x - 10\"\n      [attr.y]=\"node.y + 40 - 10\"\n      [attr.width]=\"node.width + 20\"\n      [attr.height]=\"node.height + 20\"\n      fill=\"transparent\"\n      (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseout)=\"hideConnectionPoints(node.id)\"\n      style=\"pointer-events: none\"\n    />\n    } }\n\n    <!-- Connections -->\n    @for (connection of state.connections; track connection.id) {\n    <g class=\"connection-element\">\n      <path\n        [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        fill=\"none\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPath()\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"5,5\"\n        fill=\"none\"\n      ></path>\n    </g>\n    }\n  </svg>\n\n  <div\n    *ngIf=\"popupVisible\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"popupX\"\n    [style.top.px]=\"popupY\"\n  >\n    <verben-pop-Up\n      [dropdownOpen]=\"true\"\n      [customStyles]=\"{ 'z-index': '99' }\"\n      [enableMouseLeave]=\"false\"\n    >\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n        dropdown-content\n      >\n        <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n        <div class=\"flex flex-col gap-2\">\n          <ng-container *ngFor=\"let type of allowedNodeTypes\">\n            <button\n              class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\"\n            >\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button\n            class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showStartNodeFormPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n        <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n          Loading forms...\n        </div>\n        <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n          <div class=\"mb-2\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\"\n            >\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(form)\"\n            >\n              {{ form.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"startNodeFormsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showSubflowPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n        <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n          Loading workflows...\n        </div>\n        <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectSubflowWorkflow(workflow)\"\n            >\n              {{ workflow.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"workflowsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <lib-conditions-popup\n    [visible]=\"showDecisionConditionDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [newConnectionId]=\"activeConnectionId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n    (saved)=\"onDecisionConditionSaved($event)\"\n  ></lib-conditions-popup>\n\n  <!-- <lib-decision-popup\n    [visible]=\"showConditionsDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n  ></lib-decision-popup> -->\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialogLocal\"\n    [stageData]=\"activeStageData || {}\"\n    (closed)=\"onStageDialogClosed()\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}\n"] }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { selectedTool: [{
+                type: Input
+            }], clickedPosition: [{
+                type: Output
+            }], subflowSelected: [{
+                type: Output
+            }], showStageDialog: [{
+                type: Output
+            }], stagePropertiesUpdated: [{
+                type: Output
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas', { static: true }]
+            }], onWindowMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class SwimlaneDialogComponent {
+    dataService;
+    swimlaneService;
+    visible = false;
+    swimlaneData = null;
+    closed = new EventEmitter();
+    created = new EventEmitter();
+    searchQuery = '';
+    workflowName = '';
+    // Track selected tags in a separate array
+    selectedTagNames = [];
+    // Tags list
+    tags = [];
+    constructor(dataService, swimlaneService) {
+        this.dataService = dataService;
+        this.swimlaneService = swimlaneService;
+    }
+    ngOnInit() {
+        console.log('Swimlane dialog initialized with data:', this.swimlaneData);
+        // Reset form fields when dialog opens
+        this.selectedTagNames = [];
+        this.workflowName = '';
+        this.searchQuery = '';
+        // Load tags from the data service
+        this.loadTags();
+        // If editing an existing swimlane, populate the form
+        if (this.swimlaneData) {
+            this.workflowName = this.swimlaneData.name;
+            // Set selected tags
+            this.selectedTagNames = this.swimlaneData.tags.map((tag) => tag.Name);
+        }
+    }
+    /**
+     * Load tags from the data service
+     */
+    loadTags() {
+        this.dataService.getTags().then((data) => {
+            this.tags = data.Result;
+        });
+    }
+    get allSelected() {
+        return (this.tags.length > 0 && this.selectedTagNames.length === this.tags.length);
+    }
+    set allSelected(value) {
+        if (value) {
+            this.selectedTagNames = this.tags.map((tag) => tag.Name);
         }
-        // For top/bottom points, start with vertical line
-        else if (pointType === 'top' || pointType === 'bottom') {
-            // Calculate vertical distance
-            const verticalDist = endY - startY;
-            // If the end point is very close vertically, use a simple 3-segment path
-            if (Math.abs(verticalDist) < 30) {
-                const midX = (startX + endX) / 2;
-                path = `M ${startX} ${startY} V ${endY} H ${midX} H ${endX}`;
-            }
-            // Otherwise, create a path with vertical segment first, then horizontal, then vertical
-            else {
-                path = `M ${startX} ${startY} V ${startY + verticalDist / 2} H ${endX} V ${endY}`;
-            }
+        else {
+            this.selectedTagNames = [];
         }
-        return path;
     }
-    onStagePropertiesUpdated(event) {
-        // Find the node in the swimlanes
-        for (let i = 0; i < this.state.swimlanes.length; i++) {
-            const swimlane = this.state.swimlanes[i];
-            const nodeIndex = swimlane.nodes?.findIndex((n) => n.id === event.nodeId);
-            if (nodeIndex !== undefined && nodeIndex >= 0) {
-                // Update the stage data
-                if (swimlane.nodes) {
-                    swimlane.nodes[nodeIndex].stageData = {
-                        ...swimlane.nodes[nodeIndex].stageData,
-                        ...event.stageData,
-                    };
-                    console.log('Updated stage data in swimlane:', i, 'node:', nodeIndex, 'data:', swimlane.nodes[nodeIndex].stageData);
-                }
-                break;
-            }
+    get filteredTags() {
+        if (!this.searchQuery) {
+            return this.tags;
         }
+        return this.tags.filter((tag) => tag.Name.toLowerCase().includes(this.searchQuery.toLowerCase()));
     }
-    onConnectionCreated(connection) {
-        // After a connection is created, refresh the source node to update its state
-        const sourceNodeInfo = this.state.findNodeById(connection.sourceNodeId);
-        if (sourceNodeInfo && sourceNodeInfo.node.type === 'stage') {
-            // Refresh node state
-            this.updateNodeConnections(sourceNodeInfo.node);
+    isTagSelected(tagName) {
+        return this.selectedTagNames.includes(tagName);
+    }
+    toggleTagSelection(tagName) {
+        const index = this.selectedTagNames.indexOf(tagName);
+        if (index > -1) {
+            this.selectedTagNames.splice(index, 1);
+        }
+        else {
+            this.selectedTagNames.push(tagName);
         }
     }
-    // Helper method to update node's connection status
-    updateNodeConnections(node) {
-        // Count the number of outgoing connections that connect to stages
-        const outgoingConnections = this.state.connections.filter((conn) => conn.sourceNodeId === node.id);
-        // Check if the target nodes are stages
-        const connectedStageNodes = outgoingConnections
-            .map((conn) => this.state.findNodeById(conn.targetNodeId))
-            .filter((nodeInfo) => nodeInfo && nodeInfo.node.type === 'stage');
-        node.hasMultipleConnectedStages = connectedStageNodes.length > 1;
+    onDialogClose(eventData) {
+        console.log('Dialog closed, received data:', eventData);
+        this.searchQuery = '';
+        this.workflowName = '';
+        this.selectedTagNames = [];
+        this.closed.emit();
     }
-    onEditSwimlane(event, swimlane, swimlaneIndex) {
-        event.stopPropagation(); // Prevent the canvas click event from firing
-        event.preventDefault();
-        console.log('Edit swimlane button clicked for swimlane:', swimlaneIndex);
-        // Emit a special event for editing a swimlane
-        this.clickedPosition.emit({
-            x: -1, // Special value to indicate edit mode
-            y: swimlaneIndex,
+    onDialogOpen(eventData) {
+        console.log('Dialog opened, received data:', eventData);
+    }
+    applySelection() {
+        // Validate name
+        if (!this.workflowName || this.workflowName.trim() === '') {
+            console.error('Swimlane name cannot be empty');
+            return;
+        }
+        const selectedTags = this.tags.filter((tag) => this.selectedTagNames.includes(tag.Name));
+        console.log('Submitting swimlane data:', {
+            name: this.workflowName,
+            tags: selectedTags,
+        });
+        this.created.emit({
+            tags: selectedTags,
+            name: this.workflowName,
         });
     }
-    // showStartNodeFormPopup(event: MouseEvent): void {
-    //   event.preventDefault();
-    //   event.stopPropagation();
-    //   // Implementation will be similar to the stage form popup
-    //   // We'll need to add UI elements for this
-    //   console.log('Start node form popup requested');
-    //   // For now, this is a placeholder
-    //   // The actual implementation would load forms and add them to the workflow
-    // }
-    toggleStartNodeFormPopup(event, nodeX, nodeY, swimlaneIndex) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Set popup position
-        const swimlaneOffset = swimlaneIndex * 263 + 40;
-        this.startNodeFormPopupX = nodeX - 30; // Position near the start node
-        this.startNodeFormPopupY = nodeY + swimlaneOffset;
-        // If we're opening the popup, load forms
-        if (!this.showStartNodeFormPopup) {
-            this.isLoadingStartNodeForms = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, deps: [{ token: WorkflowDataService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: "visible", swimlaneData: "swimlaneData" }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center p-4 border-b border-gray-200\">\n    <button class=\"mr-4\" type=\"button\">\n      <span\n        class=\"block w-3 h-3 border-t-2 border-l-2 border-gray-700 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"flex-1\">\n      <h2 class=\"text-base font-medium m-0\">Name</h2>\n      <span class=\"text-xs text-gray-500\">{{ tags.length }} tags</span>\n    </div>\n    <span class=\"text-blue-600 font-medium cursor-pointer\">Create</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <div class=\"mb-4 space-y-4\">\n      <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"text\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"divide-y divide-gray-100\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium\"\n      (click)=\"applySelection()\"\n    >\n      Apply\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-swimlane-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center p-4 border-b border-gray-200\">\n    <button class=\"mr-4\" type=\"button\">\n      <span\n        class=\"block w-3 h-3 border-t-2 border-l-2 border-gray-700 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"flex-1\">\n      <h2 class=\"text-base font-medium m-0\">Name</h2>\n      <span class=\"text-xs text-gray-500\">{{ tags.length }} tags</span>\n    </div>\n    <span class=\"text-blue-600 font-medium cursor-pointer\">Create</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <div class=\"mb-4 space-y-4\">\n      <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"text\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"divide-y divide-gray-100\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium\"\n      (click)=\"applySelection()\"\n    >\n      Apply\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: WorkflowDataService }, { type: SwimlaneService }], propDecorators: { visible: [{
+                type: Input
+            }], swimlaneData: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], created: [{
+                type: Output
+            }] } });
+
+class WorkflowDesignerComponent {
+    state;
+    dataService;
+    canvasRef;
+    workflowCode = null;
+    // Currently selected tool
+    selectedTool = null;
+    showSwimlaneDialog = false;
+    // New properties for stage dialog
+    showStageDialog = false;
+    pendingStagePosition = null;
+    pendingStageData = {};
+    editingSwimlaneIndex = null;
+    isCreatingStageFromConnection = false;
+    pendingConnectionSourcePoint = null;
+    pendingConnectionSourceSwimlaneIndex = null;
+    isLoading = false;
+    isSaving = false;
+    constructor(state, dataService) {
+        this.state = state;
+        this.dataService = dataService;
+    }
+    ngOnInit() {
+        // Load workflow data if code is provided
+        if (this.workflowCode) {
+            this.loadWorkflow(this.workflowCode);
+        }
+    }
+    saveWorkflow() {
+        if (this.isSaving)
+            return;
+        this.isSaving = true;
+        // Transform the UI model to the API model
+        const workflowModel = this.state.transformToWorkflowModel();
+        if (workflowModel) {
+            // Save to the backend
             this.dataService
-                .getForms()
+                .saveWorkflows([workflowModel])
                 .then((response) => {
-                this.startNodeFormsList = response.Result;
-                this.isLoadingStartNodeForms = false;
+                console.log('Workflow saved successfully:', response);
+                // If the API returns an updated workflow, we might want to reload it
+                if (response?.Result?.Code) {
+                    this.workflowCode = response.Result.Code;
+                }
+                this.isSaving = false;
             })
                 .catch((error) => {
-                console.error('Error loading forms:', error);
-                this.isLoadingStartNodeForms = false;
+                console.error('Error saving workflow:', error);
+                this.isSaving = false;
+                // Handle error - show a notification, etc.
+            });
+        }
+    }
+    loadWorkflow(code) {
+        this.isLoading = true;
+        this.dataService
+            .getWorkflowWithParam(code)
+            .then((response) => {
+            if (response && response.Result) {
+                // Store the workflow ID
+                const wf = response.Result[0];
+                this.state.setWorkflowId(wf.Id);
+                this.parseWorkflowData(wf);
+            }
+            this.isLoading = false;
+        })
+            .catch((error) => {
+            console.error('Error loading workflow:', error);
+            this.isLoading = false;
+        });
+    }
+    // Method to parse workflow data from API and populate the designer
+    parseWorkflowData(workflow) {
+        // Store the complete workflow
+        this.state.workflow = workflow;
+        // Clear existing state
+        this.state.swimlanes = [];
+        this.state.connections = [];
+        this.state.swimlaneRecord = {};
+        this.state.stageRecord = {};
+        this.state.actionRecord = {};
+        // Set workflow form if exists
+        if (workflow.Form) {
+            this.state.setWorkflowForm(workflow.Form, workflow.FormName || 'Workflow Form');
+        }
+        // Store the workflow ID
+        this.state.setWorkflowId(workflow.Id);
+        // Process swimlanes first
+        if (workflow.Lanes && workflow.Lanes.length) {
+            workflow.Lanes.sort((a, b) => a.Position - b.Position).forEach((lane) => {
+                // Store original lane in record
+                this.state.swimlaneRecord[lane.Id] = lane;
+                // Add swimlane to UI model with the original ID
+                const swimlane = {
+                    order: lane.Position,
+                    label: lane.Name || `Lane ${lane.Position}`,
+                    tags: lane.Tags || [],
+                    nodes: [],
+                    id: lane.Id, // Store the original ID
+                };
+                this.state.swimlanes.push(swimlane);
+                // Register loaded object
+                this.state.registerLoadedObject(lane.Id, lane.Code);
+            });
+        }
+        // Process stages
+        if (workflow.Stages && workflow.Stages.length) {
+            workflow.Stages.forEach((stage) => {
+                // Store original stage in record
+                this.state.stageRecord[stage.Id] = stage;
+                // Find swimlane index by SwimLane ID
+                const swimlaneIndex = this.state.swimlanes.findIndex((lane) => lane.id === stage.SwimLane);
+                if (swimlaneIndex !== -1) {
+                    const x = stage.Coordinates?.X || 100;
+                    const y = stage.Coordinates?.Y || 50;
+                    // Create node with original ID
+                    const node = {
+                        id: stage.Id, // Use original ID
+                        type: 'stage',
+                        x: x,
+                        y: y - swimlaneIndex * 263 - 40, // Adjust Y for swimlane offset
+                        width: 169,
+                        height: 100,
+                        isStartNode: stage.IsEntryPoint,
+                        stageData: {
+                            Name: stage.Name,
+                            Description: stage.Description,
+                            Duration: stage.Duration,
+                            PassOnRule: stage.PassOnRule,
+                            ActorRule: stage.ActorRule,
+                            MinNoOfActor: stage.MinNoOfActor,
+                            Tags: stage.Tags || [],
+                            IsParallel: stage.IsParallel,
+                            IsEntryPoint: stage.IsEntryPoint,
+                            IsExitPoint: stage.IsExitPoint,
+                            Id: stage.Id, // Keep original ID
+                        },
+                        connectionPoints: [], // Initialize with empty array
+                    };
+                    // Generate connection points
+                    node.connectionPoints = this.state.generateConnectionPoints(node);
+                    // Add node to swimlane
+                    this.state.swimlanes[swimlaneIndex].nodes =
+                        this.state.swimlanes[swimlaneIndex].nodes || [];
+                    this.state.swimlanes[swimlaneIndex].nodes.push(node);
+                    // If this is a start node, update state
+                    if (stage.IsEntryPoint) {
+                        this.state.startNodeId = stage.Id;
+                    }
+                    // Register loaded stage
+                    this.state.registerLoadedObject(stage.Id, stage.Code);
+                }
+            });
+        }
+        // Process connections/actions
+        if (workflow.Actions && workflow.Actions.length) {
+            workflow.Actions.forEach((action) => {
+                // Store original action in record
+                this.state.actionRecord[action.Id] = action;
+                // Find source and target nodes
+                const sourceNodeInfo = this.state.findNodeById(action.FromStage);
+                const targetNodeInfo = this.state.findNodeById(action.ToStage);
+                if (sourceNodeInfo && targetNodeInfo) {
+                    // Find suitable connection points
+                    const sourceNode = sourceNodeInfo.node;
+                    const targetNode = targetNodeInfo.node;
+                    const sourcePoint = sourceNode.connectionPoints?.find((p) => p.type === 'right' || p.type === 'bottom');
+                    const targetPoint = targetNode.connectionPoints?.find((p) => p.type === 'left' || p.type === 'top');
+                    if (sourcePoint && targetPoint) {
+                        const connection = {
+                            id: action.Id, // Use original ID
+                            sourceNodeId: action.FromStage,
+                            targetNodeId: action.ToStage,
+                            sourcePointId: sourcePoint.id,
+                            targetPointId: targetPoint.id,
+                            sourceSwimlaneIndex: sourceNodeInfo.swimlaneIndex,
+                            targetSwimlaneIndex: targetNodeInfo.swimlaneIndex,
+                            condition: action.PassOnRule || '',
+                        };
+                        this.state.connections.push(connection);
+                        // Register loaded action
+                        this.state.registerLoadedObject(action.Id, action.Code);
+                    }
+                }
             });
         }
-        this.showStartNodeFormPopup = !this.showStartNodeFormPopup;
     }
-    selectStartNodeForm(form) {
-        if (form) {
-            this.state.setWorkflowForm(form.Id, form.Name);
+    // Helper method to find swimlane index by Lane ID
+    findSwimlaneIndexByLaneId(laneId) {
+        // First check our mapping
+        if (this.state.laneIdToIndexMap.has(laneId)) {
+            return this.state.laneIdToIndexMap.get(laneId);
         }
-        else {
-            this.state.setWorkflowForm(null, null);
+        // Fallback to the original logic (for backward compatibility)
+        const parts = laneId.split('-');
+        if (parts.length > 1) {
+            const index = parseInt(parts[1]);
+            if (!isNaN(index) && index < this.state.swimlanes.length) {
+                return index;
+            }
         }
-        // Close the popup
-        this.showStartNodeFormPopup = false;
+        return -1;
     }
-    showSubflowSelectionPopup(x, y, swimlaneIndex) {
-        this.subflowPopupX = x;
-        this.subflowPopupY = y;
-        this.pendingSubflowPosition = { swimlaneIndex, x, y };
-        // Store connection data if we're creating from a connection
-        if (this.state.isConnectionDragging()) {
-            // Store the source connection data
+    // Handle tool selection from toolbar
+    onToolSelected(tool) {
+        // Toggle selection if the same tool is clicked again
+        this.selectedTool = this.selectedTool === tool ? null : tool;
+        console.log('Selected tool:', this.selectedTool);
+    }
+    openSwimlaneDialog() {
+        this.showSwimlaneDialog = true;
+    }
+    onShowStageDialog(event) {
+        console.log('Received showStageDialog event:', event);
+        this.pendingStagePosition = event.position;
+        this.showStageDialog = true;
+        // If this is from a connection creation, store that info
+        this.isCreatingStageFromConnection = event.isFromConnection;
+        // Store the source point data before it gets lost
+        if (event.isFromConnection &&
+            this.state.draggingConnectionData.sourcePoint) {
             this.pendingConnectionSourcePoint =
-                this.state.draggingConnectionData.sourcePoint ?? null;
+                this.state.draggingConnectionData.sourcePoint;
             this.pendingConnectionSourceSwimlaneIndex =
                 this.state.draggingConnectionData.sourceSwimlaneIndex ?? null;
-            console.log('Stored connection data for subflow:', {
-                sourcePoint: this.pendingConnectionSourcePoint,
-                sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
-            });
+            console.log('Stored source point for connection:', this.pendingConnectionSourcePoint);
         }
-        // Load workflows
-        this.isLoadingWorkflows = true;
-        this.dataService
-            .getWorkflows()
-            .then((response) => {
-            this.workflowsList = response.Result;
-            this.isLoadingWorkflows = false;
-        })
-            .catch((error) => {
-            console.error('Error loading workflows:', error);
-            this.isLoadingWorkflows = false;
+        console.log('Stage dialog state:', {
+            pendingPosition: this.pendingStagePosition,
+            isVisible: this.showStageDialog,
         });
-        this.showSubflowPopup = true;
     }
-    selectSubflowWorkflow(workflow) {
-        console.log('Selecting workflow for subflow:', workflow.Name);
-        console.log('Pending connection data:', {
-            sourcePoint: this.pendingConnectionSourcePoint,
-            sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
-            position: this.pendingSubflowPosition,
-        });
-        if (this.pendingSubflowPosition) {
-            const { swimlaneIndex, x, y } = this.pendingSubflowPosition;
-            // Create the subflow node with the selected workflow data
-            const node = this.state.addNode(swimlaneIndex, 'subflow', x, y, undefined, // No stage data
-            { id: workflow.Id, name: workflow.Name });
-            console.log('Created subflow node:', node);
-            // If this was created from a connection, create the connection
-            if (node && this.pendingConnectionSourcePoint) {
-                console.log('Creating connection to new subflow node');
-                // Find a suitable connection point on the new node
-                if (node.connectionPoints && node.connectionPoints.length > 0) {
-                    const sourcePoint = this.pendingConnectionSourcePoint;
-                    // Find opposing type connection point
-                    const opposingType = {
-                        right: 'left',
-                        left: 'right',
-                        top: 'bottom',
-                        bottom: 'top',
-                    }[sourcePoint.type];
-                    const targetPoint = node.connectionPoints.find((p) => p.type === opposingType);
-                    if (targetPoint) {
-                        // Create connection
-                        const connection = {
-                            id: `conn-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
-                            sourceNodeId: sourcePoint.nodeId,
-                            targetNodeId: node.id,
-                            sourcePointId: sourcePoint.id,
-                            targetPointId: targetPoint.id,
-                            sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
-                            targetSwimlaneIndex: swimlaneIndex,
-                        };
-                        // Add connection directly to the state's connections array
-                        this.state.connections.push(connection);
-                        console.log('Added connection to state:', connection);
-                        console.log('Connections after adding:', this.state.connections);
+    handleCanvasPositionClick(event) {
+        console.log(event);
+        // Check if this is an edit swimlane event
+        if (event.x === -1 &&
+            event.y >= 0 &&
+            event.y < this.state.swimlanes.length) {
+            console.log('Editing swimlane', event.y);
+            this.editingSwimlaneIndex = event.y;
+            this.openSwimlaneDialog();
+            return;
+        }
+        // Normal canvas click handling
+        const swimlaneIndex = Math.floor(event.y / 263);
+        switch (this.selectedTool) {
+            case 'swimlane':
+                console.log('Opening swimlane dialog for new swimlane');
+                this.editingSwimlaneIndex = null; // Set to null to indicate creating a new swimlane
+                this.openSwimlaneDialog();
+                this.selectedTool = null;
+                break;
+            case 'stage':
+                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
+                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
+                    // Create the stage directly with default properties
+                    const node = this.state.addNode(swimlaneIndex, 'stage', event.x, event.y, { Name: 'New Stage' } // Add default properties
+                    );
+                    if (node) {
+                        // Reset the selected tool after placing a node
+                        this.selectedTool = null;
                     }
                 }
-                this.state.endConnectionDrag();
+                break;
+            case 'decision':
+            case 'form':
+                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
+                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
+                    const node = this.state.addNode(swimlaneIndex, this.selectedTool, event.x, event.y);
+                    if (node) {
+                        // Reset the selected tool after placing a node
+                        this.selectedTool = null;
+                    }
+                }
+                break;
+            case 'subflow':
+                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
+                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
+                    // Show subflow workflow selection popup
+                    this.canvasRef.showSubflowSelectionPopup(event.x, event.y, swimlaneIndex);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    onSwimlaneDialogFilled(event) {
+        console.log('Swimlane dialog filled:', event, 'Editing index:', this.editingSwimlaneIndex);
+        // Validate that name is not empty
+        if (!event.name || event.name.trim() === '') {
+            console.error('Swimlane name cannot be empty');
+            return;
+        }
+        if (this.editingSwimlaneIndex !== null) {
+            // Update existing swimlane
+            console.log('Updating existing swimlane at index:', this.editingSwimlaneIndex);
+            this.state.updateSwimlane(this.editingSwimlaneIndex, event.name, event.tags);
+        }
+        else {
+            // Create new swimlane
+            console.log('Creating new swimlane');
+            this.state.addSwimlane(event.name, event.tags);
+        }
+        this.showSwimlaneDialog = false;
+        this.editingSwimlaneIndex = null;
+    }
+    onStageDialogSaved(stageData) {
+        if (this.canvasRef.activeStageId) {
+            // Editing an existing stage
+            const nodeInfo = this.state.findNodeById(this.canvasRef.activeStageId);
+            if (nodeInfo) {
+                // Update the stage data
+                nodeInfo.node.stageData = {
+                    ...nodeInfo.node.stageData,
+                    ...stageData,
+                };
+                console.log('Updated stage data:', nodeInfo.node.stageData);
             }
-            // Reset selection tool in parent component
-            this.subflowSelected.emit();
+            this.canvasRef.activeStageId = null;
+        }
+        else if (this.pendingStagePosition) {
+            if (this.canvasRef.activeStageId) {
+                // Editing an existing stage
+                const nodeInfo = this.state.findNodeById(this.canvasRef.activeStageId);
+                if (nodeInfo) {
+                    // Update the stage data
+                    nodeInfo.node.stageData = {
+                        ...nodeInfo.node.stageData,
+                        ...stageData,
+                    };
+                    console.log('Updated stage data:', nodeInfo.node.stageData);
+                }
+                this.canvasRef.activeStageId = null;
+            }
+            else if (this.pendingStagePosition) {
+                // Creating a new stage (keep existing logic for this case)
+                // ...existing code...
+            }
+            this.showStageDialog = false;
         }
-        // Clean up
-        this.showSubflowPopup = false;
-        this.pendingSubflowPosition = null;
-        this.pendingConnectionSourcePoint = null;
-        this.pendingConnectionSourceSwimlaneIndex = null;
+        this.showStageDialog = false;
+    }
+    onSubflowSelected() {
+        // Reset the selected tool after placing a subflow node
+        this.selectedTool = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WorkflowDesignerComponent, selector: "lib-workflow-designer", inputs: { workflowCode: "workflowCode" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvasRef"], descendants: true }], ngImport: i0, template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>Workflow Designer</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar\n    [selectedTool]=\"selectedTool\"\n    [isSaving]=\"isSaving\"\n    (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\"\n  >\n  </lib-designer-toolbar>\n\n  <!-- Show loading indicator if needed -->\n  <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n    <div class=\"loading-spinner\"></div>\n    <div class=\"loading-text\">Loading workflow...</div>\n  </div>\n\n  <!-- Canvas Component -->\n  <lib-designer-canvas\n    [selectedTool]=\"selectedTool\"\n    (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\"\n    (showStageDialog)=\"onShowStageDialog($event)\"\n    #canvasRef\n  >\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog\n    [visible]=\"showSwimlaneDialog\"\n    [swimlaneData]=\"\n      editingSwimlaneIndex !== null\n        ? {\n            name: state.swimlanes[editingSwimlaneIndex].label,\n            tags: state.swimlanes[editingSwimlaneIndex].tags\n          }\n        : null\n    \"\n    (created)=\"onSwimlaneDialogFilled($event)\"\n    (closed)=\"showSwimlaneDialog = false\"\n  ></lib-swimlane-dialog>\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialog\"\n    [stageData]=\"pendingStageData\"\n    (closed)=\"showStageDialog = false\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:#f8fafc}.workflow-header{padding:1rem;background-color:#fff;border-bottom:1px solid #e2e8f0}.workflow-header h1{font-size:1.25rem;font-weight:600;color:#334155;margin:0}.loading-overlay{position:absolute;inset:0;background-color:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #d8b4fe;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;font-size:1rem;color:#7e22ce}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: ["selectedTool", "isSaving"], outputs: ["toolSelected", "saveWorkflow"] }, { kind: "component", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: ["selectedTool"], outputs: ["clickedPosition", "subflowSelected", "showStageDialog", "stagePropertiesUpdated"] }, { kind: "component", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: ["visible", "swimlaneData"], outputs: ["closed", "created"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-workflow-designer', template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>Workflow Designer</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar\n    [selectedTool]=\"selectedTool\"\n    [isSaving]=\"isSaving\"\n    (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\"\n  >\n  </lib-designer-toolbar>\n\n  <!-- Show loading indicator if needed -->\n  <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n    <div class=\"loading-spinner\"></div>\n    <div class=\"loading-text\">Loading workflow...</div>\n  </div>\n\n  <!-- Canvas Component -->\n  <lib-designer-canvas\n    [selectedTool]=\"selectedTool\"\n    (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\"\n    (showStageDialog)=\"onShowStageDialog($event)\"\n    #canvasRef\n  >\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog\n    [visible]=\"showSwimlaneDialog\"\n    [swimlaneData]=\"\n      editingSwimlaneIndex !== null\n        ? {\n            name: state.swimlanes[editingSwimlaneIndex].label,\n            tags: state.swimlanes[editingSwimlaneIndex].tags\n          }\n        : null\n    \"\n    (created)=\"onSwimlaneDialogFilled($event)\"\n    (closed)=\"showSwimlaneDialog = false\"\n  ></lib-swimlane-dialog>\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialog\"\n    [stageData]=\"pendingStageData\"\n    (closed)=\"showStageDialog = false\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:#f8fafc}.workflow-header{padding:1rem;background-color:#fff;border-bottom:1px solid #e2e8f0}.workflow-header h1{font-size:1.25rem;font-weight:600;color:#334155;margin:0}.loading-overlay{position:absolute;inset:0;background-color:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #d8b4fe;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;font-size:1rem;color:#7e22ce}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['canvasRef']
+            }], workflowCode: [{
+                type: Input
+            }] } });
+
+let ConnectionService$1 = class ConnectionService {
+    state;
+    nodeService;
+    draggingConnectionData = {};
+    // The rules defining which node types can connect to which other node types
+    connectionRules = {
+        stage: ['stage', 'decision', 'subflow', 'form'],
+        decision: ['stage'], // Decisions can only connect to Stages
+        form: [],
+        subflow: ['stage', 'decision'],
+    };
+    constructor(state, nodeService) {
+        this.state = state;
+        this.nodeService = nodeService;
+    }
+    /**
+     * Start a new connection drag operation
+     */
+    startConnectionDrag(point, swimlaneIndex, globalX, globalY) {
+        this.draggingConnectionData = {
+            sourcePoint: point,
+            sourceSwimlaneIndex: swimlaneIndex,
+            startX: globalX,
+            startY: globalY,
+            currentX: globalX,
+            currentY: globalY,
+        };
+    }
+    /**
+     * Update the position of the dragging connection
+     */
+    updateConnectionDrag(currentX, currentY) {
+        if (this.draggingConnectionData.sourcePoint) {
+            this.draggingConnectionData.currentX = currentX;
+            this.draggingConnectionData.currentY = currentY;
+        }
+    }
+    /**
+     * End the current connection drag operation
+     */
+    endConnectionDrag() {
+        this.draggingConnectionData = {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", showStageDialog: "showStageDialog" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n  <svg\n    #canvas\n    [attr.width]=\"canvasWidth\"\n    [attr.height]=\"canvasHeight\"\n    class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\"\n  >\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern\n        id=\"grid\"\n        [attr.width]=\"gridSize\"\n        [attr.height]=\"gridSize\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <path\n          d=\"M 20 0 L 0 0 0 20\"\n          fill=\"none\"\n          stroke=\"#e2e8f0\"\n          stroke-width=\"0.5\"\n        />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker\n        id=\"arrowhead\"\n        markerWidth=\"10\"\n        markerHeight=\"7\"\n        refX=\"9\"\n        refY=\"3.5\"\n        orient=\"auto\"\n      >\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point styles -->\n      <circle\n        id=\"connection-point-template\"\n        r=\"5\"\n        fill=\"#D36CFF\"\n        stroke=\"#FFFFFF\"\n        stroke-width=\"1\"\n      />\n\n      <!-- Dashed line style for connection preview -->\n      <pattern\n        id=\"dashed-line\"\n        width=\"10\"\n        height=\"10\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"5\"\n          x2=\"10\"\n          y2=\"5\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"2\"\n          stroke-dasharray=\"5,5\"\n        />\n      </pattern>\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      font-family=\"sans-serif\"\n      font-size=\"16\"\n      fill=\"#94a3b8\"\n      text-anchor=\"middle\"\n    >\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n      <!-- Swimlane container -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        [attr.height]=\"263\"\n        fill=\"#ffffff\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane header -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        height=\"40\"\n        fill=\"#f8fafc\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane label -->\n      <text\n        x=\"20\"\n        y=\"25\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#333333\"\n        font-weight=\"bold\"\n      >\n        {{ swimlane.label }}\n      </text>\n\n      <!-- Edit button -->\n      <g\n        class=\"edit-swimlane-button\"\n        [attr.transform]=\"'translate(200, 20)'\"\n        (click)=\"\n          onEditSwimlane($event, swimlane, swimlane.order);\n          $event.stopPropagation()\n        \"\n      >\n        <rect\n          x=\"-5\"\n          y=\"-15\"\n          width=\"40\"\n          height=\"20\"\n          fill=\"#f3e8ff\"\n          rx=\"3\"\n          ry=\"3\"\n          stroke=\"#d8b4fe\"\n          stroke-width=\"1\"\n        ></rect>\n        <text\n          x=\"15\"\n          y=\"0\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#7e22ce\"\n          text-anchor=\"middle\"\n        >\n          Edit\n        </text>\n      </g>\n\n      <!-- Tag indicators -->\n      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n\n      <!-- Render nodes in this swimlane -->\n      @for (node of swimlane.nodes; track node.id) {\n      <g\n        [attr.transform]=\"'translate(' + node.x + ',' + (node.y + 40) + ')'\"\n        (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n        (mouseleave)=\"hideConnectionPoints(node.id)\"\n      >\n        <!-- Start node indicator (circle and arrow) for the first node -->\n        @if (node.isStartNode) {\n        <!-- Circle -->\n        <circle\n          cx=\"-30\"\n          cy=\"50\"\n          r=\"15\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></circle>\n        <!-- Form icon for start node -->\n        <svg:g\n          (click)=\"\n            toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n          \"\n          class=\"stage-icon\"\n          transform=\"translate(-45, 42)\"\n          style=\"cursor: pointer; pointer-events: all\"\n        >\n          <!-- Transparent rectangle to capture clicks -->\n          <svg:rect\n            x=\"-2\"\n            y=\"-2\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"transparent\"\n            style=\"cursor: pointer\"\n          />\n          <svg:path\n            d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n            [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n            transform=\"scale(0.7)\"\n          />\n        </svg:g>\n        <!-- Arrow from circle to node -->\n        <path\n          d=\"M -20 50 L 0 50\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n          marker-end=\"url(#arrowhead)\"\n        ></path>\n        }\n\n        <!-- Stage node -->\n        @if (node.type === 'stage') {\n        <!-- <rect\n          x=\"0\"\n          y=\"0\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></rect> -->\n        <svg:g\n          lib-stage-node\n          [node]=\"node\"\n          [isStartNode]=\"node.isStartNode\"\n          (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n        ></svg:g>\n        }\n\n        <!-- Decision node -->\n        @if (node.type === 'decision') {\n        <path\n          [attr.d]=\"\n            'M 0 ' +\n            node.height / 2 +\n            ' L ' +\n            node.width / 2 +\n            ' 0' +\n            ' L ' +\n            node.width +\n            ' ' +\n            node.height / 2 +\n            ' L ' +\n            node.width / 2 +\n            ' ' +\n            node.height +\n            ' Z'\n          \"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></path>\n        }\n\n        <!-- Form node -->\n        @if (node.type === 'form') {\n        <path\n          d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n          transform=\"scale(0.7)\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n          transform=\"scale(0.7)\"\n          stroke=\"#D36CFF\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"middle\"\n          font-family=\"sans-serif\"\n          font-size=\"14\"\n          fill=\"#D36CFF\"\n        >\n          Form\n        </text>\n        }\n\n        <!-- Subflow node -->\n        @if (node.type === 'subflow') {\n        <path\n          [attr.d]=\"\n            'M 1 ' +\n            node.height / 4 +\n            ' L ' +\n            node.width / 2 +\n            ' 1 L ' +\n            (node.width - 1) +\n            ' ' +\n            node.height / 4 +\n            ' V ' +\n            (node.height * 3) / 4 +\n            ' L ' +\n            node.width / 2 +\n            ' ' +\n            (node.height - 1) +\n            ' L 1 ' +\n            (node.height * 3) / 4 +\n            ' Z'\n          \"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></path>\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"middle\"\n          font-family=\"sans-serif\"\n          font-size=\"14\"\n          fill=\"#000000\"\n        >\n          {{ node.workflowData?.name || \"Subflow\" }}\n        </text>\n        }\n\n        <!-- Connection points for this node -->\n        @for (point of node.connectionPoints || []; track point.id) { @if\n        (isConnectionPointVisible(node.id)) {\n        <use\n          [attr.href]=\"'#connection-point-template'\"\n          [attr.x]=\"point.x\"\n          [attr.y]=\"point.y\"\n          [attr.id]=\"point.id\"\n          (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n        />\n        } }\n      </g>\n      <!-- A transparent hover area for improved hover detection -->\n      <rect\n        [attr.x]=\"node.x - 10\"\n        [attr.y]=\"node.y + 40 - 10\"\n        [attr.width]=\"node.width + 20\"\n        [attr.height]=\"node.height + 20\"\n        fill=\"transparent\"\n        (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n        (mouseout)=\"hideConnectionPoints(node.id)\"\n        style=\"pointer-events: none\"\n      />\n      }\n    </g>\n    } @for (connection of state.connections; track connection.id) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        fill=\"none\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPath()\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"5,5\"\n        fill=\"none\"\n      ></path>\n    </g>\n    }\n  </svg>\n\n  <div\n    *ngIf=\"popupVisible\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"popupX\"\n    [style.top.px]=\"popupY\"\n  >\n    <verben-pop-Up\n      [dropdownOpen]=\"true\"\n      [customStyles]=\"{ 'z-index': '99' }\"\n      [enableMouseLeave]=\"false\"\n    >\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n        dropdown-content\n      >\n        <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n        <div class=\"flex flex-col gap-2\">\n          <ng-container *ngFor=\"let type of allowedNodeTypes\">\n            <button\n              class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\"\n            >\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button\n            class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showStartNodeFormPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n        <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n          Loading forms...\n        </div>\n        <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n          <div class=\"mb-2\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\"\n            >\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(form)\"\n            >\n              {{ form.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"startNodeFormsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showSubflowPopup\"\n    [style.position]=\"'fiabsolutexed'\"\n    [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n        <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n          Loading workflows...\n        </div>\n        <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectSubflowWorkflow(workflow)\"\n            >\n              {{ workflow.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"workflowsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-designer-canvas', template: "<div class=\"canvas-container\">\n  <svg\n    #canvas\n    [attr.width]=\"canvasWidth\"\n    [attr.height]=\"canvasHeight\"\n    class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\"\n  >\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern\n        id=\"grid\"\n        [attr.width]=\"gridSize\"\n        [attr.height]=\"gridSize\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <path\n          d=\"M 20 0 L 0 0 0 20\"\n          fill=\"none\"\n          stroke=\"#e2e8f0\"\n          stroke-width=\"0.5\"\n        />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker\n        id=\"arrowhead\"\n        markerWidth=\"10\"\n        markerHeight=\"7\"\n        refX=\"9\"\n        refY=\"3.5\"\n        orient=\"auto\"\n      >\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point styles -->\n      <circle\n        id=\"connection-point-template\"\n        r=\"5\"\n        fill=\"#D36CFF\"\n        stroke=\"#FFFFFF\"\n        stroke-width=\"1\"\n      />\n\n      <!-- Dashed line style for connection preview -->\n      <pattern\n        id=\"dashed-line\"\n        width=\"10\"\n        height=\"10\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"5\"\n          x2=\"10\"\n          y2=\"5\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"2\"\n          stroke-dasharray=\"5,5\"\n        />\n      </pattern>\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      font-family=\"sans-serif\"\n      font-size=\"16\"\n      fill=\"#94a3b8\"\n      text-anchor=\"middle\"\n    >\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n      <!-- Swimlane container -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        [attr.height]=\"263\"\n        fill=\"#ffffff\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane header -->\n      <rect\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"canvasWidth\"\n        height=\"40\"\n        fill=\"#f8fafc\"\n        stroke=\"#e2e8f0\"\n        stroke-width=\"1\"\n      ></rect>\n\n      <!-- Swimlane label -->\n      <text\n        x=\"20\"\n        y=\"25\"\n        font-family=\"sans-serif\"\n        font-size=\"14\"\n        fill=\"#333333\"\n        font-weight=\"bold\"\n      >\n        {{ swimlane.label }}\n      </text>\n\n      <!-- Edit button -->\n      <g\n        class=\"edit-swimlane-button\"\n        [attr.transform]=\"'translate(200, 20)'\"\n        (click)=\"\n          onEditSwimlane($event, swimlane, swimlane.order);\n          $event.stopPropagation()\n        \"\n      >\n        <rect\n          x=\"-5\"\n          y=\"-15\"\n          width=\"40\"\n          height=\"20\"\n          fill=\"#f3e8ff\"\n          rx=\"3\"\n          ry=\"3\"\n          stroke=\"#d8b4fe\"\n          stroke-width=\"1\"\n        ></rect>\n        <text\n          x=\"15\"\n          y=\"0\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#7e22ce\"\n          text-anchor=\"middle\"\n        >\n          Edit\n        </text>\n      </g>\n\n      <!-- Tag indicators -->\n      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n\n      <!-- Render nodes in this swimlane -->\n      @for (node of swimlane.nodes; track node.id) {\n      <g\n        [attr.transform]=\"'translate(' + node.x + ',' + (node.y + 40) + ')'\"\n        (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n        (mouseleave)=\"hideConnectionPoints(node.id)\"\n      >\n        <!-- Start node indicator (circle and arrow) for the first node -->\n        @if (node.isStartNode) {\n        <!-- Circle -->\n        <circle\n          cx=\"-30\"\n          cy=\"50\"\n          r=\"15\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></circle>\n        <!-- Form icon for start node -->\n        <svg:g\n          (click)=\"\n            toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n          \"\n          class=\"stage-icon\"\n          transform=\"translate(-45, 42)\"\n          style=\"cursor: pointer; pointer-events: all\"\n        >\n          <!-- Transparent rectangle to capture clicks -->\n          <svg:rect\n            x=\"-2\"\n            y=\"-2\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"transparent\"\n            style=\"cursor: pointer\"\n          />\n          <svg:path\n            d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n            [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n            transform=\"scale(0.7)\"\n          />\n        </svg:g>\n        <!-- Arrow from circle to node -->\n        <path\n          d=\"M -20 50 L 0 50\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n          marker-end=\"url(#arrowhead)\"\n        ></path>\n        }\n\n        <!-- Stage node -->\n        @if (node.type === 'stage') {\n        <!-- <rect\n          x=\"0\"\n          y=\"0\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></rect> -->\n        <svg:g\n          lib-stage-node\n          [node]=\"node\"\n          [isStartNode]=\"node.isStartNode\"\n          (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n        ></svg:g>\n        }\n\n        <!-- Decision node -->\n        @if (node.type === 'decision') {\n        <path\n          [attr.d]=\"\n            'M 0 ' +\n            node.height / 2 +\n            ' L ' +\n            node.width / 2 +\n            ' 0' +\n            ' L ' +\n            node.width +\n            ' ' +\n            node.height / 2 +\n            ' L ' +\n            node.width / 2 +\n            ' ' +\n            node.height +\n            ' Z'\n          \"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></path>\n        }\n\n        <!-- Form node -->\n        @if (node.type === 'form') {\n        <path\n          d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n          transform=\"scale(0.7)\"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n          transform=\"scale(0.7)\"\n          stroke=\"#D36CFF\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"middle\"\n          font-family=\"sans-serif\"\n          font-size=\"14\"\n          fill=\"#D36CFF\"\n        >\n          Form\n        </text>\n        }\n\n        <!-- Subflow node -->\n        @if (node.type === 'subflow') {\n        <path\n          [attr.d]=\"\n            'M 1 ' +\n            node.height / 4 +\n            ' L ' +\n            node.width / 2 +\n            ' 1 L ' +\n            (node.width - 1) +\n            ' ' +\n            node.height / 4 +\n            ' V ' +\n            (node.height * 3) / 4 +\n            ' L ' +\n            node.width / 2 +\n            ' ' +\n            (node.height - 1) +\n            ' L 1 ' +\n            (node.height * 3) / 4 +\n            ' Z'\n          \"\n          fill=\"none\"\n          stroke=\"#D36CFF\"\n          stroke-width=\"1\"\n        ></path>\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"middle\"\n          font-family=\"sans-serif\"\n          font-size=\"14\"\n          fill=\"#000000\"\n        >\n          {{ node.workflowData?.name || \"Subflow\" }}\n        </text>\n        }\n\n        <!-- Connection points for this node -->\n        @for (point of node.connectionPoints || []; track point.id) { @if\n        (isConnectionPointVisible(node.id)) {\n        <use\n          [attr.href]=\"'#connection-point-template'\"\n          [attr.x]=\"point.x\"\n          [attr.y]=\"point.y\"\n          [attr.id]=\"point.id\"\n          (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n        />\n        } }\n      </g>\n      <!-- A transparent hover area for improved hover detection -->\n      <rect\n        [attr.x]=\"node.x - 10\"\n        [attr.y]=\"node.y + 40 - 10\"\n        [attr.width]=\"node.width + 20\"\n        [attr.height]=\"node.height + 20\"\n        fill=\"transparent\"\n        (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n        (mouseout)=\"hideConnectionPoints(node.id)\"\n        style=\"pointer-events: none\"\n      />\n      }\n    </g>\n    } @for (connection of state.connections; track connection.id) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        fill=\"none\"\n        marker-end=\"url(#arrowhead)\"\n      ></path>\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path\n        [attr.d]=\"getConnectionPath()\"\n        stroke=\"#D36CFF\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"5,5\"\n        fill=\"none\"\n      ></path>\n    </g>\n    }\n  </svg>\n\n  <div\n    *ngIf=\"popupVisible\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"popupX\"\n    [style.top.px]=\"popupY\"\n  >\n    <verben-pop-Up\n      [dropdownOpen]=\"true\"\n      [customStyles]=\"{ 'z-index': '99' }\"\n      [enableMouseLeave]=\"false\"\n    >\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n        dropdown-content\n      >\n        <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n        <div class=\"flex flex-col gap-2\">\n          <ng-container *ngFor=\"let type of allowedNodeTypes\">\n            <button\n              class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\"\n            >\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button\n            class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showStartNodeFormPopup\"\n    [style.position]=\"'absolute'\"\n    [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n        <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n          Loading forms...\n        </div>\n        <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n          <div class=\"mb-2\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\"\n            >\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(form)\"\n            >\n              {{ form.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"startNodeFormsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div\n    *ngIf=\"showSubflowPopup\"\n    [style.position]=\"'fiabsolutexed'\"\n    [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\"\n  >\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div\n        class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n        dropdown-content\n        style=\"background-color: white; z-index: 1000\"\n      >\n        <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n        <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n          Loading workflows...\n        </div>\n        <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button\n              class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectSubflowWorkflow(workflow)\"\n            >\n              {{ workflow.Name }}\n            </button>\n          </div>\n          <div\n            *ngIf=\"workflowsList.length === 0\"\n            class=\"text-center py-2 text-gray-500\"\n          >\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}\n"] }]
-        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { selectedTool: [{
-                type: Input
-            }], clickedPosition: [{
-                type: Output
-            }], subflowSelected: [{
-                type: Output
-            }], showStageDialog: [{
-                type: Output
-            }], canvasRef: [{
-                type: ViewChild,
-                args: ['canvas', { static: true }]
-            }], onWindowMouseUp: [{
-                type: HostListener,
-                args: ['window:mouseup', ['$event']]
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class SwimlaneDialogComponent {
-    dataService;
-    visible = false;
-    swimlaneData = null;
-    closed = new EventEmitter();
-    created = new EventEmitter();
-    searchQuery = '';
-    workflowName = '';
-    // Track selected tags in a separate array
-    selectedTagNames = [];
-    // Sample tag data - you would likely load this from your service
-    // tags: Tag[] = Array.from({ length: 12 }, (_, i) => ({
-    //   Name: `Tags ${i + 1}`,
-    //   IsOptional: true,
-    // }));
-    tags = [];
-    constructor(dataService) {
-        this.dataService = dataService;
+    /**
+     * Check if a connection drag is in progress
+     */
+    isConnectionDragging() {
+        return !!this.draggingConnectionData.sourcePoint;
     }
-    ngOnInit() {
-        console.log('Swimlane dialog initialized with data:', this.swimlaneData);
-        // Reset form fields when dialog opens
-        this.selectedTagNames = [];
-        this.workflowName = '';
-        this.dataService.getTags().then((data) => {
-            this.tags = data.Result;
-            // If editing an existing swimlane, populate the form
-            if (this.swimlaneData) {
-                this.workflowName = this.swimlaneData.name;
-                // Set selected tags
-                this.selectedTagNames = this.swimlaneData.tags.map((tag) => tag.Name);
-            }
-            else {
-                this.workflowName = '';
-                this.selectedTagNames = [];
-            }
-        });
+    /**
+     * Get the current connection path data for rendering
+     */
+    getConnectionPathData() {
+        if (!this.draggingConnectionData.sourcePoint)
+            return null;
+        const { sourcePoint, sourceSwimlaneIndex, currentX, currentY } = this.draggingConnectionData;
+        const nodeInfo = this.nodeService.findNodeById(sourcePoint.nodeId);
+        if (!nodeInfo || sourceSwimlaneIndex === undefined)
+            return null;
+        const node = nodeInfo.node;
+        // Calculate start point in global coordinates
+        const startX = node.x + sourcePoint.x;
+        const startY = node.y + sourcePoint.y + (sourceSwimlaneIndex * 263 + 40); // Add swimlane offset
+        return {
+            startX,
+            startY,
+            endX: currentX ?? startX,
+            endY: currentY ?? startY,
+            sourceSwimlaneIndex,
+        };
     }
-    get allSelected() {
-        return (this.tags.length > 0 && this.selectedTagNames.length === this.tags.length);
+    /**
+     * Create a new connection between nodes
+     */
+    createConnection(targetNodeId, targetPointId, targetSwimlaneIndex) {
+        const { sourcePoint, sourceSwimlaneIndex } = this.draggingConnectionData;
+        if (!sourcePoint || sourceSwimlaneIndex === undefined) {
+            console.error('Missing source data for connection');
+            return null;
+        }
+        const connection = {
+            id: `conn-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+            sourceNodeId: sourcePoint.nodeId,
+            targetNodeId: targetNodeId,
+            sourcePointId: sourcePoint.id,
+            targetPointId: targetPointId,
+            sourceSwimlaneIndex: sourceSwimlaneIndex,
+            targetSwimlaneIndex: targetSwimlaneIndex,
+        };
+        // Add the connection to the state
+        this.state.connections.push(connection);
+        return connection;
     }
-    set allSelected(value) {
-        if (value) {
-            this.selectedTagNames = this.tags.map((tag) => tag.Name);
+    /**
+     * Get the path data for rendering a saved connection
+     */
+    getConnectionData(connection) {
+        const sourceNodeInfo = this.nodeService.findNodeById(connection.sourceNodeId);
+        const targetNodeInfo = this.nodeService.findNodeById(connection.targetNodeId);
+        if (!sourceNodeInfo || !targetNodeInfo) {
+            return null;
         }
-        else {
-            this.selectedTagNames = [];
+        const sourceNode = sourceNodeInfo.node;
+        const targetNode = targetNodeInfo.node;
+        // Find connection points
+        const sourcePoint = sourceNode.connectionPoints?.find((p) => p.id === connection.sourcePointId);
+        const targetPoint = targetNode.connectionPoints?.find((p) => p.id === connection.targetPointId);
+        if (!sourcePoint || !targetPoint) {
+            return null;
         }
+        // Calculate global coordinates
+        const startX = sourceNode.x + sourcePoint.x;
+        const startY = sourceNode.y +
+            sourcePoint.y +
+            (connection.sourceSwimlaneIndex * 263 + 40);
+        const endX = targetNode.x + targetPoint.x;
+        const endY = targetNode.y +
+            targetPoint.y +
+            (connection.targetSwimlaneIndex * 263 + 40);
+        return {
+            startX,
+            startY,
+            endX,
+            endY,
+            sourceSwimlaneIndex: connection.sourceSwimlaneIndex,
+            targetSwimlaneIndex: connection.targetSwimlaneIndex,
+        };
     }
-    get filteredTags() {
-        if (!this.searchQuery) {
-            return this.tags;
+    /**
+     * Calculate a path for orthogonal connection rendering
+     */
+    getOrthogonalPath(startX, startY, endX, endY, pointType) {
+        // Determine initial direction based on connection point type
+        let path = '';
+        // For side points (left/right), start with horizontal line
+        if (pointType === 'left' || pointType === 'right') {
+            // Calculate horizontal distance
+            const horizontalDist = endX - startX;
+            // If the end point is very close horizontally, use a simple 3-segment path
+            if (Math.abs(horizontalDist) < 30) {
+                const midY = (startY + endY) / 2;
+                path = `M ${startX} ${startY} H ${endX} V ${midY} V ${endY}`;
+            }
+            // Otherwise, create a path with horizontal segment first, then vertical, then horizontal
+            else {
+                path = `M ${startX} ${startY} H ${startX + horizontalDist / 2} V ${endY} H ${endX}`;
+            }
         }
-        return this.tags.filter((tag) => tag.Name.toLowerCase().includes(this.searchQuery.toLowerCase()));
+        // For top/bottom points, start with vertical line
+        else if (pointType === 'top' || pointType === 'bottom') {
+            // Calculate vertical distance
+            const verticalDist = endY - startY;
+            // If the end point is very close vertically, use a simple 3-segment path
+            if (Math.abs(verticalDist) < 30) {
+                const midX = (startX + endX) / 2;
+                path = `M ${startX} ${startY} V ${endY} H ${midX} H ${endX}`;
+            }
+            // Otherwise, create a path with vertical segment first, then horizontal, then vertical
+            else {
+                path = `M ${startX} ${startY} V ${startY + verticalDist / 2} H ${endX} V ${endY}`;
+            }
+        }
+        return path;
     }
-    isTagSelected(tagName) {
-        return this.selectedTagNames.includes(tagName);
+    /**
+     * Check if a connection is allowed between node types
+     */
+    canConnect(sourceNodeType, targetNodeType) {
+        return (this.connectionRules[sourceNodeType]?.includes(targetNodeType) || false);
     }
-    toggleTagSelection(tagName) {
-        const index = this.selectedTagNames.indexOf(tagName);
-        if (index > -1) {
-            this.selectedTagNames.splice(index, 1);
+    /**
+     * Get allowed node types for the current dragging connection
+     */
+    getAllowedTargetNodeTypes() {
+        if (!this.draggingConnectionData.sourcePoint) {
+            return [];
         }
-        else {
-            this.selectedTagNames.push(tagName);
+        const sourceNodeInfo = this.nodeService.findNodeById(this.draggingConnectionData.sourcePoint.nodeId);
+        if (!sourceNodeInfo) {
+            return [];
         }
+        const sourceNodeType = sourceNodeInfo.node.type;
+        return this.connectionRules[sourceNodeType] || [];
     }
-    onDialogClose(eventData) {
-        console.log('Dialog closed, received data:', eventData);
-        this.closed.emit();
+    /**
+     * Delete a connection by ID
+     */
+    deleteConnection(connectionId) {
+        const index = this.state.connections.findIndex((conn) => conn.id === connectionId);
+        if (index === -1)
+            return false;
+        this.state.connections.splice(index, 1);
+        return true;
     }
-    onDialogOpen(eventData) {
-        console.log('Dialog opened, received data:', eventData);
+    /**
+     * Delete all connections associated with a node
+     */
+    deleteConnectionsForNode(nodeId) {
+        this.state.connections = this.state.connections.filter((conn) => conn.sourceNodeId !== nodeId && conn.targetNodeId !== nodeId);
     }
-    applySelection() {
-        // Validate name
-        if (!this.workflowName || this.workflowName.trim() === '') {
-            console.error('Swimlane name cannot be empty');
-            return;
-        }
-        const selectedTags = this.tags.filter((tag) => this.selectedTagNames.includes(tag.Name));
-        console.log('Submitting swimlane data:', {
-            name: this.workflowName,
-            tags: selectedTags,
-        });
-        this.created.emit({
-            tags: selectedTags,
-            name: this.workflowName,
-        });
+    /**
+     * Get the current connection drag data
+     */
+    getConnectionDragData() {
+        return this.draggingConnectionData;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, deps: [{ token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: "visible", swimlaneData: "swimlaneData" }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center p-4 border-b border-gray-200\">\n    <button class=\"mr-4\" type=\"button\">\n      <span\n        class=\"block w-3 h-3 border-t-2 border-l-2 border-gray-700 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"flex-1\">\n      <h2 class=\"text-base font-medium m-0\">Name</h2>\n      <span class=\"text-xs text-gray-500\">{{ tags.length }} tags</span>\n    </div>\n    <span class=\"text-blue-600 font-medium cursor-pointer\">Create</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <div class=\"mb-4 space-y-4\">\n      <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"text\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"divide-y divide-gray-100\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium\"\n      (click)=\"applySelection()\"\n    >\n      Apply\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-swimlane-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center p-4 border-b border-gray-200\">\n    <button class=\"mr-4\" type=\"button\">\n      <span\n        class=\"block w-3 h-3 border-t-2 border-l-2 border-gray-700 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"flex-1\">\n      <h2 class=\"text-base font-medium m-0\">Name</h2>\n      <span class=\"text-xs text-gray-500\">{{ tags.length }} tags</span>\n    </div>\n    <span class=\"text-blue-600 font-medium cursor-pointer\">Create</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <div class=\"mb-4 space-y-4\">\n      <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"text\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-full bg-gray-50 border border-gray-200\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"divide-y divide-gray-100\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-end p-4 border-t border-gray-200\">\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-blue-600 text-white rounded text-sm font-medium\"\n      (click)=\"applySelection()\"\n    >\n      Apply\n    </button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: WorkflowDataService }], propDecorators: { visible: [{
-                type: Input
-            }], swimlaneData: [{
-                type: Input
-            }], closed: [{
-                type: Output
-            }], created: [{
-                type: Output
-            }] } });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService, deps: [{ token: WorkflowDesignerState }, { token: NodeManagementService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService, providedIn: 'root' });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService$1, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: NodeManagementService }] });
 
-class WorkflowDesignerComponent {
+class TransformerService {
     state;
-    dataService;
-    canvasRef;
-    workflowCode = null;
-    // Currently selected tool
-    selectedTool = null;
-    showSwimlaneDialog = false;
-    // New properties for stage dialog
-    showStageDialog = false;
-    pendingStagePosition = null;
-    pendingStageData = {};
-    editingSwimlaneIndex = null;
-    isCreatingStageFromConnection = false;
-    pendingConnectionSourcePoint = null;
-    pendingConnectionSourceSwimlaneIndex = null;
-    isLoading = false;
-    isSaving = false;
-    constructor(state, dataService) {
+    swimlaneService;
+    nodeService;
+    connectionService;
+    // Map to track loaded objects
+    loadedObjectIds = {}; // Format: { id: code }
+    constructor(state, swimlaneService, nodeService, connectionService) {
         this.state = state;
-        this.dataService = dataService;
-    }
-    ngOnInit() {
-        // Load workflow data if code is provided
-        if (this.workflowCode) {
-            this.loadWorkflow(this.workflowCode);
-        }
+        this.swimlaneService = swimlaneService;
+        this.nodeService = nodeService;
+        this.connectionService = connectionService;
     }
-    saveWorkflow() {
-        if (this.isSaving)
-            return;
-        this.isSaving = true;
-        // Transform the UI model to the API model
-        const workflowModel = this.state.transformToWorkflowModel();
-        // Save to the backend
-        this.dataService
-            .saveWorkflows([workflowModel])
-            .then((response) => {
-            console.log('Workflow saved successfully:', response);
-            // If the API returns an updated workflow, we might want to reload it
-            if (response?.Result?.Code) {
-                this.workflowCode = response.Result.Code;
-            }
-            this.isSaving = false;
-        })
-            .catch((error) => {
-            console.error('Error saving workflow:', error);
-            this.isSaving = false;
-            // Handle error - show a notification, etc.
+    /**
+     * Transform the UI model to a Workflow API model
+     */
+    transformToWorkflowModel() {
+        // Create base workflow object
+        const workflow = {
+            // BaseModel properties
+            Id: this.wasLoadedFromApi(this.state.workflowId || '')
+                ? this.state.workflowId || ''
+                : '',
+            Code: this.getCodeForObject(this.state.workflowId || ''),
+            TenantId: '',
+            id: this.wasLoadedFromApi(this.state.workflowId || '')
+                ? this.state.workflowId || ''
+                : '',
+            ServiceName: '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: this.wasLoadedFromApi(this.state.workflowId || '')
+                ? ObjectState.Changed
+                : ObjectState.New,
+            // Workflow specific properties
+            Name: 'New Workflow', // Default name
+            Description: '', // Default description
+            StageEntryRule: '',
+            Form: this.state.workflowFormId || undefined,
+            AssignmentType: TaskAssignmentType.AutoRoute,
+            Operation: '',
+            Status: Status.Active,
+            Actions: [],
+            Lanes: [],
+            Stages: [],
+        };
+        // Transform swimlanes to SwimLane[]
+        workflow.Lanes = this.state.swimlanes.map((swimlane, index) => {
+            const laneId = `lane-${index}`;
+            return {
+                // BaseModel properties
+                Id: '',
+                Code: '',
+                TenantId: '',
+                id: laneId,
+                ServiceName: '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: ObjectState.New,
+                // SwimLane specific properties
+                Workflow: workflow.Id,
+                Tags: swimlane.tags || [],
+                Position: swimlane.order,
+                Coordinates: { X: 0, Y: swimlane.order * 263 },
+                Size: { Width: 3000, Height: 263 },
+            };
         });
-    }
-    loadWorkflow(code) {
-        this.isLoading = true;
-        this.dataService
-            .getWorkflowWithParam(code)
-            .then((response) => {
-            if (response && response.Result) {
-                this.parseWorkflowData(response.Result);
+        // Transform nodes to WorkflowStage[]
+        const stages = [];
+        this.state.swimlanes.forEach((swimlane, swimlaneIndex) => {
+            swimlane.nodes?.forEach((node) => {
+                if (node.type === 'stage') {
+                    // Create a stage from the node
+                    const stage = {
+                        // BaseModel properties
+                        Id: node.id,
+                        Code: this.getCodeForObject(node.id),
+                        TenantId: '',
+                        id: node.id,
+                        ServiceName: '',
+                        CreatedAt: new Date(),
+                        UpdatedAt: new Date(),
+                        DataState: this.wasLoadedFromApi(node.id)
+                            ? ObjectState.Changed
+                            : ObjectState.New,
+                        // WorkflowStage specific properties
+                        Workflow: workflow.Id,
+                        Name: node.stageData?.Name || 'Unnamed Stage',
+                        Description: node.stageData?.Description || '',
+                        Duration: node.stageData?.Duration || 0,
+                        PassOnRule: node.stageData?.PassOnRule || '',
+                        ActorRule: node.stageData?.ActorRule || StageActorRule.None,
+                        MinNoOfActor: node.stageData?.MinNoOfActor || 0,
+                        IsParallel: node.stageData?.IsParallel || false,
+                        IsEntryPoint: node.isStartNode,
+                        IsExitPoint: false, // Will be updated below
+                        Tags: node.stageData?.Tags || [],
+                        Form: node.stageData?.formId ? node.stageData.formId : '',
+                        AllowMultiSubProcess: false,
+                        AssignmentType: TaskAssignmentType.AutoRoute,
+                        SubWorkFlow: '',
+                        SwimLane: workflow.Lanes[swimlaneIndex].Id,
+                        Coordinates: { X: node.x, Y: node.y },
+                        IsSubProcess: false,
+                        Key: node.stageData?.Key || undefined,
+                    };
+                    stages.push(stage);
+                }
+            });
+        });
+        // Determine which stages are exit points (no outgoing connections)
+        stages.forEach((stage) => {
+            const hasOutgoingConnections = this.state.connections.some((conn) => conn.sourceNodeId === stage.Id);
+            if (!hasOutgoingConnections) {
+                stage.IsExitPoint = true;
             }
-            this.isLoading = false;
-        })
-            .catch((error) => {
-            console.error('Error loading workflow:', error);
-            this.isLoading = false;
         });
+        // Transform connections to WorkflowAction[]
+        workflow.Actions = this.state.connections.map((conn) => {
+            const sourceNode = this.nodeService.findNodeById(conn.sourceNodeId)?.node;
+            const targetNode = this.nodeService.findNodeById(conn.targetNodeId)?.node;
+            return {
+                // BaseModel properties
+                Id: conn.id,
+                Code: this.getCodeForObject(conn.id),
+                TenantId: '',
+                id: conn.id,
+                ServiceName: '',
+                CreatedAt: new Date(),
+                UpdatedAt: new Date(),
+                DataState: this.wasLoadedFromApi(conn.id)
+                    ? ObjectState.Changed
+                    : ObjectState.New,
+                // WorkflowAction specific properties
+                Workflow: workflow.Id,
+                Name: `Action from ${sourceNode?.stageData?.Name || 'Unknown'} to ${targetNode?.stageData?.Name || 'Unknown'}`,
+                FromStage: conn.sourceNodeId,
+                ToStage: conn.targetNodeId,
+                IsParallel: sourceNode?.stageData?.hasParallel || false,
+                PassOnRule: '', // Optional property
+            };
+        });
+        workflow.Stages = stages;
+        return workflow;
     }
-    // Method to parse workflow data from API and populate the designer
+    /**
+     * Parse API workflow model and convert to UI model
+     */
     parseWorkflowData(workflow) {
         // Clear existing state
         this.state.swimlanes = [];
@@ -4296,21 +6006,27 @@ class WorkflowDesignerComponent {
         if (workflow.Form) {
             this.state.setWorkflowForm(workflow.Form, workflow.FormName || 'Workflow Form');
         }
+        // Store the workflow ID
+        this.state.setWorkflowId(workflow.Id);
+        // Register the workflow itself
+        this.registerLoadedObject(workflow.Id, workflow.Code);
         // Process swimlanes first
         if (workflow.Lanes && workflow.Lanes.length) {
             workflow.Lanes.sort((a, b) => a.Position - b.Position).forEach((lane) => {
-                this.state.addSwimlane(lane.Name || `Lane ${lane.Position}`, lane.Tags || []);
+                this.swimlaneService.addSwimlane(lane.Name || `Lane ${lane.Position}`, lane.Tags || []);
+                // Register loaded lane
+                this.registerLoadedObject(lane.Id, lane.Code);
             });
         }
         // Process stages
         if (workflow.Stages && workflow.Stages.length) {
             workflow.Stages.forEach((stage) => {
                 // Find swimlane index
-                const swimlaneIndex = this.findSwimlaneIndexByLaneId(stage.SwimLane);
+                const swimlaneIndex = this.swimlaneService.findSwimlaneIndexByLaneId(stage.SwimLane);
                 if (swimlaneIndex !== -1) {
                     const x = stage.Coordinates?.X || 100;
                     const y = stage.Coordinates?.Y || 50;
-                    this.state.addNode(swimlaneIndex, 'stage', x, y, {
+                    this.nodeService.addNode(swimlaneIndex, 'stage', x, y, {
                         Name: stage.Name,
                         Description: stage.Description,
                         Duration: stage.Duration,
@@ -4323,6 +6039,8 @@ class WorkflowDesignerComponent {
                         IsExitPoint: stage.IsExitPoint,
                         Id: stage.Id,
                     });
+                    // Register loaded stage
+                    this.registerLoadedObject(stage.Id, stage.Code);
                 }
             });
         }
@@ -4330,8 +6048,8 @@ class WorkflowDesignerComponent {
         if (workflow.Actions && workflow.Actions.length) {
             workflow.Actions.forEach((action) => {
                 // Find source and target nodes
-                const sourceNodeInfo = this.state.findNodeById(action.FromStage);
-                const targetNodeInfo = this.state.findNodeById(action.ToStage);
+                const sourceNodeInfo = this.nodeService.findNodeById(action.FromStage);
+                const targetNodeInfo = this.nodeService.findNodeById(action.ToStage);
                 if (sourceNodeInfo && targetNodeInfo) {
                     // Find suitable connection points
                     const sourcePoint = sourceNodeInfo.node.connectionPoints?.[0];
@@ -4347,195 +6065,99 @@ class WorkflowDesignerComponent {
                             targetSwimlaneIndex: targetNodeInfo.swimlaneIndex,
                         };
                         this.state.connections.push(connection);
+                        // Register loaded action
+                        this.registerLoadedObject(action.Id, action.Code);
                     }
                 }
             });
         }
     }
-    // Helper method to find swimlane index by Lane ID
-    findSwimlaneIndexByLaneId(laneId) {
-        // In a real implementation, you would maintain a mapping between API lane IDs and UI swimlane indices
-        // For now we'll just return the index based on position
-        const parts = laneId.split('-');
-        if (parts.length > 1) {
-            const index = parseInt(parts[1]);
-            if (!isNaN(index) && index < this.state.swimlanes.length) {
-                return index;
-            }
-        }
-        return -1;
+    /**
+     * Register a loaded object from the API
+     */
+    registerLoadedObject(id, code) {
+        this.loadedObjectIds[id] = code;
     }
-    // Handle tool selection from toolbar
-    onToolSelected(tool) {
-        // Toggle selection if the same tool is clicked again
-        this.selectedTool = this.selectedTool === tool ? null : tool;
-        console.log('Selected tool:', this.selectedTool);
+    /**
+     * Check if an object was loaded from API
+     */
+    wasLoadedFromApi(id) {
+        return id in this.loadedObjectIds;
     }
-    openSwimlaneDialog() {
-        this.showSwimlaneDialog = true;
+    /**
+     * Get the code for a loaded object
+     */
+    getCodeForObject(id) {
+        return this.loadedObjectIds[id] || '';
     }
-    onShowStageDialog(event) {
-        console.log('Received showStageDialog event:', event);
-        this.pendingStagePosition = event.position;
-        this.showStageDialog = true;
-        // If this is from a connection creation, store that info
-        this.isCreatingStageFromConnection = event.isFromConnection;
-        // Store the source point data before it gets lost
-        if (event.isFromConnection &&
-            this.state.draggingConnectionData.sourcePoint) {
-            this.pendingConnectionSourcePoint =
-                this.state.draggingConnectionData.sourcePoint;
-            this.pendingConnectionSourceSwimlaneIndex =
-                this.state.draggingConnectionData.sourceSwimlaneIndex ?? null;
-            console.log('Stored source point for connection:', this.pendingConnectionSourcePoint);
-        }
-        console.log('Stage dialog state:', {
-            pendingPosition: this.pendingStagePosition,
-            isVisible: this.showStageDialog,
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, deps: [{ token: WorkflowDesignerState }, { token: SwimlaneService }, { token: NodeManagementService }, { token: ConnectionService$1 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: SwimlaneService }, { type: NodeManagementService }, { type: ConnectionService$1 }] });
+
+class DecisionPopupComponent {
+    state;
+    visible = false;
+    decisionNodeId = '';
+    popupX = 0;
+    popupY = 0;
+    closed = new EventEmitter();
+    showDuration = true;
+    constructor(state) {
+        this.state = state;
     }
-    handleCanvasPositionClick(event) {
-        console.log(event);
-        // Check if this is an edit swimlane event
-        if (event.x === -1 &&
-            event.y >= 0 &&
-            event.y < this.state.swimlanes.length) {
-            console.log('Editing swimlane', event.y);
-            this.editingSwimlaneIndex = event.y;
-            this.openSwimlaneDialog();
-            return;
-        }
-        // Normal canvas click handling
-        const swimlaneIndex = Math.floor(event.y / 263);
-        switch (this.selectedTool) {
-            case 'swimlane':
-                console.log('Opening swimlane dialog for new swimlane');
-                this.editingSwimlaneIndex = null; // Set to null to indicate creating a new swimlane
-                this.openSwimlaneDialog();
-                break;
-            case 'stage':
-                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
-                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
-                    // Store position for later node creation
-                    this.pendingStagePosition = {
-                        swimlaneIndex,
-                        x: event.x,
-                        y: event.y,
-                    };
-                    // Show stage properties dialog
-                    this.showStageDialog = true;
-                }
-                break;
-            case 'decision':
-            case 'form':
-                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
-                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
-                    const node = this.state.addNode(swimlaneIndex, this.selectedTool, event.x, event.y);
-                    if (node) {
-                        // Reset the selected tool after placing a node
-                        this.selectedTool = null;
-                    }
-                }
-                break;
-            case 'subflow':
-                if (swimlaneIndex >= 0 && swimlaneIndex < this.state.swimlanes.length) {
-                    console.log(`Adding ${this.selectedTool} to swimlane ${swimlaneIndex}`);
-                    // Show subflow workflow selection popup
-                    this.canvasRef.showSubflowSelectionPopup(event.x, event.y, swimlaneIndex);
-                }
-                break;
-            default:
-                break;
-        }
+    getConnectionConditions() {
+        if (!this.decisionNodeId)
+            return [];
+        // Get all connections from this decision node
+        return this.state.connections
+            .filter((conn) => conn.sourceNodeId === this.decisionNodeId)
+            .map((conn) => ({
+            connectionId: conn.id,
+            sourceNodeId: conn.sourceNodeId,
+            targetNodeId: conn.targetNodeId,
+            condition: conn.condition || 'order.amount > 500,000', // Default or actual condition
+        }));
     }
-    onSwimlaneDialogFilled(event) {
-        console.log('Swimlane dialog filled:', event, 'Editing index:', this.editingSwimlaneIndex);
-        // Validate that name is not empty
-        if (!event.name || event.name.trim() === '') {
-            console.error('Swimlane name cannot be empty');
-            return;
-        }
-        if (this.editingSwimlaneIndex !== null) {
-            // Update existing swimlane
-            console.log('Updating existing swimlane at index:', this.editingSwimlaneIndex);
-            this.state.updateSwimlane(this.editingSwimlaneIndex, event.name, event.tags);
-        }
-        else {
-            // Create new swimlane
-            console.log('Creating new swimlane');
-            this.state.addSwimlane(event.name, event.tags);
+    getTargetNodeName(nodeId) {
+        const nodeInfo = this.state.findNodeById(nodeId);
+        if (nodeInfo && nodeInfo.node) {
+            return nodeInfo.node.stageData?.Name || 'Stage';
         }
-        this.showSwimlaneDialog = false;
-        this.editingSwimlaneIndex = null;
+        return 'Unknown Stage';
     }
-    onStageDialogSaved(stageData) {
-        if (this.pendingStagePosition) {
-            // Create the stage node
-            const node = this.state.addNode(this.pendingStagePosition.swimlaneIndex, 'stage', this.pendingStagePosition.x, this.pendingStagePosition.y, stageData);
-            console.log('Source point on dialog save:', this.state.draggingConnectionData.sourcePoint);
-            console.log('Is creating from connection:', this.isCreatingStageFromConnection);
-            if (node) {
-                // If this was created from a connection, create the connection
-                if (this.isCreatingStageFromConnection &&
-                    this.pendingConnectionSourcePoint) {
-                    console.log('Using stored source point:', this.pendingConnectionSourcePoint);
-                    // Find a suitable connection point on the new node
-                    if (node.connectionPoints && node.connectionPoints.length > 0) {
-                        const sourcePoint = this.pendingConnectionSourcePoint;
-                        // Find opposing type connection point
-                        const opposingType = {
-                            right: 'left',
-                            left: 'right',
-                            top: 'bottom',
-                            bottom: 'top',
-                        }[sourcePoint.type];
-                        const targetPoint = node.connectionPoints.find((p) => p.type === opposingType);
-                        if (targetPoint) {
-                            // Create the connection using our stored source data
-                            const connection = {
-                                id: `conn-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
-                                sourceNodeId: sourcePoint.nodeId,
-                                targetNodeId: node.id,
-                                sourcePointId: sourcePoint.id,
-                                targetPointId: targetPoint.id,
-                                sourceSwimlaneIndex: this.pendingConnectionSourceSwimlaneIndex,
-                                targetSwimlaneIndex: this.pendingStagePosition.swimlaneIndex,
-                            };
-                            // Add connection to the state
-                            this.state.connections.push(connection);
-                            console.log('Created connection:', connection);
-                        }
-                    }
-                    // End the connection drag
-                    // this.state.endConnectionDrag();
-                }
-                // Reset the selected tool after placing a node
-                this.selectedTool = null;
-            }
-            // Clear pending data
-            this.pendingStagePosition = null;
-            this.isCreatingStageFromConnection = false;
-            this.pendingConnectionSourcePoint = null;
-            this.pendingConnectionSourceSwimlaneIndex = null;
+    getDuration() {
+        // Get duration from the decision node or default to 120 days
+        const nodeInfo = this.state.findNodeById(this.decisionNodeId);
+        if (nodeInfo && nodeInfo.node && nodeInfo.node.stageData) {
+            return nodeInfo.node.stageData.Duration || 120;
         }
-        console.log('Connections after adding new one:', this.state.connections);
-        this.showStageDialog = false;
+        return 120;
     }
-    onSubflowSelected() {
-        // Reset the selected tool after placing a subflow node
-        this.selectedTool = null;
+    onClose() {
+        this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WorkflowDesignerComponent, selector: "lib-workflow-designer", inputs: { workflowCode: "workflowCode" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvasRef"], descendants: true }], ngImport: i0, template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>Workflow Designer</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar\n    [selectedTool]=\"selectedTool\"\n    (toolSelected)=\"onToolSelected($event)\"\n  >\n  </lib-designer-toolbar>\n\n  <!-- Show loading indicator if needed -->\n  <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n    <div class=\"loading-spinner\"></div>\n    <div class=\"loading-text\">Loading workflow...</div>\n  </div>\n\n  <!-- Canvas Component -->\n  <lib-designer-canvas\n    [selectedTool]=\"selectedTool\"\n    (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\"\n    (showStageDialog)=\"onShowStageDialog($event)\"\n    #canvasRef\n  >\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog\n    [visible]=\"showSwimlaneDialog\"\n    [swimlaneData]=\"\n      editingSwimlaneIndex !== null\n        ? {\n            name: state.swimlanes[editingSwimlaneIndex].label,\n            tags: state.swimlanes[editingSwimlaneIndex].tags\n          }\n        : null\n    \"\n    (created)=\"onSwimlaneDialogFilled($event)\"\n    (closed)=\"showSwimlaneDialog = false\"\n  ></lib-swimlane-dialog>\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialog\"\n    [stageData]=\"pendingStageData\"\n    (closed)=\"showStageDialog = false\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:#f8fafc}.workflow-header{padding:1rem;background-color:#fff;border-bottom:1px solid #e2e8f0}.workflow-header h1{font-size:1.25rem;font-weight:600;color:#334155;margin:0}.loading-overlay{position:absolute;inset:0;background-color:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #d8b4fe;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;font-size:1rem;color:#7e22ce}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: ["selectedTool", "isSaving"], outputs: ["toolSelected", "saveWorkflow"] }, { kind: "component", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: ["selectedTool"], outputs: ["clickedPosition", "subflowSelected", "showStageDialog"] }, { kind: "component", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: ["visible", "swimlaneData"], outputs: ["closed", "created"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecisionPopupComponent, selector: "lib-decision-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-workflow-designer', template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>Workflow Designer</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar\n    [selectedTool]=\"selectedTool\"\n    (toolSelected)=\"onToolSelected($event)\"\n  >\n  </lib-designer-toolbar>\n\n  <!-- Show loading indicator if needed -->\n  <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n    <div class=\"loading-spinner\"></div>\n    <div class=\"loading-text\">Loading workflow...</div>\n  </div>\n\n  <!-- Canvas Component -->\n  <lib-designer-canvas\n    [selectedTool]=\"selectedTool\"\n    (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\"\n    (showStageDialog)=\"onShowStageDialog($event)\"\n    #canvasRef\n  >\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog\n    [visible]=\"showSwimlaneDialog\"\n    [swimlaneData]=\"\n      editingSwimlaneIndex !== null\n        ? {\n            name: state.swimlanes[editingSwimlaneIndex].label,\n            tags: state.swimlanes[editingSwimlaneIndex].tags\n          }\n        : null\n    \"\n    (created)=\"onSwimlaneDialogFilled($event)\"\n    (closed)=\"showSwimlaneDialog = false\"\n  ></lib-swimlane-dialog>\n\n  <lib-stage-dialog\n    [visible]=\"showStageDialog\"\n    [stageData]=\"pendingStageData\"\n    (closed)=\"showStageDialog = false\"\n    (saved)=\"onStageDialogSaved($event)\"\n  ></lib-stage-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:#f8fafc}.workflow-header{padding:1rem;background-color:#fff;border-bottom:1px solid #e2e8f0}.workflow-header h1{font-size:1.25rem;font-weight:600;color:#334155;margin:0}.loading-overlay{position:absolute;inset:0;background-color:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #d8b4fe;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;font-size:1rem;color:#7e22ce}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { canvasRef: [{
-                type: ViewChild,
-                args: ['canvasRef']
-            }], workflowCode: [{
+            args: [{ selector: 'lib-decision-popup', template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"] }]
+        }], ctorParameters: () => [{ type: WorkflowDesignerState }], propDecorators: { visible: [{
+                type: Input
+            }], decisionNodeId: [{
+                type: Input
+            }], popupX: [{
                 type: Input
+            }], popupY: [{
+                type: Input
+            }], closed: [{
+                type: Output
             }] } });
 
 class WorkflowDesignerModule {
@@ -4545,12 +6167,20 @@ class WorkflowDesignerModule {
             DesignerCanvasComponent,
             SwimlaneDialogComponent,
             StageNodeComponent,
-            StageDialogComponent], imports: [CommonModule,
+            StageDialogComponent,
+            ConditionsPopupComponent,
+            DecisionPopupComponent], imports: [CommonModule,
             VerbenDialogueModule,
             FormsModule$1,
             ReactiveFormsModule,
             VerbenPopUpModule], exports: [WorkflowDesignerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, providers: [
+            NodeManagementService,
+            ConnectionService$1,
+            SwimlaneService,
+            TransformerService,
+            PopupService,
+        ], imports: [CommonModule,
             VerbenDialogueModule,
             FormsModule$1,
             ReactiveFormsModule,
@@ -4566,6 +6196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SwimlaneDialogComponent,
                         StageNodeComponent,
                         StageDialogComponent,
+                        ConditionsPopupComponent,
+                        DecisionPopupComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -4574,6 +6206,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ReactiveFormsModule,
                         VerbenPopUpModule,
                     ],
+                    providers: [
+                        NodeManagementService,
+                        ConnectionService$1,
+                        SwimlaneService,
+                        TransformerService,
+                        PopupService,
+                    ],
                     exports: [WorkflowDesignerComponent],
                 }]
         }] });
@@ -6289,7 +7928,7 @@ class WorkflowMapperService {
             IsEntryPoint: isEntryPoint,
             IsExitPoint: isExitPoint,
             Tags: stage.tags || [], // Now correctly maps Tag[] to Tag[]
-            Forms: stage.forms || [],
+            Form: stage.form || '',
             AllowMultiSubProcess: stage.allowMultiSubProcess || false,
             AssignmentType: stage.assignmentType ||
                 TaskAssignmentType.Queue,
@@ -6418,7 +8057,7 @@ class WorkflowMapperService {
             isEntryPoint: backendStage.IsEntryPoint,
             isExitPoint: backendStage.IsExitPoint,
             tags: backendStage.Tags,
-            forms: backendStage.Forms,
+            forms: backendStage.Form,
             allowMultiSubProcess: backendStage.AllowMultiSubProcess,
             assignmentType: backendStage.AssignmentType,
             subWorkflow: backendStage.SubWorkFlow,