verben-workflow-ui 0.5.72 → 0.5.73

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

@@ -365,6 +365,43 @@ class WorkflowDesignerState {
         const sourceNodeType = sourceNodeInfo.node.type;
         return this.connectionRules[sourceNodeType] || [];
     }
+    /**
+     * Deletes a swimlane. Only succeeds when the lane has no nodes — stages must
+     * be moved to another lane first. Returns false when the lane still has nodes
+     * or the index is out of range.
+     *
+     * Keeps everything aligned after removal:
+     * - Re-sequences `order` on the remaining lanes (immutable reassignment so
+     *   Angular's @for blocks re-render).
+     * - Decrements the swimlane indices stored on connections whose endpoints
+     *   live below the removed lane, since those lanes shift up by one.
+     *
+     * The lane's original record is left in `swimlaneRecord`, so a previously
+     * loaded lane is emitted with `ObjectState.Removed` by
+     * `transformToWorkflowModel`; a never-saved lane simply disappears.
+     */
+    deleteSwimlane(index) {
+        if (index < 0 || index >= this.swimlanes.length) {
+            return false;
+        }
+        if (this.swimlanes[index].nodes?.length) {
+            console.warn('Cannot delete a swimlane that still has stages; move them out first.');
+            return false;
+        }
+        this.swimlanes = this.swimlanes
+            .filter((_, i) => i !== index)
+            .map((lane, i) => ({ ...lane, order: i }));
+        this.connections = this.connections.map((conn) => ({
+            ...conn,
+            sourceSwimlaneIndex: conn.sourceSwimlaneIndex > index
+                ? conn.sourceSwimlaneIndex - 1
+                : conn.sourceSwimlaneIndex,
+            targetSwimlaneIndex: conn.targetSwimlaneIndex > index
+                ? conn.targetSwimlaneIndex - 1
+                : conn.targetSwimlaneIndex,
+        }));
+        return true;
+    }
     updateSwimlane(index, name, tags) {
         console.log('State: Updating swimlane at index', index, 'with name', name, 'and tags', tags);
         if (index >= 0 && index < this.swimlanes.length) {
@@ -770,6 +807,10 @@ class WorkflowDataService {
         const url = `DeleteWorkflowAction`;
         return this.httpService.post(url, requests, this.envSvc.environment.WorkFlowAPI);
     }
+    deleteSwimLanes(requests) {
+        const url = `DeleteSwimLane`;
+        return this.httpService.post(url, requests, this.envSvc.environment.WorkFlowAPI);
+    }
     saveEscalations(requests) {
         const url = `SaveEscalations`;
         // console.log('Saving workflows', requests);
@@ -2531,7 +2572,14 @@ class DesignerCanvasComponent {
         const nodeInfo = this.state.findNodeById(stageId);
         if (nodeInfo) {
             this.activeStageId = stageId;
-            this.activeStageData = { ...nodeInfo.node.stageData, id: stageId };
+            // Seed the entry-point toggle from the node's actual start state, which is
+            // the source of truth for the start circle and API serialization. The
+            // auto-assigned entry node has isStartNode=true without stageData.IsEntryPoint.
+            this.activeStageData = {
+                ...nodeInfo.node.stageData,
+                IsEntryPoint: nodeInfo.node.isStartNode,
+                id: stageId,
+            };
             console.log(this.activeStageData, "ACTIVE STAGE DATA");
             this.showStageDialogLocal = true;
         }
@@ -2599,6 +2647,23 @@ class DesignerCanvasComponent {
                     ...stageData,
                 };
                 console.log('Updated stage data:', nodeInfo.node.stageData);
+                // Sync the entry-point flag onto node.isStartNode, which drives both the
+                // start circle and the IsEntryPoint value serialized to the API.
+                if (stageData.IsEntryPoint) {
+                    // Enforce a single entry point: this node becomes the sole start node.
+                    this.state.swimlanes.forEach((swimlane) => {
+                        swimlane.nodes?.forEach((node) => {
+                            node.isStartNode = node.id === this.activeStageId;
+                        });
+                    });
+                    this.state.startNodeId = this.activeStageId;
+                }
+                else {
+                    nodeInfo.node.isStartNode = false;
+                    if (this.state.startNodeId === this.activeStageId) {
+                        this.state.startNodeId = null;
+                    }
+                }
                 // Emit event for parent component to know about the update
                 this.stagePropertiesUpdated.emit({
                     nodeId: this.activeStageId,
@@ -3622,9 +3687,11 @@ class SwimlaneDialogComponent {
     dataService;
     swimlaneService;
     visible = false;
+    isEditing = false;
     swimlaneData = input(null);
     closed = new EventEmitter();
     created = new EventEmitter();
+    deleted = new EventEmitter();
     searchQuery = '';
     workflowName = '';
     // Track selected tags in a separate array
@@ -3692,6 +3759,9 @@ class SwimlaneDialogComponent {
             this.selectedTagNames.push(tagName);
         }
     }
+    onDeleteSwimlane() {
+        this.deleted.emit();
+    }
     onDialogClose(eventData) {
         console.log('Dialog closed, received data:', eventData);
         this.searchQuery = '';
@@ -3719,17 +3789,21 @@ class SwimlaneDialogComponent {
         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 }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\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      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\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.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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-swimlane-dialog', template: "<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'drawer'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"visible\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  (openModal)=\"onDialogOpen($event)\"\n  (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n  <div\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      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      bgColor=\"#999999\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\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-[#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" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: SwimlaneService }], propDecorators: { visible: [{
                 type: Input
+            }], isEditing: [{
+                type: Input
             }], closed: [{
                 type: Output
             }], created: [{
                 type: Output
+            }], deleted: [{
+                type: Output
             }] } });
 
 class ActorTagsDialogComponent {
@@ -4131,6 +4205,48 @@ class WorkflowDesignerComponent {
         this.showSwimlaneDialog = false;
         this.editingSwimlaneIndex = null;
     }
+    onSwimlaneDialogDeleted() {
+        if (this.editingSwimlaneIndex === null) {
+            return;
+        }
+        const index = this.editingSwimlaneIndex;
+        const swimlane = this.state.swimlanes[index];
+        // Guard: stages must be moved out first (also enforced in state.deleteSwimlane).
+        if (swimlane?.nodes?.length) {
+            this.utilService.showError('Move all stages out of this swimlane before deleting it.');
+            return;
+        }
+        // A loaded lane keeps its backend Code in swimlaneRecord (keyed by id/Code).
+        const backendRecord = swimlane?.id
+            ? this.state.swimlaneRecord[swimlane.id]
+            : undefined;
+        if (backendRecord?.Code) {
+            // Path A: backend-persisted lane — delete on the server first.
+            this.dataService
+                .deleteSwimLanes([backendRecord.Code])
+                .then(() => {
+                this.finishSwimlaneDelete(index);
+            })
+                .catch((error) => {
+                console.error('Error deleting swimlane:', error);
+                this.utilService.showError('Failed to delete swimlane');
+            });
+        }
+        else {
+            // Path B: never-saved lane — remove from state directly, no API call.
+            this.finishSwimlaneDelete(index);
+        }
+    }
+    finishSwimlaneDelete(index) {
+        const deleted = this.state.deleteSwimlane(index);
+        if (!deleted) {
+            this.utilService.showError('Move all stages out of this swimlane before deleting it.');
+            return;
+        }
+        this.showSwimlaneDialog = false;
+        this.editingSwimlaneIndex = null;
+        this.canvasRef?.updateCanvasSize();
+    }
     onSubflowSelected() {
         // Reset the selected tool after placing a subflow node
         this.selectedTool = null;
@@ -4139,11 +4255,11 @@ class WorkflowDesignerComponent {
         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    (created)=\"onSwimlaneDialogFilled($event)\" (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", "swimlaneData"], outputs: ["closed", "created"] }, { kind: "component", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: ["visible", "workflowCode"], outputs: ["closed"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-workflow-designer', template: "<div class=\"workflow-designer\">\n  <div class=\"workflow-header\">\n    <h1>{{ 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    (created)=\"onSwimlaneDialogFilled($event)\" (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:#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"] }]
         }], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }, { type: i1.UtilService }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvasRef']