verben-workflow-ui 0.5.76 → 0.5.78

package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs

@@ -760,10 +760,10 @@ class WorkflowDesignerState {
     }
     /** Swimlane height constant used for coordinate conversions. */
     swimlaneHeight = 263;
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerState, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerState, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -942,10 +942,10 @@ class WorkflowDataService {
         };
         return workflow;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDataService, deps: [{ token: i1.HttpWebRequestService }, { token: i1.EnvironmentService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDataService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDataService, deps: [{ token: i1.HttpWebRequestService }, { token: i1.EnvironmentService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDataService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDataService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1239,10 +1239,10 @@ class NodeManagementService {
     hasOutgoingConnections(nodeId) {
         return this.state.connections.some((conn) => conn.sourceNodeId === nodeId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NodeManagementService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NodeManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NodeManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1381,10 +1381,10 @@ class SwimlaneService {
         }
         return -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwimlaneService, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwimlaneService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwimlaneService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1448,12 +1448,12 @@ class DesignerToolbarComponent {
     onActorTagsClick() {
         this.openActorTags.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: NodeManagementService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: { selectedTool: "selectedTool", isSaving: "isSaving", workflowCode: "workflowCode" }, outputs: { openActorTags: "openActorTags", toolSelected: "toolSelected", saveWorkflow: "saveWorkflow" }, ngImport: i0, template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n      style=\"width: 60px; height: auto\"\n    >\n      <!-- {{ item.label }} -->\n      <img\n        [src]=\"'icons/' + item.id + '.svg'\"\n        [alt]=\"item.label\"\n        class=\"tool-icon\"\n      />\n    </button>\n  </div>\n\n  <verbena-button\n    *ngIf=\"workflowCode\"\n    buttonClass=\"actor-tags-button\"\n    (click)=\"onActorTagsClick()\"\n    type=\"button\"\n    text=\"+ Actor Tags\"\n    bgColor=\"#FFE681\"\n    textColor=\"#404040\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    height=\"39px\"\n    class=\"ml-2\"\n  ></verbena-button>\n\n  <verbena-button\n    buttonClass=\"save-button\"\n    (click)=\"onSaveClick()\"\n    [isLoading]=\"isSaving\"\n    type=\"submit\"\n    text=\"Save\"\n    bgColor=\"#FFE681\"\n    textColor=\"#404040\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    width=\"114px\"\n    height=\"39px\"\n  ></verbena-button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: NodeManagementService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: { selectedTool: "selectedTool", isSaving: "isSaving", workflowCode: "workflowCode" }, outputs: { openActorTags: "openActorTags", toolSelected: "toolSelected", saveWorkflow: "saveWorkflow" }, ngImport: i0, template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n      style=\"width: 60px; height: auto\"\n    >\n      <!-- {{ item.label }} -->\n      <img\n        [src]=\"'icons/' + item.id + '.svg'\"\n        [alt]=\"item.label\"\n        class=\"tool-icon\"\n      />\n    </button>\n  </div>\n\n  <verbena-button\n    *ngIf=\"workflowCode\"\n    buttonClass=\"actor-tags-button\"\n    (click)=\"onActorTagsClick()\"\n    type=\"button\"\n    text=\"+ Actor Tags\"\n    bgColor=\"var(--vbn-color-primary)\"\n    textColor=\"var(--vbn-color-on-primary)\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    height=\"39px\"\n    class=\"ml-2\"\n  ></verbena-button>\n\n  <verbena-button\n    buttonClass=\"save-button\"\n    (click)=\"onSaveClick()\"\n    [isLoading]=\"isSaving\"\n    type=\"submit\"\n    text=\"Save\"\n    bgColor=\"var(--vbn-color-primary)\"\n    textColor=\"var(--vbn-color-on-primary)\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    width=\"114px\"\n    height=\"39px\"\n  ></verbena-button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:var(--vbn-color-surface);border-bottom:1px solid var(--vbn-color-border);display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:var(--vbn-color-surface);border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:var(--vbn-color-surface);border:1px solid var(--vbn-color-border);border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:var(--vbn-color-surface-alt)}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-designer-toolbar', template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n      style=\"width: 60px; height: auto\"\n    >\n      <!-- {{ item.label }} -->\n      <img\n        [src]=\"'icons/' + item.id + '.svg'\"\n        [alt]=\"item.label\"\n        class=\"tool-icon\"\n      />\n    </button>\n  </div>\n\n  <verbena-button\n    *ngIf=\"workflowCode\"\n    buttonClass=\"actor-tags-button\"\n    (click)=\"onActorTagsClick()\"\n    type=\"button\"\n    text=\"+ Actor Tags\"\n    bgColor=\"#FFE681\"\n    textColor=\"#404040\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    height=\"39px\"\n    class=\"ml-2\"\n  ></verbena-button>\n\n  <verbena-button\n    buttonClass=\"save-button\"\n    (click)=\"onSaveClick()\"\n    [isLoading]=\"isSaving\"\n    type=\"submit\"\n    text=\"Save\"\n    bgColor=\"#FFE681\"\n    textColor=\"#404040\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    width=\"114px\"\n    height=\"39px\"\n  ></verbena-button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'lib-designer-toolbar', template: "<div class=\"designer-toolbar\">\n  <div class=\"toolbar-container\">\n    <button\n      *ngFor=\"let item of toolbarItems\"\n      class=\"tool-button\"\n      [class.active]=\"selectedTool === item.id\"\n      [class.disabled]=\"!isEnabled(item.id)\"\n      (click)=\"onToolClick(item.id)\"\n      [title]=\"item.label\"\n      [disabled]=\"!isEnabled(item.id)\"\n      style=\"width: 60px; height: auto\"\n    >\n      <!-- {{ item.label }} -->\n      <img\n        [src]=\"'icons/' + item.id + '.svg'\"\n        [alt]=\"item.label\"\n        class=\"tool-icon\"\n      />\n    </button>\n  </div>\n\n  <verbena-button\n    *ngIf=\"workflowCode\"\n    buttonClass=\"actor-tags-button\"\n    (click)=\"onActorTagsClick()\"\n    type=\"button\"\n    text=\"+ Actor Tags\"\n    bgColor=\"var(--vbn-color-primary)\"\n    textColor=\"var(--vbn-color-on-primary)\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    height=\"39px\"\n    class=\"ml-2\"\n  ></verbena-button>\n\n  <verbena-button\n    buttonClass=\"save-button\"\n    (click)=\"onSaveClick()\"\n    [isLoading]=\"isSaving\"\n    type=\"submit\"\n    text=\"Save\"\n    bgColor=\"var(--vbn-color-primary)\"\n    textColor=\"var(--vbn-color-on-primary)\"\n    borderRadius=\"10px\"\n    pd=\"10px 20px\"\n    width=\"114px\"\n    height=\"39px\"\n  ></verbena-button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:var(--vbn-color-surface);border-bottom:1px solid var(--vbn-color-border);display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:var(--vbn-color-surface);border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:var(--vbn-color-surface);border:1px solid var(--vbn-color-border);border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:var(--vbn-color-surface-alt)}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: NodeManagementService }, { type: SwimlaneService }], propDecorators: { selectedTool: [{
                 type: Input
             }], isSaving: [{
@@ -1653,12 +1653,12 @@ 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: "17.0.0", version: "18.2.13", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: { node: "node", isStartNode: "isStartNode", isSubflow: "isSubflow", stageData: "stageData" }, outputs: { stagePropertiesUpdated: "stagePropertiesUpdated", parallelExecutionToggled: "parallelExecutionToggled", showShieldDialog: "showShieldDialog", showEscalationDialog: "showEscalationDialog", showFormDialog: "showFormDialog" }, ngImport: i0, template: "<svg:g>\n  <!-- Shape: Rectangle for stage, Hexagon for subflow -->\n  @if (isSubflow) {\n  <svg:path [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    \" fill=\"transparent\" stroke=\"#D36CFF\" stroke-width=\"1\"></svg:path>\n  } @else {\n  <svg:rect x=\"0\" y=\"0\" [attr.width]=\"node.width\" [attr.height]=\"node.height\" fill=\"transparent\" stroke=\"#D36CFF\"\n    stroke-width=\"1\"></svg:rect>\n  }\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g (click)=\"toggleFormPopup($event)\" class=\"stage-icon\" transform=\"translate(6, 6)\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" 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]=\"node.stageData?.formId ? '#D36CFF' : 'black'\" />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g (click)=\"toggleShieldPopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n\n    <svg:path d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\" fill=\"black\" />\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  </svg:g>\n\n  @if (node.stageData?.Code) {\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('left', $event)\" class=\"stage-icon\" transform=\"translate(6, 38)\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('right', $event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n  }\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g *ngIf=\"hasMultipleConnectedStages\" (click)=\"toggleCodePopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\">\n    <svg:text font-family=\"'Plus Jakarta Sans', sans-serif\" font-weight=\"500\" font-size=\"16px\"\n      dominant-baseline=\"middle\" [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\">\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g (click)=\"toggleTimerPopup($event)\" class=\"stage-icon\" [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\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  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\n    [attr.font-size]=\"isSubflow ? '10' : '14'\" fill=\"#000000\">\n    {{ truncatedDisplayName }}\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", styles: [":host{pointer-events:none}.stage-icon{cursor:pointer;pointer-events:all}.stage-icon:hover path{fill:#d36cff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StageNodeComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: { node: "node", isStartNode: "isStartNode", isSubflow: "isSubflow", stageData: "stageData" }, outputs: { stagePropertiesUpdated: "stagePropertiesUpdated", parallelExecutionToggled: "parallelExecutionToggled", showShieldDialog: "showShieldDialog", showEscalationDialog: "showEscalationDialog", showFormDialog: "showFormDialog" }, ngImport: i0, template: "<svg:g>\n  <!-- Shape: Rectangle for stage, Hexagon for subflow -->\n  @if (isSubflow) {\n  <svg:path [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    \" fill=\"transparent\" stroke=\"#D36CFF\" stroke-width=\"1\"></svg:path>\n  } @else {\n  <svg:rect x=\"0\" y=\"0\" [attr.width]=\"node.width\" [attr.height]=\"node.height\" fill=\"transparent\" stroke=\"#D36CFF\"\n    stroke-width=\"1\"></svg:rect>\n  }\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g (click)=\"toggleFormPopup($event)\" class=\"stage-icon\" transform=\"translate(6, 6)\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" 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]=\"node.stageData?.formId ? '#D36CFF' : 'black'\" />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g (click)=\"toggleShieldPopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n\n    <svg:path d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\" fill=\"black\" />\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  </svg:g>\n\n  @if (node.stageData?.Code) {\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('left', $event)\" class=\"stage-icon\" transform=\"translate(6, 38)\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('right', $event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n  }\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g *ngIf=\"hasMultipleConnectedStages\" (click)=\"toggleCodePopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\">\n    <svg:text font-family=\"'Plus Jakarta Sans', sans-serif\" font-weight=\"500\" font-size=\"16px\"\n      dominant-baseline=\"middle\" [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\">\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g (click)=\"toggleTimerPopup($event)\" class=\"stage-icon\" [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\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  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\n    [attr.font-size]=\"isSubflow ? '10' : '14'\" fill=\"var(--vbn-color-text)\">\n    {{ truncatedDisplayName }}\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", styles: [":host{pointer-events:none}.stage-icon{cursor:pointer;pointer-events:all}.stage-icon:hover path{fill:#d36cff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StageNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:g[lib-stage-node]', template: "<svg:g>\n  <!-- Shape: Rectangle for stage, Hexagon for subflow -->\n  @if (isSubflow) {\n  <svg:path [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    \" fill=\"transparent\" stroke=\"#D36CFF\" stroke-width=\"1\"></svg:path>\n  } @else {\n  <svg:rect x=\"0\" y=\"0\" [attr.width]=\"node.width\" [attr.height]=\"node.height\" fill=\"transparent\" stroke=\"#D36CFF\"\n    stroke-width=\"1\"></svg:rect>\n  }\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g (click)=\"toggleFormPopup($event)\" class=\"stage-icon\" transform=\"translate(6, 6)\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" 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]=\"node.stageData?.formId ? '#D36CFF' : 'black'\" />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g (click)=\"toggleShieldPopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n\n    <svg:path d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\" fill=\"black\" />\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  </svg:g>\n\n  @if (node.stageData?.Code) {\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('left', $event)\" class=\"stage-icon\" transform=\"translate(6, 38)\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('right', $event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n  }\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g *ngIf=\"hasMultipleConnectedStages\" (click)=\"toggleCodePopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\">\n    <svg:text font-family=\"'Plus Jakarta Sans', sans-serif\" font-weight=\"500\" font-size=\"16px\"\n      dominant-baseline=\"middle\" [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\">\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g (click)=\"toggleTimerPopup($event)\" class=\"stage-icon\" [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\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  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\n    [attr.font-size]=\"isSubflow ? '10' : '14'\" fill=\"#000000\">\n    {{ truncatedDisplayName }}\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", styles: [":host{pointer-events:none}.stage-icon{cursor:pointer;pointer-events:all}.stage-icon:hover path{fill:#d36cff}\n"] }]
+            args: [{ selector: 'svg:g[lib-stage-node]', template: "<svg:g>\n  <!-- Shape: Rectangle for stage, Hexagon for subflow -->\n  @if (isSubflow) {\n  <svg:path [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    \" fill=\"transparent\" stroke=\"#D36CFF\" stroke-width=\"1\"></svg:path>\n  } @else {\n  <svg:rect x=\"0\" y=\"0\" [attr.width]=\"node.width\" [attr.height]=\"node.height\" fill=\"transparent\" stroke=\"#D36CFF\"\n    stroke-width=\"1\"></svg:rect>\n  }\n\n  <!-- Top-left icon: Stage form -->\n  <svg:g (click)=\"toggleFormPopup($event)\" class=\"stage-icon\" transform=\"translate(6, 6)\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" 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]=\"node.stageData?.formId ? '#D36CFF' : 'black'\" />\n  </svg:g>\n\n  <!-- Top-right icon: Shield -->\n  <svg:g (click)=\"toggleShieldPopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 6)'\">\n    <!-- Transparent rectangle to capture clicks -->\n    <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n\n    <svg:path d=\"M7.5 12H16.5V13.5H7.5V12ZM7.5 7.5H16.5V9H7.5V7.5Z\" fill=\"black\" />\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  </svg:g>\n\n  @if (node.stageData?.Code) {\n  <!-- Left-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('left', $event)\" class=\"stage-icon\" transform=\"translate(6, 38)\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n\n  <!-- Right-center icon: Thunderbolt -->\n  <svg:g (click)=\"toggleActionPopup('right', $event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(' + (node.width - 30) + ', 38)'\">\n    <svg:path d=\"M11 15H6L13 1V9H18L11 23V15Z\" fill=\"black\" />\n  </svg:g>\n  }\n\n  <!-- Bottom-left icon: Double slash text -->\n  <svg:g *ngIf=\"hasMultipleConnectedStages\" (click)=\"toggleCodePopup($event)\" class=\"stage-icon\"\n    [attr.transform]=\"'translate(6, ' + (node.height - 16) + ')'\">\n    <svg:text font-family=\"'Plus Jakarta Sans', sans-serif\" font-weight=\"500\" font-size=\"16px\"\n      dominant-baseline=\"middle\" [attr.fill]=\"isParallelExecution ? '#D36CFF' : 'black'\">\n      //\n    </svg:text>\n  </svg:g>\n\n  <!-- Bottom-right icon: Timer -->\n  <svg:g (click)=\"toggleTimerPopup($event)\" class=\"stage-icon\" [attr.transform]=\"\n      'translate(' + (node.width - 30) + ', ' + (node.height - 30) + ')'\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  </svg:g>\n\n  <!-- Label in the center -->\n  <svg:text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" dominant-baseline=\"middle\"\n    [attr.font-size]=\"isSubflow ? '10' : '14'\" fill=\"var(--vbn-color-text)\">\n    {{ truncatedDisplayName }}\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", styles: [":host{pointer-events:none}.stage-icon{cursor:pointer;pointer-events:all}.stage-icon:hover path{fill:#d36cff}\n"] }]
         }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { node: [{
                 type: Input
             }], isStartNode: [{
@@ -1900,10 +1900,10 @@ class PopupService {
             pendingConnectionSourceSwimlaneIndex: this._pendingConnectionSourceSwimlaneIndex.getValue(),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, deps: [{ token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, deps: [{ token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2064,12 +2064,12 @@ class StageDialogComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: NodeManagementService }, { token: PopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n      <!-- Stage Name -->\n      <verbena-input\n        name=\"Name\"\n        label=\"Stage Name\"\n        formControlName=\"Name\"\n        placeHolder=\"Enter Stage Name\"\n      />\n\n      <!-- Description -->\n      <verbena-textarea\n        label=\"Description\"\n        [rows]=\"3\"\n        formControlName=\"Description\"\n      ></verbena-textarea>\n\n      <!-- Recipient Count -->\n      <verbena-input\n        name=\"MinNoOfActor\"\n        label=\"Recipient Count\"\n        type=\"number\"\n        formControlName=\"MinNoOfActor\"\n        placeHolder=\"Enter Count\"\n      />\n\n      <!-- Pass On Rule -->\n      <verbena-input\n        name=\"PassOnRule\"\n        label=\"Pass On Rule\"\n        formControlName=\"PassOnRule\"\n        placeHolder=\"Select Rule\"\n      />\n\n      <!-- Duration -->\n      <verbena-input\n        name=\"Duration\"\n        label=\"Duration\"\n        type=\"number\"\n        formControlName=\"Duration\"\n        placeHolder=\"Set Duration\"\n      />\n\n      <!-- Actor Rule -->\n      <div class=\"space-y-1\">\n        <label for=\"actor-rule\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Actor Rule\n        </label>\n        <verben-drop-down\n          id=\"actor-rule\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select Rule\"\n          [options]=\"actorRules\"\n          formControlName=\"ActorRule\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Assignment Type -->\n      <div class=\"space-y-1\">\n        <label for=\"assignment\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Assignment Type\n        </label>\n        <verben-drop-down\n          id=\"assignment\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select\"\n          [options]=\"assignmentTypes\"\n          formControlName=\"AssignmentType\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Tags -->\n      <div class=\"space-y-1\">\n        <label for=\"tags\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Tags\n        </label>\n        <verben-drop-down\n          id=\"tags\"\n          selectKey=\"Code\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"true\"\n          placeholder=\"Select\"\n          [options]=\"tags\"\n          optionLabel=\"Name\"\n          formControlName=\"Tags\"\n          class=\"form-control\"\n          [filter]=\"true\"\n          filterBy=\"Name\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Is Entry Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-entry-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Entry Point\n        </label>\n        <verbena-switch\n          id=\"is-entry-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'#1A237E'\"\n          formControlName=\"IsEntryPoint\"\n        ></verbena-switch>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Exit Point\n        </label>\n        <verbena-switch\n          id=\"is-exit-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'#1A237E'\"\n          formControlName=\"IsExitPoint\"\n        ></verbena-switch>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"deleteStage()\"\n    >\n      Delete\n    </button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      (click)=\"deleteStage()\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      (click)=\"saveStage()\"\n      [disable]=\"stageForm.invalid\"\n    ></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i5.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StageDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: NodeManagementService }, { token: PopupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n      <!-- Stage Name -->\n      <verbena-input\n        name=\"Name\"\n        label=\"Stage Name\"\n        formControlName=\"Name\"\n        placeHolder=\"Enter Stage Name\"\n      />\n\n      <!-- Description -->\n      <verbena-textarea\n        label=\"Description\"\n        [rows]=\"3\"\n        formControlName=\"Description\"\n      ></verbena-textarea>\n\n      <!-- Recipient Count -->\n      <verbena-input\n        name=\"MinNoOfActor\"\n        label=\"Recipient Count\"\n        type=\"number\"\n        formControlName=\"MinNoOfActor\"\n        placeHolder=\"Enter Count\"\n      />\n\n      <!-- Pass On Rule -->\n      <verbena-input\n        name=\"PassOnRule\"\n        label=\"Pass On Rule\"\n        formControlName=\"PassOnRule\"\n        placeHolder=\"Select Rule\"\n      />\n\n      <!-- Duration -->\n      <verbena-input\n        name=\"Duration\"\n        label=\"Duration\"\n        type=\"number\"\n        formControlName=\"Duration\"\n        placeHolder=\"Set Duration\"\n      />\n\n      <!-- Actor Rule -->\n      <div class=\"space-y-1\">\n        <label for=\"actor-rule\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Actor Rule\n        </label>\n        <verben-drop-down\n          id=\"actor-rule\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select Rule\"\n          [options]=\"actorRules\"\n          formControlName=\"ActorRule\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Assignment Type -->\n      <div class=\"space-y-1\">\n        <label for=\"assignment\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Assignment Type\n        </label>\n        <verben-drop-down\n          id=\"assignment\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select\"\n          [options]=\"assignmentTypes\"\n          formControlName=\"AssignmentType\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Tags -->\n      <div class=\"space-y-1\">\n        <label for=\"tags\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Tags\n        </label>\n        <verben-drop-down\n          id=\"tags\"\n          selectKey=\"Code\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"true\"\n          placeholder=\"Select\"\n          [options]=\"tags\"\n          optionLabel=\"Name\"\n          formControlName=\"Tags\"\n          class=\"form-control\"\n          [filter]=\"true\"\n          filterBy=\"Name\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Is Entry Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-entry-point\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Entry Point\n        </label>\n        <verbena-switch\n          id=\"is-entry-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          formControlName=\"IsEntryPoint\"\n        ></verbena-switch>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Exit Point\n        </label>\n        <verbena-switch\n          id=\"is-exit-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          formControlName=\"IsExitPoint\"\n        ></verbena-switch>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"deleteStage()\"\n    >\n      Delete\n    </button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      (click)=\"deleteStage()\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      (click)=\"saveStage()\"\n      [disable]=\"stageForm.invalid\"\n    ></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i5.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["disabled", "label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StageDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n      <!-- Stage Name -->\n      <verbena-input\n        name=\"Name\"\n        label=\"Stage Name\"\n        formControlName=\"Name\"\n        placeHolder=\"Enter Stage Name\"\n      />\n\n      <!-- Description -->\n      <verbena-textarea\n        label=\"Description\"\n        [rows]=\"3\"\n        formControlName=\"Description\"\n      ></verbena-textarea>\n\n      <!-- Recipient Count -->\n      <verbena-input\n        name=\"MinNoOfActor\"\n        label=\"Recipient Count\"\n        type=\"number\"\n        formControlName=\"MinNoOfActor\"\n        placeHolder=\"Enter Count\"\n      />\n\n      <!-- Pass On Rule -->\n      <verbena-input\n        name=\"PassOnRule\"\n        label=\"Pass On Rule\"\n        formControlName=\"PassOnRule\"\n        placeHolder=\"Select Rule\"\n      />\n\n      <!-- Duration -->\n      <verbena-input\n        name=\"Duration\"\n        label=\"Duration\"\n        type=\"number\"\n        formControlName=\"Duration\"\n        placeHolder=\"Set Duration\"\n      />\n\n      <!-- Actor Rule -->\n      <div class=\"space-y-1\">\n        <label for=\"actor-rule\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Actor Rule\n        </label>\n        <verben-drop-down\n          id=\"actor-rule\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select Rule\"\n          [options]=\"actorRules\"\n          formControlName=\"ActorRule\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Assignment Type -->\n      <div class=\"space-y-1\">\n        <label for=\"assignment\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Assignment Type\n        </label>\n        <verben-drop-down\n          id=\"assignment\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select\"\n          [options]=\"assignmentTypes\"\n          formControlName=\"AssignmentType\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Tags -->\n      <div class=\"space-y-1\">\n        <label for=\"tags\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Tags\n        </label>\n        <verben-drop-down\n          id=\"tags\"\n          selectKey=\"Code\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"true\"\n          placeholder=\"Select\"\n          [options]=\"tags\"\n          optionLabel=\"Name\"\n          formControlName=\"Tags\"\n          class=\"form-control\"\n          [filter]=\"true\"\n          filterBy=\"Name\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Is Entry Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-entry-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Entry Point\n        </label>\n        <verbena-switch\n          id=\"is-entry-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'#1A237E'\"\n          formControlName=\"IsEntryPoint\"\n        ></verbena-switch>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Exit Point\n        </label>\n        <verbena-switch\n          id=\"is-exit-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'#1A237E'\"\n          formControlName=\"IsExitPoint\"\n        ></verbena-switch>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"deleteStage()\"\n    >\n      Delete\n    </button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      (click)=\"deleteStage()\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      (click)=\"saveStage()\"\n      [disable]=\"stageForm.invalid\"\n    ></verbena-button>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible()\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"p-4 border-b border-gray-200\">\n    <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-4\">\n    <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n      <!-- Stage Name -->\n      <verbena-input\n        name=\"Name\"\n        label=\"Stage Name\"\n        formControlName=\"Name\"\n        placeHolder=\"Enter Stage Name\"\n      />\n\n      <!-- Description -->\n      <verbena-textarea\n        label=\"Description\"\n        [rows]=\"3\"\n        formControlName=\"Description\"\n      ></verbena-textarea>\n\n      <!-- Recipient Count -->\n      <verbena-input\n        name=\"MinNoOfActor\"\n        label=\"Recipient Count\"\n        type=\"number\"\n        formControlName=\"MinNoOfActor\"\n        placeHolder=\"Enter Count\"\n      />\n\n      <!-- Pass On Rule -->\n      <verbena-input\n        name=\"PassOnRule\"\n        label=\"Pass On Rule\"\n        formControlName=\"PassOnRule\"\n        placeHolder=\"Select Rule\"\n      />\n\n      <!-- Duration -->\n      <verbena-input\n        name=\"Duration\"\n        label=\"Duration\"\n        type=\"number\"\n        formControlName=\"Duration\"\n        placeHolder=\"Set Duration\"\n      />\n\n      <!-- Actor Rule -->\n      <div class=\"space-y-1\">\n        <label for=\"actor-rule\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Actor Rule\n        </label>\n        <verben-drop-down\n          id=\"actor-rule\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select Rule\"\n          [options]=\"actorRules\"\n          formControlName=\"ActorRule\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Assignment Type -->\n      <div class=\"space-y-1\">\n        <label for=\"assignment\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Assignment Type\n        </label>\n        <verben-drop-down\n          id=\"assignment\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"false\"\n          placeholder=\"Select\"\n          [options]=\"assignmentTypes\"\n          formControlName=\"AssignmentType\"\n          class=\"form-control\"\n          [showClear]=\"true\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Tags -->\n      <div class=\"space-y-1\">\n        <label for=\"tags\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Tags\n        </label>\n        <verben-drop-down\n          id=\"tags\"\n          selectKey=\"Code\"\n          styleClass=\"w-full\"\n          width=\"100%\"\n          [multiselect]=\"true\"\n          placeholder=\"Select\"\n          [options]=\"tags\"\n          optionLabel=\"Name\"\n          formControlName=\"Tags\"\n          class=\"form-control\"\n          [filter]=\"true\"\n          filterBy=\"Name\"\n        >\n        </verben-drop-down>\n      </div>\n\n      <!-- Is Entry Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-entry-point\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Entry Point\n        </label>\n        <verbena-switch\n          id=\"is-entry-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          formControlName=\"IsEntryPoint\"\n        ></verbena-switch>\n      </div>\n\n      <!-- Is Exit Point -->\n      <div class=\"flex items-center gap-4\">\n        <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Exit Point\n        </label>\n        <verbena-switch\n          id=\"is-exit-point\"\n          onText=\"Yes\"\n          offText=\"No\"\n          [onColor]=\"'var(--vbn-color-text)'\"\n          formControlName=\"IsExitPoint\"\n        ></verbena-switch>\n      </div>\n    </form>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button>\n    <button\n      class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n      (click)=\"saveStage()\"\n      [disabled]=\"stageForm.invalid\"\n    >\n      Save\n    </button>\n    <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"deleteStage()\"\n    >\n      Delete\n    </button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      (click)=\"deleteStage()\"\n    ></verbena-button>\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n      class=\"ml-auto\"\n    ></verbena-button>\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      (click)=\"saveStage()\"\n      [disable]=\"stageForm.invalid\"\n    ></verbena-button>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: NodeManagementService }, { type: PopupService }], propDecorators: { closed: [{
                 type: Output
             }], saved: [{
@@ -2124,10 +2124,10 @@ class ConditionsPopupComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"mb-3\">\n        <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n      </div>\n\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium mb-1\">Condition</label>\n        <input\n          type=\"text\"\n          [(ngModel)]=\"currentCondition\"\n          placeholder=\"e.g., order.amount > 500,000\"\n          class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n        />\n      </div>\n\n      <div\n        class=\"space-y-3 max-h-60 overflow-y-auto\"\n        *ngIf=\"connectionConditions.length > 1\"\n      >\n        <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n        @for (conn of connectionConditions; track conn.connectionId) { @if\n        (!conn.isActive) {\n        <div class=\"border rounded p-3\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n          </div>\n          <div>\n            <input\n              type=\"text\"\n              [value]=\"conn.condition\"\n              placeholder=\"No condition\"\n              class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n              readonly\n            />\n          </div>\n        </div>\n        } }\n      </div>\n\n      <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n        <button\n          class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n          (click)=\"onClose()\"\n        >\n          Cancel\n        </button>\n        <button\n          class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n          (click)=\"saveCondition()\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"mb-3\">\n        <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n      </div>\n\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium mb-1\">Condition</label>\n        <input\n          type=\"text\"\n          [(ngModel)]=\"currentCondition\"\n          placeholder=\"e.g., order.amount > 500,000\"\n          class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n        />\n      </div>\n\n      <div\n        class=\"space-y-3 max-h-60 overflow-y-auto\"\n        *ngIf=\"connectionConditions.length > 1\"\n      >\n        <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n        @for (conn of connectionConditions; track conn.connectionId) { @if\n        (!conn.isActive) {\n        <div class=\"border rounded p-3\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n          </div>\n          <div>\n            <input\n              type=\"text\"\n              [value]=\"conn.condition\"\n              placeholder=\"No condition\"\n              class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n              readonly\n            />\n          </div>\n        </div>\n        } }\n      </div>\n\n      <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n        <button\n          class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n          (click)=\"onClose()\"\n        >\n          Cancel\n        </button>\n        <button\n          class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n          (click)=\"saveCondition()\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConditionsPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-conditions-popup', template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'fixed'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"mb-3\">\n        <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n      </div>\n\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium mb-1\">Condition</label>\n        <input\n          type=\"text\"\n          [(ngModel)]=\"currentCondition\"\n          placeholder=\"e.g., order.amount > 500,000\"\n          class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n        />\n      </div>\n\n      <div\n        class=\"space-y-3 max-h-60 overflow-y-auto\"\n        *ngIf=\"connectionConditions.length > 1\"\n      >\n        <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n        @for (conn of connectionConditions; track conn.connectionId) { @if\n        (!conn.isActive) {\n        <div class=\"border rounded p-3\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n          </div>\n          <div>\n            <input\n              type=\"text\"\n              [value]=\"conn.condition\"\n              placeholder=\"No condition\"\n              class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n              readonly\n            />\n          </div>\n        </div>\n        } }\n      </div>\n\n      <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n        <button\n          class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n          (click)=\"onClose()\"\n        >\n          Cancel\n        </button>\n        <button\n          class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n          (click)=\"saveCondition()\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"] }]
         }], ctorParameters: () => [{ type: WorkflowDesignerState }], propDecorators: { visible: [{
@@ -2360,12 +2360,12 @@ class EscalationDialogComponent {
         const escalation = this.escalation();
         return escalation !== null && escalation.DataState !== 'New';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Message ID?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EscalationDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Is Message ID?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"], outputs: ["onImageEdit", "onSortEdit"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EscalationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n            Is Message ID?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div class=\"mb-4 space-y-4\">\n      <!-- <div class=\"space-y-1\">\n        <label for=\"operation-action\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Escalation\n        </label>\n        <verben-drop-down\n            id=\"operation-action\"\n            styleClass=\"w-full\"\n            width=\"100%\"\n            [multiselect]=\"false\"\n            placeholder=\"Select Operation Action\"\n            [options]=\"operationActions()\"\n            optionLabel=\"Name\"\n            optionValue=\"Code\"\n            [ngModel]=\"selectedOperationAction | async\"\n            (ngModelChange)=\"selectedOperationAction.next($event)\"\n            class=\"form-control\"\n          ></verben-drop-down>\n      </div> -->\n\n      <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n        <div class=\"space-y-1\">\n          <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Message {{ i + 1 }}\n          </label>\n          <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n            [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n            [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n        </div>\n\n        @if (message) {\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Is Task Data Source?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n        </div>\n\n        <div class=\"flex items-center gap-4\">\n          <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n            Is Message ID?\n          </label>\n          <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n            [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n        </div>\n        }\n\n        <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n          <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n            <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n            <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n          </div>\n          <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n            [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between items-center gap-8 w-full\">\n    <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n      [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n    <div class=\"flex gap-2 items-center\">\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n      <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\"\n        borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n        [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: i1.UtilService }], propDecorators: { visible: [{
                 type: Input
             }], closed: [{
@@ -2472,12 +2472,12 @@ class ActionDialogComponent {
     onDialogOpen(eventData) {
         console.log('Dialog opened, received data:', eventData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      (click)=\"deleteAction()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      (click)=\"deleteAction()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      (click)=\"deleteAction()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-action-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n    <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n    <div class=\"space-y-1\">\n      <label for=\"operation-action\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n        Operation Action\n      </label>\n      <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n        placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n        formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n\n    <div class=\"space-y-1\">\n      <label for=\"target-status\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n        Target Status\n      </label>\n      <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n        placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n        formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex gap-2 items-center justify-end\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n      class=\"ml-auto\"></verbena-button>\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      (click)=\"deleteAction()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: WorkflowDesignerState }], propDecorators: { closed: [{
                 type: Output
             }], saved: [{
@@ -3676,10 +3676,10 @@ class DesignerCanvasComponent {
             return conn;
         });
     }
-    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", stagePropertiesUpdated: "stagePropertiesUpdated", actionPropertiesUpdated: "actionPropertiesUpdated" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n  <svg #canvas [attr.width]=\"canvasWidth\" [attr.height]=\"canvasHeight\" class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\">\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern id=\"grid\" [attr.width]=\"gridSize\" [attr.height]=\"gridSize\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"0.5\" />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point: outer transparent ring expands the hit target so a\n           connection drag can be started without pixel-precise aim. The visible\n           circle stays at r=5. The hit ring extends inward up to the node's\n           drag-handle edge so clicks near the edge fall to the connection point\n           (rendered topmost) rather than to the drag handle beneath. -->\n      <g id=\"connection-point-template\">\n        <circle r=\"12\" fill=\"transparent\" />\n        <circle r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\n      </g>\n\n      <!-- Dashed line style for connection preview -->\n      <pattern id=\"dashed-line\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n        <line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" />\n      </pattern>\n\n      @for (swimlane of state.swimlanes; track swimlane.order) {\n      <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n        <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n      </clipPath>\n      }\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text x=\"50%\" y=\"50%\" font-family=\"sans-serif\" font-size=\"16\" fill=\"#94a3b8\" text-anchor=\"middle\">\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- <g\n      [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n      [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n    >\n      <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      <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      <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      <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      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n    </g> -->\n\n    <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n      <!-- Swimlane container - remove stroke to make it purely background -->\n      <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" [attr.height]=\"263\"\n        [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\" stroke=\"none\"></rect>\n\n      <!-- Vertical swimlane label on the left -->\n      <g class=\"swimlane-label\">\n        <!-- Purple background for the label -->\n        <rect x=\"0.5\" y=\"0.5\" width=\"43\" height=\"215\" rx=\"10.5\" fill=\"white\" stroke=\"#D36CFF\"></rect>\n\n        <!-- Plus button at the top -->\n        <g (click)=\"\n            onEditSwimlane($event, swimlane, swimlane.order);\n            $event.stopPropagation()\n          \">\n          <rect x=\"12.5\" y=\"10\" width=\"18\" height=\"18\" fill=\"transparent\" style=\"cursor: pointer\"></rect>\n\n          <path d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n            fill=\"#0000FF\" class=\"plus-icon\" style=\"cursor: pointer\"></path>\n        </g>\n\n        <!-- Swimlane label -->\n        <text x=\"22\" y=\"106\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#333333\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 100)\">\n          {{\n          swimlane.label.length > 12\n          ? swimlane.label.substring(0, 10) + \"...\"\n          : swimlane.label\n          }}\n        </text>\n\n        <!-- Tag count indicator at the bottom -->\n        <rect x=\"11.5\" y=\"187\" width=\"21\" height=\"19\" rx=\"9.5\" fill=\"#9E9E9E\"></rect>\n        <text x=\"24\" y=\"206\" font-family=\"sans-serif\" font-size=\"12\" fill=\"black\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 200)\">\n          {{ swimlane.tags.length }}\n        </text>\n      </g>\n    </g>\n\n    }\n\n    <!-- Nodes -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- Render nodes in this swimlane -->\n    @for (node of swimlane.nodes; track node.id) {\n    <g class=\"node-element\" [attr.transform]=\"\n        'translate(' + node.x + ',' + (node.y + swimlane.order * 263) + ')'\"\n      (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseleave)=\"hideConnectionPoints(node.id)\">\n      <!-- Start node indicator (circle and arrow) for the first node -->\n      @if (node.isStartNode) {\n      <!-- Circle -->\n      <circle cx=\"-50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></circle>\n      <!-- Form icon for start node -->\n      <svg:g (click)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n        \" class=\"stage-icon\" transform=\"translate(-45, 42)\" style=\"cursor: pointer; pointer-events: all\">\n        <!-- Transparent rectangle to capture clicks -->\n        <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\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'\" transform=\"scale(0.7)\" />\n      </svg:g>\n      <!-- Arrow from circle to node -->\n      <path d=\"M -20 50 L 0 50\" stroke=\"#D36CFF\" stroke-width=\"1\" marker-end=\"url(#arrowhead)\"></path>\n      }\n\n      <!-- Exit point indicator (circle and arrow) -->\n      @if (node.stageData?.IsExitPoint) {\n      <!-- Arrow from node to circle -->\n      <path [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\" stroke=\"#D36CFF\" stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"></path>\n      <!-- Circle -->\n      <circle [attr.cx]=\"node.width + 50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"2\"></circle>\n      }\n\n      <!-- Inner drag-handle: inset 12px so the node edge ring stays drag-free.\n           Rendered BEFORE the node shapes/icons so the clickable icons paint on\n           top of it and win pointer events; the node body still falls through to\n           this handle because its shape/label use pointer-events:none.\n           Connection point <use> elements are rendered after everything so they\n           stay topmost and win pointer events at the node edges. -->\n      <rect class=\"node-drag-handle\"\n        [attr.x]=\"12\" [attr.y]=\"12\"\n        [attr.width]=\"node.width - 24\" [attr.height]=\"node.height - 24\"\n        fill=\"transparent\"\n        [style.cursor]=\"getCursorForNode(node.id)\"\n        (mousedown)=\"onNodeMouseDown($event, node, swimlane.order)\" />\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 lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Decision node -->\n      @if (node.type === 'decision') {\n      <path [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        \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\" style=\"pointer-events: none\"></path>\n\n      <!-- Decision node condition indicator icon -->\n      <svg:g (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\" class=\"decision-condition-icon\"\n        [attr.transform]=\"\n          'translate(' +\n          (node.width / 2 - 10) +\n          ',' +\n          (node.height / 2 - 10) +\n          ')'\n        \">\n        <svg:rect x=\"-5\" y=\"-5\" width=\"30\" height=\"30\" fill=\"transparent\" style=\"cursor: pointer\" />\n        <svg:path d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n          fill=\"#D36CFF\" />\n      </svg:g>\n      }\n\n      <!-- Form node -->\n      @if (node.type === 'form') {\n      <path\n        d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n        transform=\"scale(0.7)\" fill=\"none\" stroke=\"#D36CFF\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\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)\" stroke=\"#D36CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n      <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n        fill=\"#D36CFF\" style=\"pointer-events: none\">\n        Form\n      </text>\n      }\n\n      <!-- Subflow node -->\n      @if (node.type === 'subflow') {\n      <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\" [isSubflow]=\"true\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Connection points for this node (rendered last = topmost) -->\n      @for (point of node.connectionPoints || []; track point.id) {\n        @if (isConnectionPointVisible(node.id)) {\n          <use class=\"connection-point\" [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\"\n            [attr.id]=\"point.id\" (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\n        }\n      }\n    </g>\n    <!-- A transparent hover area for improved hover detection -->\n    <rect [attr.x]=\"node.x - 10\" [attr.y]=\"node.y - 10\" [attr.width]=\"node.width + 20\" [attr.height]=\"node.height + 20\"\n      fill=\"transparent\" (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseout)=\"hideConnectionPoints(node.id)\" style=\"pointer-events: none\" />\n    } }\n\n    <!-- Connections -->\n    @for (connection of state.connections; track connection.id) {\n    <g class=\"connection-element\">\n      <path [attr.d]=\"getConnectionPathForSavedConnection(connection)\" stroke=\"#D36CFF\" stroke-width=\"2\" fill=\"none\"\n        marker-end=\"url(#arrowhead)\"></path>\n\n      <!-- Connection Label -->\n      @if (connection.sourceNodeId && connection.targetNodeId) {\n      <foreignObject [attr.x]=\"getLabelPosition(connection).x\" [attr.y]=\"getLabelPosition(connection).y\" width=\"150\"\n        height=\"40\" style=\"overflow: visible; pointer-events: all;\" [attr.transform]=\"'translate(-75, -10)'\">\n        <wf-label-editor [label]=\"connection.label || 'New Action'\" [x]=\"0\" [y]=\"0\" [isConnection]=\"true\"\n          (labelChange)=\"saveConnectionLabel(connection, $event)\" (openDialog)=\"onShowActionDialog(connection)\" />\n      </foreignObject>\n      }\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path [attr.d]=\"getConnectionPath()\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" fill=\"none\"></path>\n    </g>\n    }\n  </svg>\n\n  <div *ngIf=\"popupVisible\" [style.position]=\"'absolute'\" [style.left.px]=\"popupX\" [style.top.px]=\"popupY\">\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '99' }\" [enableMouseLeave]=\"false\"\n      (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md\" dropdown-content>\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 class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\">\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showStartNodeFormPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div class=\"mb-3\">\n            <button\n              class=\"w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\">\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              [ngClass]=\"{ 'bg-blue-50 !border-blue-500 !border-2 font-semibold': form?.Code === activeNodeForFormSelection?.stageData?.formId}\"\n              (click)=\"selectStartNodeForm(form)\">\n              {{ form.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"startNodeFormsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showSubflowPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button 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              {{ workflow.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"workflowsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <lib-conditions-popup [visible]=\"showDecisionConditionDialog\" [decisionNodeId]=\"activeDecisionNodeId\"\n    [newConnectionId]=\"activeConnectionId\" [popupX]=\"decisionConditionPopupX\" [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\" (saved)=\"onDecisionConditionSaved($event)\"></lib-conditions-popup>\n\n  <!-- <lib-decision-popup\n    [visible]=\"showConditionsDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n  ></lib-decision-popup> -->\n\n  <lib-stage-dialog [visible]=\"showStageDialogLocal\" [stageData]=\"activeStageData || {}\"\n    (closed)=\"onStageDialogClosed()\" (saved)=\"onStageDialogSaved($event)\"></lib-stage-dialog>\n\n  <lib-action-dialog [visible]=\"showActionDialogLocal\" [actionData]=\"activeActionData\" (closed)=\"onActionDialogClosed()\"\n    (saved)=\"onActionDialogSaved($event)\" (deleted)=\"onActionDialogDeleted($event)\"></lib-action-dialog>\n\n\n  <lib-escalation-dialog [visible]=\"showEscalationDialogLocal\" [type]=\"activeEscalationType()!\"\n    [stageCode]=\"activeStageCode() || ''\" [workflowCode]=\"state.workflow?.Code || ''\"\n    (closed)=\"onEscalationDialogClosed()\"></lib-escalation-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}.node-drag-handle{pointer-events:all;-webkit-user-select:none;user-select:none}.connection-point{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5$1.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved", "deleted"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerCanvasComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", stagePropertiesUpdated: "stagePropertiesUpdated", actionPropertiesUpdated: "actionPropertiesUpdated" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n  <svg #canvas [attr.width]=\"canvasWidth\" [attr.height]=\"canvasHeight\" class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\">\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern id=\"grid\" [attr.width]=\"gridSize\" [attr.height]=\"gridSize\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"0.5\" />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point: outer transparent ring expands the hit target so a\n           connection drag can be started without pixel-precise aim. The visible\n           circle stays at r=5. The hit ring extends inward up to the node's\n           drag-handle edge so clicks near the edge fall to the connection point\n           (rendered topmost) rather than to the drag handle beneath. -->\n      <g id=\"connection-point-template\">\n        <circle r=\"12\" fill=\"transparent\" />\n        <circle r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\n      </g>\n\n      <!-- Dashed line style for connection preview -->\n      <pattern id=\"dashed-line\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n        <line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" />\n      </pattern>\n\n      @for (swimlane of state.swimlanes; track swimlane.order) {\n      <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n        <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n      </clipPath>\n      }\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text x=\"50%\" y=\"50%\" font-family=\"sans-serif\" font-size=\"16\" fill=\"#94a3b8\" text-anchor=\"middle\">\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- <g\n      [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n      [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n    >\n      <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      <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      <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      <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      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n    </g> -->\n\n    <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n      <!-- Swimlane container - remove stroke to make it purely background -->\n      <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" [attr.height]=\"263\"\n        [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\" stroke=\"none\"></rect>\n\n      <!-- Vertical swimlane label on the left -->\n      <g class=\"swimlane-label\">\n        <!-- Purple background for the label -->\n        <rect x=\"0.5\" y=\"0.5\" width=\"43\" height=\"215\" rx=\"10.5\" fill=\"white\" stroke=\"#D36CFF\"></rect>\n\n        <!-- Plus button at the top -->\n        <g (click)=\"\n            onEditSwimlane($event, swimlane, swimlane.order);\n            $event.stopPropagation()\n          \">\n          <rect x=\"12.5\" y=\"10\" width=\"18\" height=\"18\" fill=\"transparent\" style=\"cursor: pointer\"></rect>\n\n          <path d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n            fill=\"#0000FF\" class=\"plus-icon\" style=\"cursor: pointer\"></path>\n        </g>\n\n        <!-- Swimlane label -->\n        <text x=\"22\" y=\"106\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#333333\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 100)\">\n          {{\n          swimlane.label.length > 12\n          ? swimlane.label.substring(0, 10) + \"...\"\n          : swimlane.label\n          }}\n        </text>\n\n        <!-- Tag count indicator at the bottom -->\n        <rect x=\"11.5\" y=\"187\" width=\"21\" height=\"19\" rx=\"9.5\" fill=\"#9E9E9E\"></rect>\n        <text x=\"24\" y=\"206\" font-family=\"sans-serif\" font-size=\"12\" fill=\"black\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 200)\">\n          {{ swimlane.tags.length }}\n        </text>\n      </g>\n    </g>\n\n    }\n\n    <!-- Nodes -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- Render nodes in this swimlane -->\n    @for (node of swimlane.nodes; track node.id) {\n    <g class=\"node-element\" [attr.transform]=\"\n        'translate(' + node.x + ',' + (node.y + swimlane.order * 263) + ')'\"\n      (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseleave)=\"hideConnectionPoints(node.id)\">\n      <!-- Start node indicator (circle and arrow) for the first node -->\n      @if (node.isStartNode) {\n      <!-- Circle -->\n      <circle cx=\"-50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></circle>\n      <!-- Form icon for start node -->\n      <svg:g (click)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n        \" class=\"stage-icon\" transform=\"translate(-45, 42)\" style=\"cursor: pointer; pointer-events: all\">\n        <!-- Transparent rectangle to capture clicks -->\n        <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\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'\" transform=\"scale(0.7)\" />\n      </svg:g>\n      <!-- Arrow from circle to node -->\n      <path d=\"M -20 50 L 0 50\" stroke=\"#D36CFF\" stroke-width=\"1\" marker-end=\"url(#arrowhead)\"></path>\n      }\n\n      <!-- Exit point indicator (circle and arrow) -->\n      @if (node.stageData?.IsExitPoint) {\n      <!-- Arrow from node to circle -->\n      <path [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\" stroke=\"#D36CFF\" stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"></path>\n      <!-- Circle -->\n      <circle [attr.cx]=\"node.width + 50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"2\"></circle>\n      }\n\n      <!-- Inner drag-handle: inset 12px so the node edge ring stays drag-free.\n           Rendered BEFORE the node shapes/icons so the clickable icons paint on\n           top of it and win pointer events; the node body still falls through to\n           this handle because its shape/label use pointer-events:none.\n           Connection point <use> elements are rendered after everything so they\n           stay topmost and win pointer events at the node edges. -->\n      <rect class=\"node-drag-handle\"\n        [attr.x]=\"12\" [attr.y]=\"12\"\n        [attr.width]=\"node.width - 24\" [attr.height]=\"node.height - 24\"\n        fill=\"transparent\"\n        [style.cursor]=\"getCursorForNode(node.id)\"\n        (mousedown)=\"onNodeMouseDown($event, node, swimlane.order)\" />\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 lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Decision node -->\n      @if (node.type === 'decision') {\n      <path [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        \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\" style=\"pointer-events: none\"></path>\n\n      <!-- Decision node condition indicator icon -->\n      <svg:g (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\" class=\"decision-condition-icon\"\n        [attr.transform]=\"\n          'translate(' +\n          (node.width / 2 - 10) +\n          ',' +\n          (node.height / 2 - 10) +\n          ')'\n        \">\n        <svg:rect x=\"-5\" y=\"-5\" width=\"30\" height=\"30\" fill=\"transparent\" style=\"cursor: pointer\" />\n        <svg:path d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n          fill=\"#D36CFF\" />\n      </svg:g>\n      }\n\n      <!-- Form node -->\n      @if (node.type === 'form') {\n      <path\n        d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n        transform=\"scale(0.7)\" fill=\"none\" stroke=\"#D36CFF\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\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)\" stroke=\"#D36CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n      <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n        fill=\"#D36CFF\" style=\"pointer-events: none\">\n        Form\n      </text>\n      }\n\n      <!-- Subflow node -->\n      @if (node.type === 'subflow') {\n      <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\" [isSubflow]=\"true\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Connection points for this node (rendered last = topmost) -->\n      @for (point of node.connectionPoints || []; track point.id) {\n        @if (isConnectionPointVisible(node.id)) {\n          <use class=\"connection-point\" [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\"\n            [attr.id]=\"point.id\" (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\n        }\n      }\n    </g>\n    <!-- A transparent hover area for improved hover detection -->\n    <rect [attr.x]=\"node.x - 10\" [attr.y]=\"node.y - 10\" [attr.width]=\"node.width + 20\" [attr.height]=\"node.height + 20\"\n      fill=\"transparent\" (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseout)=\"hideConnectionPoints(node.id)\" style=\"pointer-events: none\" />\n    } }\n\n    <!-- Connections -->\n    @for (connection of state.connections; track connection.id) {\n    <g class=\"connection-element\">\n      <path [attr.d]=\"getConnectionPathForSavedConnection(connection)\" stroke=\"#D36CFF\" stroke-width=\"2\" fill=\"none\"\n        marker-end=\"url(#arrowhead)\"></path>\n\n      <!-- Connection Label -->\n      @if (connection.sourceNodeId && connection.targetNodeId) {\n      <foreignObject [attr.x]=\"getLabelPosition(connection).x\" [attr.y]=\"getLabelPosition(connection).y\" width=\"150\"\n        height=\"40\" style=\"overflow: visible; pointer-events: all;\" [attr.transform]=\"'translate(-75, -10)'\">\n        <wf-label-editor [label]=\"connection.label || 'New Action'\" [x]=\"0\" [y]=\"0\" [isConnection]=\"true\"\n          (labelChange)=\"saveConnectionLabel(connection, $event)\" (openDialog)=\"onShowActionDialog(connection)\" />\n      </foreignObject>\n      }\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path [attr.d]=\"getConnectionPath()\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" fill=\"none\"></path>\n    </g>\n    }\n  </svg>\n\n  <div *ngIf=\"popupVisible\" [style.position]=\"'absolute'\" [style.left.px]=\"popupX\" [style.top.px]=\"popupY\">\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '99' }\" [enableMouseLeave]=\"false\"\n      (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md\" dropdown-content>\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 class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\">\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showStartNodeFormPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div class=\"mb-3\">\n            <button\n              class=\"w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\">\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              [ngClass]=\"{ 'bg-blue-50 !border-blue-500 !border-2 font-semibold': form?.Code === activeNodeForFormSelection?.stageData?.formId}\"\n              (click)=\"selectStartNodeForm(form)\">\n              {{ form.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"startNodeFormsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showSubflowPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button 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              {{ workflow.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"workflowsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <lib-conditions-popup [visible]=\"showDecisionConditionDialog\" [decisionNodeId]=\"activeDecisionNodeId\"\n    [newConnectionId]=\"activeConnectionId\" [popupX]=\"decisionConditionPopupX\" [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\" (saved)=\"onDecisionConditionSaved($event)\"></lib-conditions-popup>\n\n  <!-- <lib-decision-popup\n    [visible]=\"showConditionsDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n  ></lib-decision-popup> -->\n\n  <lib-stage-dialog [visible]=\"showStageDialogLocal\" [stageData]=\"activeStageData || {}\"\n    (closed)=\"onStageDialogClosed()\" (saved)=\"onStageDialogSaved($event)\"></lib-stage-dialog>\n\n  <lib-action-dialog [visible]=\"showActionDialogLocal\" [actionData]=\"activeActionData\" (closed)=\"onActionDialogClosed()\"\n    (saved)=\"onActionDialogSaved($event)\" (deleted)=\"onActionDialogDeleted($event)\"></lib-action-dialog>\n\n\n  <lib-escalation-dialog [visible]=\"showEscalationDialogLocal\" [type]=\"activeEscalationType()!\"\n    [stageCode]=\"activeStageCode() || ''\" [workflowCode]=\"state.workflow?.Code || ''\"\n    (closed)=\"onEscalationDialogClosed()\"></lib-escalation-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}.node-drag-handle{pointer-events:all;-webkit-user-select:none;user-select:none}.connection-point{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5$1.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved", "deleted"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-designer-canvas', template: "<div class=\"canvas-container\">\n  <svg #canvas [attr.width]=\"canvasWidth\" [attr.height]=\"canvasHeight\" class=\"designer-canvas\"\n    (click)=\"onCanvasClick($event)\">\n    <defs>\n      <!-- Grid pattern definition -->\n\n      <pattern id=\"grid\" [attr.width]=\"gridSize\" [attr.height]=\"gridSize\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"0.5\" />\n      </pattern>\n\n      <!-- Arrow head marker definition -->\n      <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n        <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n      </marker>\n\n      <!-- Connection point: outer transparent ring expands the hit target so a\n           connection drag can be started without pixel-precise aim. The visible\n           circle stays at r=5. The hit ring extends inward up to the node's\n           drag-handle edge so clicks near the edge fall to the connection point\n           (rendered topmost) rather than to the drag handle beneath. -->\n      <g id=\"connection-point-template\">\n        <circle r=\"12\" fill=\"transparent\" />\n        <circle r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\n      </g>\n\n      <!-- Dashed line style for connection preview -->\n      <pattern id=\"dashed-line\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n        <line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" />\n      </pattern>\n\n      @for (swimlane of state.swimlanes; track swimlane.order) {\n      <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n        <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n      </clipPath>\n      }\n    </defs>\n\n    <!-- Background grid -->\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n    <!-- Display a message when no swimlanes exist -->\n    @if (state.swimlanes.length === 0) {\n    <text x=\"50%\" y=\"50%\" font-family=\"sans-serif\" font-size=\"16\" fill=\"#94a3b8\" text-anchor=\"middle\">\n      Select the Swimlane tool and click on the canvas to add a swimlane\n    </text>\n    }\n\n    <!-- This is where workflow elements will be added later -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- <g\n      [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n      [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n    >\n      <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      <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      <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      <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      <g [attr.transform]=\"'translate(200, 20)'\">\n        @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n        {\n        <text\n          [attr.x]=\"i * 100\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          {{ tag.Name }}\n        </text>\n        } @if (swimlane.tags.length > 3) {\n        <text\n          [attr.x]=\"3 * 100 + 10\"\n          y=\"5\"\n          font-family=\"sans-serif\"\n          font-size=\"12\"\n          fill=\"#666666\"\n        >\n          +{{ swimlane.tags.length - 3 }} more\n        </text>\n        }\n      </g>\n    </g> -->\n\n    <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n      <!-- Swimlane container - remove stroke to make it purely background -->\n      <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" [attr.height]=\"263\"\n        [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\" stroke=\"none\"></rect>\n\n      <!-- Vertical swimlane label on the left -->\n      <g class=\"swimlane-label\">\n        <!-- Purple background for the label -->\n        <rect x=\"0.5\" y=\"0.5\" width=\"43\" height=\"215\" rx=\"10.5\" fill=\"white\" stroke=\"#D36CFF\"></rect>\n\n        <!-- Plus button at the top -->\n        <g (click)=\"\n            onEditSwimlane($event, swimlane, swimlane.order);\n            $event.stopPropagation()\n          \">\n          <rect x=\"12.5\" y=\"10\" width=\"18\" height=\"18\" fill=\"transparent\" style=\"cursor: pointer\"></rect>\n\n          <path d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n            fill=\"#0000FF\" class=\"plus-icon\" style=\"cursor: pointer\"></path>\n        </g>\n\n        <!-- Swimlane label -->\n        <text x=\"22\" y=\"106\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#333333\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 100)\">\n          {{\n          swimlane.label.length > 12\n          ? swimlane.label.substring(0, 10) + \"...\"\n          : swimlane.label\n          }}\n        </text>\n\n        <!-- Tag count indicator at the bottom -->\n        <rect x=\"11.5\" y=\"187\" width=\"21\" height=\"19\" rx=\"9.5\" fill=\"#9E9E9E\"></rect>\n        <text x=\"24\" y=\"206\" font-family=\"sans-serif\" font-size=\"12\" fill=\"black\" text-anchor=\"middle\"\n          transform=\"rotate(-90, 22, 200)\">\n          {{ swimlane.tags.length }}\n        </text>\n      </g>\n    </g>\n\n    }\n\n    <!-- Nodes -->\n    @for (swimlane of state.swimlanes; track swimlane.order) {\n    <!-- Render nodes in this swimlane -->\n    @for (node of swimlane.nodes; track node.id) {\n    <g class=\"node-element\" [attr.transform]=\"\n        'translate(' + node.x + ',' + (node.y + swimlane.order * 263) + ')'\"\n      (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseleave)=\"hideConnectionPoints(node.id)\">\n      <!-- Start node indicator (circle and arrow) for the first node -->\n      @if (node.isStartNode) {\n      <!-- Circle -->\n      <circle cx=\"-50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></circle>\n      <!-- Form icon for start node -->\n      <svg:g (click)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n        \" class=\"stage-icon\" transform=\"translate(-45, 42)\" style=\"cursor: pointer; pointer-events: all\">\n        <!-- Transparent rectangle to capture clicks -->\n        <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\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'\" transform=\"scale(0.7)\" />\n      </svg:g>\n      <!-- Arrow from circle to node -->\n      <path d=\"M -20 50 L 0 50\" stroke=\"#D36CFF\" stroke-width=\"1\" marker-end=\"url(#arrowhead)\"></path>\n      }\n\n      <!-- Exit point indicator (circle and arrow) -->\n      @if (node.stageData?.IsExitPoint) {\n      <!-- Arrow from node to circle -->\n      <path [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\" stroke=\"#D36CFF\" stroke-width=\"1\"\n        marker-end=\"url(#arrowhead)\"></path>\n      <!-- Circle -->\n      <circle [attr.cx]=\"node.width + 50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"2\"></circle>\n      }\n\n      <!-- Inner drag-handle: inset 12px so the node edge ring stays drag-free.\n           Rendered BEFORE the node shapes/icons so the clickable icons paint on\n           top of it and win pointer events; the node body still falls through to\n           this handle because its shape/label use pointer-events:none.\n           Connection point <use> elements are rendered after everything so they\n           stay topmost and win pointer events at the node edges. -->\n      <rect class=\"node-drag-handle\"\n        [attr.x]=\"12\" [attr.y]=\"12\"\n        [attr.width]=\"node.width - 24\" [attr.height]=\"node.height - 24\"\n        fill=\"transparent\"\n        [style.cursor]=\"getCursorForNode(node.id)\"\n        (mousedown)=\"onNodeMouseDown($event, node, swimlane.order)\" />\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 lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Decision node -->\n      @if (node.type === 'decision') {\n      <path [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        \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\" style=\"pointer-events: none\"></path>\n\n      <!-- Decision node condition indicator icon -->\n      <svg:g (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\" class=\"decision-condition-icon\"\n        [attr.transform]=\"\n          'translate(' +\n          (node.width / 2 - 10) +\n          ',' +\n          (node.height / 2 - 10) +\n          ')'\n        \">\n        <svg:rect x=\"-5\" y=\"-5\" width=\"30\" height=\"30\" fill=\"transparent\" style=\"cursor: pointer\" />\n        <svg:path d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n          fill=\"#D36CFF\" />\n      </svg:g>\n      }\n\n      <!-- Form node -->\n      @if (node.type === 'form') {\n      <path\n        d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n        transform=\"scale(0.7)\" fill=\"none\" stroke=\"#D36CFF\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\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)\" stroke=\"#D36CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n      <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n        fill=\"#D36CFF\" style=\"pointer-events: none\">\n        Form\n      </text>\n      }\n\n      <!-- Subflow node -->\n      @if (node.type === 'subflow') {\n      <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\" [isSubflow]=\"true\"\n        (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n        (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n          toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n        \"></svg:g>\n      }\n\n      <!-- Connection points for this node (rendered last = topmost) -->\n      @for (point of node.connectionPoints || []; track point.id) {\n        @if (isConnectionPointVisible(node.id)) {\n          <use class=\"connection-point\" [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\"\n            [attr.id]=\"point.id\" (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\n        }\n      }\n    </g>\n    <!-- A transparent hover area for improved hover detection -->\n    <rect [attr.x]=\"node.x - 10\" [attr.y]=\"node.y - 10\" [attr.width]=\"node.width + 20\" [attr.height]=\"node.height + 20\"\n      fill=\"transparent\" (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n      (mouseout)=\"hideConnectionPoints(node.id)\" style=\"pointer-events: none\" />\n    } }\n\n    <!-- Connections -->\n    @for (connection of state.connections; track connection.id) {\n    <g class=\"connection-element\">\n      <path [attr.d]=\"getConnectionPathForSavedConnection(connection)\" stroke=\"#D36CFF\" stroke-width=\"2\" fill=\"none\"\n        marker-end=\"url(#arrowhead)\"></path>\n\n      <!-- Connection Label -->\n      @if (connection.sourceNodeId && connection.targetNodeId) {\n      <foreignObject [attr.x]=\"getLabelPosition(connection).x\" [attr.y]=\"getLabelPosition(connection).y\" width=\"150\"\n        height=\"40\" style=\"overflow: visible; pointer-events: all;\" [attr.transform]=\"'translate(-75, -10)'\">\n        <wf-label-editor [label]=\"connection.label || 'New Action'\" [x]=\"0\" [y]=\"0\" [isConnection]=\"true\"\n          (labelChange)=\"saveConnectionLabel(connection, $event)\" (openDialog)=\"onShowActionDialog(connection)\" />\n      </foreignObject>\n      }\n    </g>\n    }\n\n    <!-- Connection preview line -->\n    @if (state.isConnectionDragging()) {\n    <g>\n      <path [attr.d]=\"getConnectionPath()\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" fill=\"none\"></path>\n    </g>\n    }\n  </svg>\n\n  <div *ngIf=\"popupVisible\" [style.position]=\"'absolute'\" [style.left.px]=\"popupX\" [style.top.px]=\"popupY\">\n    <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '99' }\" [enableMouseLeave]=\"false\"\n      (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\">\n      <div dropdown-trigger style=\"display: none\">\n        <!-- Hidden trigger element -->\n      </div>\n      <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md\" dropdown-content>\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 class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n              (click)=\"createNodeConnection(type)\">\n              Create {{ type | titlecase }}\n            </button>\n          </ng-container>\n          <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n            (click)=\"hideConnectionPopup()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showStartNodeFormPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"startNodeFormPopupX\"\n    [style.top.px]=\"startNodeFormPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div class=\"mb-3\">\n            <button\n              class=\"w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              (click)=\"selectStartNodeForm(null)\">\n              Clear form selection\n            </button>\n          </div>\n          <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n            <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n              [ngClass]=\"{ 'bg-blue-50 !border-blue-500 !border-2 font-semibold': form?.Code === activeNodeForFormSelection?.stageData?.formId}\"\n              (click)=\"selectStartNodeForm(form)\">\n              {{ form.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"startNodeFormsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No forms available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <div *ngIf=\"showSubflowPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"subflowPopupX\"\n    [style.top.px]=\"subflowPopupY\">\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 class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n        style=\"background-color: white; z-index: 1000\">\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\" style=\"max-height: 192px; overflow-y: auto;\">\n          <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n            <button 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              {{ workflow.Name }}\n            </button>\n          </div>\n          <div *ngIf=\"workflowsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n            No workflows available\n          </div>\n        </div>\n      </div>\n    </verben-pop-Up>\n  </div>\n\n  <lib-conditions-popup [visible]=\"showDecisionConditionDialog\" [decisionNodeId]=\"activeDecisionNodeId\"\n    [newConnectionId]=\"activeConnectionId\" [popupX]=\"decisionConditionPopupX\" [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\" (saved)=\"onDecisionConditionSaved($event)\"></lib-conditions-popup>\n\n  <!-- <lib-decision-popup\n    [visible]=\"showConditionsDialog\"\n    [decisionNodeId]=\"activeDecisionNodeId\"\n    [popupX]=\"decisionConditionPopupX\"\n    [popupY]=\"decisionConditionPopupY\"\n    (closed)=\"onDecisionConditionCancelled()\"\n  ></lib-decision-popup> -->\n\n  <lib-stage-dialog [visible]=\"showStageDialogLocal\" [stageData]=\"activeStageData || {}\"\n    (closed)=\"onStageDialogClosed()\" (saved)=\"onStageDialogSaved($event)\"></lib-stage-dialog>\n\n  <lib-action-dialog [visible]=\"showActionDialogLocal\" [actionData]=\"activeActionData\" (closed)=\"onActionDialogClosed()\"\n    (saved)=\"onActionDialogSaved($event)\" (deleted)=\"onActionDialogDeleted($event)\"></lib-action-dialog>\n\n\n  <lib-escalation-dialog [visible]=\"showEscalationDialogLocal\" [type]=\"activeEscalationType()!\"\n    [stageCode]=\"activeStageCode() || ''\" [workflowCode]=\"state.workflow?.Code || ''\"\n    (closed)=\"onEscalationDialogClosed()\"></lib-escalation-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}.node-drag-handle{pointer-events:all;-webkit-user-select:none;user-select:none}.connection-point{cursor:crosshair}\n"] }]
         }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { selectedTool: [{
@@ -3806,12 +3806,12 @@ class SwimlaneDialogComponent {
         this.workflowName = '';
         this.searchQuery = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, isEditing: { classPropertyName: "isEditing", publicName: "isEditing", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Tags</h2>\n      <span class=\"text-xs text-[#3E3E3E]/70\"\n        >{{ this.selectedTags.length }}/{{ tags.length }}</span\n      >\n    </div>\n    <span\n      class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n      (click)=\"applySelection()\"\n      >Create</span\n    >\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <!-- <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"search\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div> -->\n\n      <verbena-input\n        [(ngModel)]=\"workflowName\"\n        [border]=\"'1px solid #9A9FBF66'\"\n        placeHolder=\"Enter Swimlane Label\"\n        [bgColor]=\"'white'\"\n      ></verbena-input>\n\n      <verben-drop-down\n        selectKey=\"Code\"\n        label=\"Tags\"\n        styleClass=\"w-full\"\n        width=\"100%\"\n        [multiselect]=\"true\"\n        placeholder=\"Select\"\n        [options]=\"tags\"\n        optionLabel=\"Name\"\n        id=\"tags\"\n        [(ngModel)]=\"selectedTags\"\n        class=\"form-control\"\n        [filter]=\"true\"\n        [filterBy]=\"'Name'\"\n        [showClear]=\"true\"\n      >\n      </verben-drop-down>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div\n    class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n  >\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button> -->\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"selectedTags.length < 1\"\n      (click)=\"applySelection()\"\n    ></verbena-button>\n\n    <verbena-button\n      *ngIf=\"isEditing\"\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      (click)=\"onDeleteSwimlane()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwimlaneDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, isEditing: { classPropertyName: "isEditing", publicName: "isEditing", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Tags</h2>\n      <span class=\"text-xs text-[var(--vbn-color-text)]/70\"\n        >{{ this.selectedTags.length }}/{{ tags.length }}</span\n      >\n    </div>\n    <span\n      class=\"font-medium cursor-pointer text-[var(--vbn-color-text)]/70\"\n      (click)=\"applySelection()\"\n      >Create</span\n    >\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <!-- <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[var(--vbn-color-primary)] outline-none\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"search\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[var(--vbn-color-primary)] outline-none\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div> -->\n\n      <verbena-input\n        [(ngModel)]=\"workflowName\"\n        [border]=\"'1px solid #9A9FBF66'\"\n        placeHolder=\"Enter Swimlane Label\"\n        [bgColor]=\"'white'\"\n      ></verbena-input>\n\n      <verben-drop-down\n        selectKey=\"Code\"\n        label=\"Tags\"\n        styleClass=\"w-full\"\n        width=\"100%\"\n        [multiselect]=\"true\"\n        placeholder=\"Select\"\n        [options]=\"tags\"\n        optionLabel=\"Name\"\n        id=\"tags\"\n        [(ngModel)]=\"selectedTags\"\n        class=\"form-control\"\n        [filter]=\"true\"\n        [filterBy]=\"'Name'\"\n        [showClear]=\"true\"\n      >\n      </verben-drop-down>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div\n    class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n  >\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button> -->\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"selectedTags.length < 1\"\n      (click)=\"applySelection()\"\n    ></verbena-button>\n\n    <verbena-button\n      *ngIf=\"isEditing\"\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      (click)=\"onDeleteSwimlane()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-swimlane-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Tags</h2>\n      <span class=\"text-xs text-[#3E3E3E]/70\"\n        >{{ this.selectedTags.length }}/{{ tags.length }}</span\n      >\n    </div>\n    <span\n      class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n      (click)=\"applySelection()\"\n      >Create</span\n    >\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <!-- <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"search\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div> -->\n\n      <verbena-input\n        [(ngModel)]=\"workflowName\"\n        [border]=\"'1px solid #9A9FBF66'\"\n        placeHolder=\"Enter Swimlane Label\"\n        [bgColor]=\"'white'\"\n      ></verbena-input>\n\n      <verben-drop-down\n        selectKey=\"Code\"\n        label=\"Tags\"\n        styleClass=\"w-full\"\n        width=\"100%\"\n        [multiselect]=\"true\"\n        placeholder=\"Select\"\n        [options]=\"tags\"\n        optionLabel=\"Name\"\n        id=\"tags\"\n        [(ngModel)]=\"selectedTags\"\n        class=\"form-control\"\n        [filter]=\"true\"\n        [filterBy]=\"'Name'\"\n        [showClear]=\"true\"\n      >\n      </verben-drop-down>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div\n    class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n  >\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button> -->\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"#FFE681\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"selectedTags.length < 1\"\n      (click)=\"applySelection()\"\n    ></verbena-button>\n\n    <verbena-button\n      *ngIf=\"isEditing\"\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      (click)=\"onDeleteSwimlane()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'lib-swimlane-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\n    class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\"\n  >\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span\n        class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"\n      ></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Tags</h2>\n      <span class=\"text-xs text-[var(--vbn-color-text)]/70\"\n        >{{ this.selectedTags.length }}/{{ tags.length }}</span\n      >\n    </div>\n    <span\n      class=\"font-medium cursor-pointer text-[var(--vbn-color-text)]/70\"\n      (click)=\"applySelection()\"\n      >Create</span\n    >\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <!-- <input\n        type=\"text\"\n        placeholder=\"Enter Name\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[var(--vbn-color-primary)] outline-none\"\n        [(ngModel)]=\"workflowName\"\n      />\n\n      <input\n        type=\"search\"\n        placeholder=\"Filter Tags\"\n        class=\"w-full px-4 py-2 rounded-lg border border-[var(--vbn-color-primary)] outline-none\"\n        [(ngModel)]=\"searchQuery\"\n      />\n    </div>\n\n    <div class=\"\">\n      <div class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n          <span class=\"text-sm\">Select All</span>\n        </label>\n      </div>\n\n      <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n        <label class=\"flex items-center\">\n          <input\n            type=\"checkbox\"\n            class=\"mr-3\"\n            [checked]=\"isTagSelected(tag.Name)\"\n            (change)=\"toggleTagSelection(tag.Name)\"\n          />\n          <span class=\"text-sm\">{{ tag.Name }}</span>\n          <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n            >(Required)</span\n          >\n        </label>\n      </div> -->\n\n      <verbena-input\n        [(ngModel)]=\"workflowName\"\n        [border]=\"'1px solid #9A9FBF66'\"\n        placeHolder=\"Enter Swimlane Label\"\n        [bgColor]=\"'white'\"\n      ></verbena-input>\n\n      <verben-drop-down\n        selectKey=\"Code\"\n        label=\"Tags\"\n        styleClass=\"w-full\"\n        width=\"100%\"\n        [multiselect]=\"true\"\n        placeholder=\"Select\"\n        [options]=\"tags\"\n        optionLabel=\"Name\"\n        id=\"tags\"\n        [(ngModel)]=\"selectedTags\"\n        class=\"form-control\"\n        [filter]=\"true\"\n        [filterBy]=\"'Name'\"\n        [showClear]=\"true\"\n      >\n      </verben-drop-down>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div\n    class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n  >\n    <!-- <button\n      class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n      (click)=\"onDialogClose($event)\"\n    >\n      Cancel\n    </button> -->\n\n    <verbena-button\n      (click)=\"onDialogClose($event)\"\n      text=\"Cancel\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n\n    <verbena-button\n      type=\"submit\"\n      text=\"Save\"\n      bgColor=\"var(--vbn-color-primary)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n      [disable]=\"selectedTags.length < 1\"\n      (click)=\"applySelection()\"\n    ></verbena-button>\n\n    <verbena-button\n      *ngIf=\"isEditing\"\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"var(--vbn-color-text-muted)\"\n      textColor=\"var(--vbn-color-on-primary)\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      (click)=\"onDeleteSwimlane()\"\n    ></verbena-button>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: SwimlaneService }], propDecorators: { visible: [{
                 type: Input
             }], isEditing: [{
@@ -3874,12 +3874,12 @@ class ActorTagsDialogComponent {
         this.selectedTag = null;
         this.isViewOnly = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActorTagsDialogComponent, deps: [{ token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n    </div>\n    <span class=\"font-medium cursor-pointer text-[#3E3E3E]/70\" (click)=\"onSave()\">Save</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n        class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n      </verben-drop-down>\n\n      <div class=\"flex items-center gap-4 mt-4\">\n        <label for=\"is-view-only\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Is View Only?\n        </label>\n        <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'#1A237E'\"\n          [(ngModel)]=\"isViewOnly\"></verbena-switch>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActorTagsDialogComponent, deps: [{ token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n    </div>\n    <span class=\"font-medium cursor-pointer text-[var(--vbn-color-text)]/70\" (click)=\"onSave()\">Save</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n        class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n      </verben-drop-down>\n\n      <div class=\"flex items-center gap-4 mt-4\">\n        <label for=\"is-view-only\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Is View Only?\n        </label>\n        <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'var(--vbn-color-text)'\"\n          [(ngModel)]=\"isViewOnly\"></verbena-switch>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActorTagsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActorTagsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-actor-tags-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n    </div>\n    <span class=\"font-medium cursor-pointer text-[#3E3E3E]/70\" (click)=\"onSave()\">Save</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n        class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n      </verben-drop-down>\n\n      <div class=\"flex items-center gap-4 mt-4\">\n        <label for=\"is-view-only\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n          Is View Only?\n        </label>\n        <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'#1A237E'\"\n          [(ngModel)]=\"isViewOnly\"></verbena-switch>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'lib-actor-tags-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[var(--vbn-color-primary)]\">\n    <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n      <span class=\"block w-2.5 h-2.5 border-t border-l border-[var(--vbn-color-text)]/70 transform -rotate-45\"></span>\n    </button>\n    <div class=\"text-center\">\n      <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n    </div>\n    <span class=\"font-medium cursor-pointer text-[var(--vbn-color-text)]/70\" (click)=\"onSave()\">Save</span>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"p-3\">\n    <div class=\"mb-4 grid gap-4\">\n      <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n        placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n        class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n      </verben-drop-down>\n\n      <div class=\"flex items-center gap-4 mt-4\">\n        <label for=\"is-view-only\" class=\"text-sm font-semibold text-[var(--vbn-color-text)]\">\n          Is View Only?\n        </label>\n        <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'var(--vbn-color-text)'\"\n          [(ngModel)]=\"isViewOnly\"></verbena-switch>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n    <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n    <verbena-button type=\"submit\" text=\"Save\" bgColor=\"var(--vbn-color-primary)\" textColor=\"var(--vbn-color-on-primary)\" borderRadius=\"10px\" pd=\"10px 20px\"\n      width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: WorkflowDataService }, { type: i1.UtilService }], propDecorators: { visible: [{
                 type: Input
             }], workflowCode: [{
@@ -4272,12 +4272,12 @@ class WorkflowDesignerComponent {
     openActorTagsDialog() {
         this.showActorTagsDialog = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }, { token: i1.UtilService }], 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>{{ state.workflow?.Name }}</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar [selectedTool]=\"selectedTool\" [isSaving]=\"isSaving\"\n    [workflowCode]=\"state.workflow?.Code || null\" (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\" (openActorTags)=\"openActorTagsDialog()\">\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 [selectedTool]=\"selectedTool\" (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\" #canvasRef>\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog [visible]=\"showSwimlaneDialog\" [swimlaneData]=\"editingSwimlane()\"\n    [isEditing]=\"editingSwimlaneIndex !== null\" (created)=\"onSwimlaneDialogFilled($event)\"\n    (deleted)=\"onSwimlaneDialogDeleted()\" (closed)=\"showSwimlaneDialog = false\"></lib-swimlane-dialog>\n\n  <lib-actor-tags-dialog [visible]=\"showActorTagsDialog\" [workflowCode]=\"state.workflow?.Code || null\"\n    (closed)=\"showActorTagsDialog = false\"></lib-actor-tags-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;text-align:center}.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: ["selectedTool", "isSaving", "workflowCode"], outputs: ["openActorTags", "toolSelected", "saveWorkflow"] }, { kind: "component", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: ["selectedTool"], outputs: ["clickedPosition", "subflowSelected", "stagePropertiesUpdated", "actionPropertiesUpdated"] }, { kind: "component", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: ["visible", "isEditing", "swimlaneData"], outputs: ["closed", "created", "deleted"] }, { kind: "component", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: ["visible", "workflowCode"], outputs: ["closed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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>{{ state.workflow?.Name }}</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar [selectedTool]=\"selectedTool\" [isSaving]=\"isSaving\"\n    [workflowCode]=\"state.workflow?.Code || null\" (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\" (openActorTags)=\"openActorTagsDialog()\">\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 [selectedTool]=\"selectedTool\" (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\" #canvasRef>\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog [visible]=\"showSwimlaneDialog\" [swimlaneData]=\"editingSwimlane()\"\n    [isEditing]=\"editingSwimlaneIndex !== null\" (created)=\"onSwimlaneDialogFilled($event)\"\n    (deleted)=\"onSwimlaneDialogDeleted()\" (closed)=\"showSwimlaneDialog = false\"></lib-swimlane-dialog>\n\n  <lib-actor-tags-dialog [visible]=\"showActorTagsDialog\" [workflowCode]=\"state.workflow?.Code || null\"\n    (closed)=\"showActorTagsDialog = false\"></lib-actor-tags-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:var(--vbn-color-surface-alt)}.workflow-header{padding:1rem;background-color:var(--vbn-color-surface);border-bottom:1px solid var(--vbn-color-border);text-align:center}.workflow-header h1{font-size:1.25rem;font-weight:600;color:var(--vbn-color-text);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 var(--vbn-color-surface-alt);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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: ["selectedTool", "isSaving", "workflowCode"], outputs: ["openActorTags", "toolSelected", "saveWorkflow"] }, { kind: "component", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: ["selectedTool"], outputs: ["clickedPosition", "subflowSelected", "stagePropertiesUpdated", "actionPropertiesUpdated"] }, { kind: "component", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: ["visible", "isEditing", "swimlaneData"], outputs: ["closed", "created", "deleted"] }, { kind: "component", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: ["visible", "workflowCode"], outputs: ["closed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-workflow-designer', template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>{{ state.workflow?.Name }}</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar [selectedTool]=\"selectedTool\" [isSaving]=\"isSaving\"\n    [workflowCode]=\"state.workflow?.Code || null\" (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\" (openActorTags)=\"openActorTagsDialog()\">\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 [selectedTool]=\"selectedTool\" (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\" #canvasRef>\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog [visible]=\"showSwimlaneDialog\" [swimlaneData]=\"editingSwimlane()\"\n    [isEditing]=\"editingSwimlaneIndex !== null\" (created)=\"onSwimlaneDialogFilled($event)\"\n    (deleted)=\"onSwimlaneDialogDeleted()\" (closed)=\"showSwimlaneDialog = false\"></lib-swimlane-dialog>\n\n  <lib-actor-tags-dialog [visible]=\"showActorTagsDialog\" [workflowCode]=\"state.workflow?.Code || null\"\n    (closed)=\"showActorTagsDialog = false\"></lib-actor-tags-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;text-align:center}.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>{{ state.workflow?.Name }}</h1>\n  </div>\n\n  <!-- Toolbar Component -->\n  <lib-designer-toolbar [selectedTool]=\"selectedTool\" [isSaving]=\"isSaving\"\n    [workflowCode]=\"state.workflow?.Code || null\" (toolSelected)=\"onToolSelected($event)\"\n    (saveWorkflow)=\"saveWorkflow()\" (openActorTags)=\"openActorTagsDialog()\">\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 [selectedTool]=\"selectedTool\" (clickedPosition)=\"handleCanvasPositionClick($event)\"\n    (subflowSelected)=\"onSubflowSelected()\" #canvasRef>\n  </lib-designer-canvas>\n\n  <lib-swimlane-dialog [visible]=\"showSwimlaneDialog\" [swimlaneData]=\"editingSwimlane()\"\n    [isEditing]=\"editingSwimlaneIndex !== null\" (created)=\"onSwimlaneDialogFilled($event)\"\n    (deleted)=\"onSwimlaneDialogDeleted()\" (closed)=\"showSwimlaneDialog = false\"></lib-swimlane-dialog>\n\n  <lib-actor-tags-dialog [visible]=\"showActorTagsDialog\" [workflowCode]=\"state.workflow?.Code || null\"\n    (closed)=\"showActorTagsDialog = false\"></lib-actor-tags-dialog>\n</div>\n", styles: [".workflow-designer{display:flex;flex-direction:column;height:100vh;background-color:var(--vbn-color-surface-alt)}.workflow-header{padding:1rem;background-color:var(--vbn-color-surface);border-bottom:1px solid var(--vbn-color-border);text-align:center}.workflow-header h1{font-size:1.25rem;font-weight:600;color:var(--vbn-color-text);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 var(--vbn-color-surface-alt);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 }, { type: i1.UtilService }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvasRef']
@@ -4327,12 +4327,12 @@ class DecisionPopupComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DecisionPopupComponent, selector: "lib-decision-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DecisionPopupComponent, selector: "lib-decision-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:var(--vbn-color-surface-alt)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DecisionPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-decision-popup', template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"] }]
+            args: [{ selector: 'lib-decision-popup', template: "<div\n  *ngIf=\"visible\"\n  [style.position]=\"'absolute'\"\n  [style.left.px]=\"popupX\"\n  [style.top.px]=\"popupY\"\n  class=\"decision-conditions-popup\"\n>\n  <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n    <div dropdown-trigger style=\"display: none\">\n      <!-- Hidden trigger element -->\n    </div>\n    <div\n      class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n      dropdown-content\n    >\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n        <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for (condition of getConnectionConditions(); track\n        condition.connectionId) {\n        <div class=\"p-3 border rounded\">\n          <div class=\"mb-2\">\n            <span class=\"font-medium\">Action {{ $index + 1 }}:</span>\n          </div>\n          <div class=\"flex items-center\">\n            <input\n              type=\"text\"\n              [value]=\"condition.condition\"\n              readonly\n              class=\"w-full px-3 py-2 bg-gray-50 border rounded\"\n              placeholder=\"No condition\"\n            />\n            <span class=\"ml-2\">&gt;</span>\n          </div>\n          <div class=\"mt-1 text-xs text-gray-500\">\n            {{ getTargetNodeName(condition.targetNodeId) }}\n          </div>\n        </div>\n        }\n      </div>\n\n      @if (getConnectionConditions().length === 0) {\n      <div class=\"text-center py-3 text-gray-500\">\n        No conditions defined for this decision node\n      </div>\n      } @if (showDuration) {\n      <div class=\"mt-4 pt-3 border-t border-gray-200\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Duration:</span>\n          <span class=\"ml-2\">{{ getDuration() }} days</span>\n        </div>\n      </div>\n      }\n    </div>\n  </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:var(--vbn-color-surface-alt)}\n"] }]
         }], ctorParameters: () => [{ type: WorkflowDesignerState }], propDecorators: { visible: [{
                 type: Input
             }], decisionNodeId: [{
@@ -4553,10 +4553,10 @@ class ConnectionService {
     getConnectionDragData() {
         return this.draggingConnectionData;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService, deps: [{ token: WorkflowDesignerState }, { token: NodeManagementService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionService, deps: [{ token: WorkflowDesignerState }, { token: NodeManagementService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConnectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4806,10 +4806,10 @@ class TransformerService {
     getCodeForObject(id) {
         return this.loadedObjectIds[id] || '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, deps: [{ token: WorkflowDesignerState }, { token: SwimlaneService }, { token: NodeManagementService }, { token: ConnectionService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransformerService, deps: [{ token: WorkflowDesignerState }, { token: SwimlaneService }, { token: NodeManagementService }, { token: ConnectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransformerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TransformerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransformerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4817,8 +4817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: SwimlaneService }, { type: NodeManagementService }, { type: ConnectionService }] });
 
 class WorkflowDesignerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, declarations: [WorkflowDesignerComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerModule, declarations: [WorkflowDesignerComponent,
             DesignerToolbarComponent,
             DesignerCanvasComponent,
             SwimlaneDialogComponent,
@@ -4840,7 +4840,7 @@ class WorkflowDesignerModule {
             VerbenaInputModule,
             VerbenaSwitchModule,
             VerbenaTextareaModule], exports: [WorkflowDesignerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerModule, providers: [
             NodeManagementService,
             ConnectionService,
             SwimlaneService,
@@ -4859,7 +4859,7 @@ class WorkflowDesignerModule {
             VerbenaSwitchModule,
             VerbenaTextareaModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkflowDesignerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [