verben-workflow-ui 0.2.2 → 0.2.3

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.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZUlEIjoiUk9MLVpYQVhYVCIsIlRlbmFudElkIjoiUERMVEM2IiwiU2VydmljZU5hbWUiOiJXaGl0ZTM2MCIsIkNvbXBhbnkiOiIiLCJuYmYiOjE3NDEwODE0NDcsImV4cCI6MTc0MTI5NzQ0NywiaWF0IjoxNzQxMDgxNDQ3fQ.u0ZkTg7mSHnPGjAIRwJxN1i1vjaRf1_F8mih9fbgQm0',
         };
     }
     buildUrl(url, baseUrl) {
@@ -2585,6 +2585,10 @@ class WorkflowDesignerState {
     draggingConnectionData = {};
     workflowFormId = null;
     workflowFormName = null;
+    workflowId = null;
+    setWorkflowId(id) {
+        this.workflowId = id;
+    }
     connectionRules = {
         stage: ['stage', 'decision', 'subflow', 'form'],
         decision: ['stage'], // Decisions can only connect to Stages
@@ -2763,7 +2767,7 @@ class WorkflowDesignerState {
             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 +2913,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) {
@@ -3039,40 +2930,54 @@ class WorkflowDesignerState {
     transformToWorkflowModel() {
         // Create base workflow object
         const workflow = {
-            Id: '', // Will be assigned by backend on first save
-            Code: '',
+            // BaseModel properties
+            Id: this.wasLoadedFromApi(this.workflowId || '')
+                ? this.workflowId || ''
+                : '',
+            Code: this.getCodeForObject(this.workflowId || ''),
             TenantId: '',
-            id: '',
+            id: this.wasLoadedFromApi(this.workflowId || '')
+                ? this.workflowId || ''
+                : '',
             ServiceName: '',
             CreatedAt: new Date(),
             UpdatedAt: new Date(),
-            DataState: ObjectState.New,
-            Name: 'New Workflow', // Default name or get it from somewhere
+            DataState: this.wasLoadedFromApi(this.workflowId || '')
+                ? ObjectState.Changed
+                : ObjectState.New,
+            // Workflow specific properties
+            Name: 'New Workflow', // Default name
             Description: '', // Default description
             StageEntryRule: '',
             Form: this.workflowFormId || undefined,
-            AssignmentType: TaskAssignmentType.AutoRoute, // Default assignment type
-            Status: Status.Active, // Default status
+            AssignmentType: TaskAssignmentType.AutoRoute,
+            Operation: '',
+            Status: Status.Active,
             Actions: [],
             Lanes: [],
             Stages: [],
         };
         // Transform swimlanes to SwimLane[]
         workflow.Lanes = this.swimlanes.map((swimlane, index) => {
+            const laneId = `lane-${index}`;
             return {
-                Id: `lane-${index}`,
-                Code: '',
+                // BaseModel properties
+                Id: laneId,
+                Code: this.getCodeForObject(laneId),
                 TenantId: '',
-                id: `lane-${index}`,
+                id: laneId,
                 ServiceName: '',
                 CreatedAt: new Date(),
                 UpdatedAt: new Date(),
-                DataState: ObjectState.New,
+                DataState: this.wasLoadedFromApi(laneId)
+                    ? ObjectState.Changed
+                    : ObjectState.New,
+                // SwimLane specific properties
                 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
+                Coordinates: { X: 0, Y: swimlane.order * 263 },
+                Size: { Width: 3000, Height: 263 },
             };
         });
         // Transform nodes to WorkflowStage[]
@@ -3082,14 +2987,18 @@ class WorkflowDesignerState {
                 if (node.type === 'stage') {
                     // Create a stage from the node
                     const stage = {
+                        // BaseModel properties
                         Id: node.id,
-                        Code: '',
+                        Code: this.getCodeForObject(node.id),
                         TenantId: '',
                         id: node.id,
                         ServiceName: '',
                         CreatedAt: new Date(),
                         UpdatedAt: new Date(),
-                        DataState: ObjectState.New,
+                        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 || '',
@@ -3099,7 +3008,7 @@ class WorkflowDesignerState {
                         MinNoOfActor: node.stageData?.MinNoOfActor || 0,
                         IsParallel: node.stageData?.IsParallel || false,
                         IsEntryPoint: node.isStartNode,
-                        IsExitPoint: false, // Determine based on outgoing connections
+                        IsExitPoint: false, // Will be updated below
                         Tags: node.stageData?.Tags || [],
                         Forms: node.stageData?.formId ? [node.stageData.formId] : [],
                         AllowMultiSubProcess: false,
@@ -3108,20 +3017,17 @@ class WorkflowDesignerState {
                         SwimLane: workflow.Lanes[swimlaneIndex].Id,
                         Coordinates: { X: node.x, Y: node.y },
                         IsSubProcess: false,
+                        Key: node.stageData?.Key || undefined,
                     };
                     stages.push(stage);
                 }
             });
         });
-        // 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);
+            if (!hasOutgoingConnections) {
+                stage.IsExitPoint = true;
             }
         });
         // Transform connections to WorkflowAction[]
@@ -3129,24 +3035,43 @@ class WorkflowDesignerState {
             const sourceNode = this.findNodeById(conn.sourceNodeId)?.node;
             const targetNode = this.findNodeById(conn.targetNodeId)?.node;
             return {
+                // BaseModel properties
                 Id: conn.id,
-                Code: '',
+                Code: this.getCodeForObject(conn.id),
                 TenantId: '',
                 id: conn.id,
                 ServiceName: '',
                 CreatedAt: new Date(),
                 UpdatedAt: new Date(),
-                DataState: ObjectState.New,
+                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;
     }
+    // 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' });
 }
@@ -3425,7 +3350,7 @@ class StageNodeComponent {
     parallelExecutionToggled = new EventEmitter();
     // Properties for icon click events
     showFormPopup = false;
-    showShieldPopup = false;
+    showShieldPopup = signal(false);
     showTimerPopup = false;
     showActionPopupLeft = false;
     showActionPopupRight = false;
@@ -3512,11 +3437,11 @@ class StageNodeComponent {
             event.stopPropagation();
         }
         // Toggle the shield popup
-        this.showShieldPopup = !this.showShieldPopup;
-        console.log('Shield popup toggled:', this.showShieldPopup, 'with data:', this.node.stageData);
+        this.showShieldPopup.update((show) => !show);
+        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) {
+            if (this.showShieldPopup()) {
                 console.log('Shield popup should be visible now');
             }
         }, 0);
@@ -3560,7 +3485,7 @@ class StageNodeComponent {
     }
     onStagePropertiesSaved(stageData) {
         // Close the dialog
-        this.showShieldPopup = false;
+        this.showShieldPopup.set(false);
         // Emit the event to the parent component with the node id and updated data
         this.stagePropertiesUpdated.emit({
             nodeId: this.node.id,
@@ -3569,11 +3494,11 @@ class StageNodeComponent {
         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"] }] });
+    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    <!-- 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"] }, { 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: 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    <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"] }]
+            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: [{
@@ -4091,11 +4016,11 @@ class DesignerCanvasComponent {
         this.pendingConnectionSourceSwimlaneIndex = null;
     }
     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" }] });
+    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(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\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          [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    </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]=\"'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</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"] }]
+            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(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\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          [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    </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]=\"'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</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: [{
@@ -4139,6 +4064,7 @@ class SwimlaneDialogComponent {
         // Reset form fields when dialog opens
         this.selectedTagNames = [];
         this.workflowName = '';
+        this.searchQuery = '';
         this.dataService.getTags().then((data) => {
             this.tags = data.Result;
             // If editing an existing swimlane, populate the form
@@ -4184,6 +4110,9 @@ class SwimlaneDialogComponent {
     }
     onDialogClose(eventData) {
         console.log('Dialog closed, received data:', eventData);
+        this.searchQuery = '';
+        this.workflowName = '';
+        this.selectedTagNames = [];
         this.closed.emit();
     }
     onDialogOpen(eventData) {
@@ -4278,7 +4207,10 @@ class WorkflowDesignerComponent {
             .getWorkflowWithParam(code)
             .then((response) => {
             if (response && response.Result) {
-                this.parseWorkflowData(response.Result);
+                // Store the workflow ID
+                const wf = response.Result[0];
+                this.state.setWorkflowId(wf.Id);
+                this.parseWorkflowData(wf);
             }
             this.isLoading = false;
         })
@@ -4325,6 +4257,29 @@ class WorkflowDesignerComponent {
                     });
                 }
             });
+            // Register the workflow itself
+            this.state.registerLoadedObject(workflow.Id, workflow.Code);
+            // Register swimlanes when processing
+            if (workflow.Lanes && workflow.Lanes.length) {
+                workflow.Lanes.forEach((lane) => {
+                    this.state.registerLoadedObject(lane.Id, lane.Code);
+                    // Existing lane processing code...
+                });
+            }
+            // Register stages when processing
+            if (workflow.Stages && workflow.Stages.length) {
+                workflow.Stages.forEach((stage) => {
+                    this.state.registerLoadedObject(stage.Id, stage.Code);
+                    // Existing stage processing code...
+                });
+            }
+            // Register actions/connections when processing
+            if (workflow.Actions && workflow.Actions.length) {
+                workflow.Actions.forEach((action) => {
+                    this.state.registerLoadedObject(action.Id, action.Code);
+                    // Existing action processing code...
+                });
+            }
         }
         // Process connections/actions
         if (workflow.Actions && workflow.Actions.length) {
@@ -4526,11 +4481,11 @@ class WorkflowDesignerComponent {
         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    (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 ɵ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"] }, { 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    (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"] }]
+            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']