verben-workflow-ui 0.5.76 → 0.5.78

package/esm2022/src/lib/components/workflow-designer/conditions-popup/conditions-popup.component.mjs

@@ -52,10 +52,10 @@ export class ConditionsPopupComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: i1.WorkflowDesignerState }], propDecorators: { visible: [{

package/esm2022/src/lib/components/workflow-designer/decision-popup/decision-popup.component.mjs

@@ -45,12 +45,12 @@ export class DecisionPopupComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i1.WorkflowDesignerState }], propDecorators: { visible: [{
                 type: Input
             }], decisionNodeId: [{

package/esm2022/src/lib/components/workflow-designer/designer-canvas/designer-canvas.component.mjs

@@ -1200,10 +1200,10 @@ export class DesignerCanvasComponent {
             return conn;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, deps: [{ token: i1.WorkflowDesignerState }, { token: i2.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: i4.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: i6.StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: i7.StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: i8.ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: i9.EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: i10.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: i1.WorkflowDesignerState }, { token: i2.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: i4.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: i6.StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: i7.StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: i8.ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: i9.EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: i10.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: i1.WorkflowDesignerState }, { type: i2.WorkflowDataService }], propDecorators: { selectedTool: [{

package/esm2022/src/lib/components/workflow-designer/designer-toolbar/designer-toolbar.component.mjs

@@ -61,12 +61,12 @@ export class DesignerToolbarComponent {
     onActorTagsClick() {
         this.openActorTags.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: i1.NodeManagementService }, { token: i2.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: i4.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: i1.NodeManagementService }, { token: i2.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: i4.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: i1.NodeManagementService }, { type: i2.SwimlaneService }], propDecorators: { selectedTool: [{
                 type: Input
             }], isSaving: [{
@@ -80,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], saveWorkflow: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4td29ya2Zsb3ctdWkvc3JjL2xpYi9jb21wb25lbnRzL3dvcmtmbG93LWRlc2lnbmVyL2Rlc2lnbmVyLXRvb2xiYXIvZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4td29ya2Zsb3ctdWkvc3JjL2xpYi9jb21wb25lbnRzL3dvcmtmbG93LWRlc2lnbmVyL2Rlc2lnbmVyLXRvb2xiYXIvZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFXdkUsTUFBTSxPQUFPLHdCQUF3QjtJQW1CekI7SUFDQTtJQW5CRCxZQUFZLEdBQWEsSUFBSSxDQUFDO0lBQzlCLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFDMUIsWUFBWSxHQUFrQixJQUFJLENBQUM7SUFDbEMsYUFBYSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFDekMsWUFBWSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7SUFDNUMsWUFBWSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFbEQsZ0NBQWdDO0lBQ2hDLFlBQVksR0FBa0I7UUFDNUIsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUU7UUFDckMsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7UUFDL0IscUNBQXFDO1FBQ3JDLGlDQUFpQztRQUNqQyxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRTtRQUNyQyx1Q0FBdUM7S0FDeEMsQ0FBQztJQUVGLFlBQ1UsV0FBa0MsRUFDbEMsZUFBZ0M7UUFEaEMsZ0JBQVcsR0FBWCxXQUFXLENBQXVCO1FBQ2xDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtJQUN0QyxDQUFDO0lBRUw7O09BRUc7SUFDSCxXQUFXLENBQUMsSUFBYztRQUN4QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxTQUFTLENBQUMsSUFBYztRQUN0QixRQUFRLElBQUksRUFBRSxDQUFDO1lBQ2IsS0FBSyxVQUFVO2dCQUNiLE9BQU8sSUFBSSxDQUFDLENBQUMsaUJBQWlCO1lBQ2hDLEtBQUssT0FBTyxDQUFDO1lBQ2IsS0FBSyxVQUFVO2dCQUNiLDJDQUEyQztnQkFDM0MsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDeEQsS0FBSyxNQUFNLENBQUM7WUFDWixLQUFLLFFBQVEsQ0FBQztZQUNkLEtBQUssU0FBUztnQkFDWixrREFBa0Q7Z0JBQ2xELE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxZQUFZLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDN0M7Z0JBQ0UsT0FBTyxLQUFLLENBQUM7UUFDakIsQ0FBQztJQUNILENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzVCLENBQUM7d0dBNURVLHdCQUF3Qjs0RkFBeEIsd0JBQXdCLG1RQ1hyQyxxdkNBaURBOzs0RkR0Q2Esd0JBQXdCO2tCQUxwQyxTQUFTOytCQUNFLHNCQUFzQjt3SEFLdkIsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxZQUFZO3NCQUFyQixNQUFNO2dCQUNHLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTm9kZU1hbmFnZW1lbnRTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvbm9kZS1tYW5hZ2VtZW50LnNlcnZpY2UnO1xuaW1wb3J0IHsgU3dpbWxhbmVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvc3dpbWxhbmUuc2VydmljZSc7XG5pbXBvcnQgeyBUb29sVHlwZSB9IGZyb20gJy4uL3dvcmtmbG93LWRlc2lnbmVyLnR5cGVzJztcbmltcG9ydCB7IFRvb2xiYXJJdGVtIH0gZnJvbSAnLi9kZXNpZ25lci10b29sYmFyLnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWRlc2lnbmVyLXRvb2xiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9kZXNpZ25lci10b29sYmFyLmNvbXBvbmVudC5jc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBEZXNpZ25lclRvb2xiYXJDb21wb25lbnQge1xuICBASW5wdXQoKSBzZWxlY3RlZFRvb2w6IFRvb2xUeXBlID0gbnVsbDtcbiAgQElucHV0KCkgaXNTYXZpbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgd29ya2Zsb3dDb2RlOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgQE91dHB1dCgpIG9wZW5BY3RvclRhZ3MgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSB0b29sU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPFRvb2xUeXBlPigpO1xuICBAT3V0cHV0KCkgc2F2ZVdvcmtmbG93ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIC8vIFNpbXBsZSBhcnJheSBvZiB0b29sYmFyIGl0ZW1zXG4gIHRvb2xiYXJJdGVtczogVG9vbGJhckl0ZW1bXSA9IFtcbiAgICB7IGlkOiAnc3dpbWxhbmUnLCBsYWJlbDogJ1N3aW1sYW5lJyB9LFxuICAgIHsgaWQ6ICdzdGFnZScsIGxhYmVsOiAnU3RhZ2UnIH0sXG4gICAgLy8geyBpZDogJ2FjdGlvbicsIGxhYmVsOiAnQWN0aW9uJyB9LFxuICAgIC8vIHsgaWQ6ICdmb3JtJywgbGFiZWw6ICdGb3JtJyB9LFxuICAgIHsgaWQ6ICdkZWNpc2lvbicsIGxhYmVsOiAnRGVjaXNpb24nIH0sXG4gICAgLy8geyBpZDogJ3N1YmZsb3cnLCBsYWJlbDogJ1N1YmZsb3cnIH0sXG4gIF07XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBub2RlU2VydmljZTogTm9kZU1hbmFnZW1lbnRTZXJ2aWNlLFxuICAgIHByaXZhdGUgc3dpbWxhbmVTZXJ2aWNlOiBTd2ltbGFuZVNlcnZpY2VcbiAgKSB7IH1cblxuICAvKipcbiAgICogSGFuZGxlIHRvb2wgYnV0dG9uIGNsaWNrXG4gICAqL1xuICBvblRvb2xDbGljayh0b29sOiBUb29sVHlwZSk6IHZvaWQge1xuICAgIHRoaXMudG9vbFNlbGVjdGVkLmVtaXQodG9vbCk7XG4gIH1cblxuICAvKipcbiAgICogQ2hlY2sgaWYgYSB0b29sIHNob3VsZCBiZSBlbmFibGVkXG4gICAqL1xuICBpc0VuYWJsZWQodHlwZTogVG9vbFR5cGUpOiBib29sZWFuIHtcbiAgICBzd2l0Y2ggKHR5cGUpIHtcbiAgICAgIGNhc2UgJ3N3aW1sYW5lJzpcbiAgICAgICAgcmV0dXJuIHRydWU7IC8vIEFsd2F5cyBlbmFibGVkXG4gICAgICBjYXNlICdzdGFnZSc6XG4gICAgICBjYXNlICdkZWNpc2lvbic6XG4gICAgICAgIC8vIEVuYWJsZWQgaWYgdGhlcmUgYXJlIHN3aW1sYW5lcyBhdmFpbGFibGVcbiAgICAgICAgcmV0dXJuIHRoaXMuc3dpbWxhbmVTZXJ2aWNlLmdldFN3aW1sYW5lcygpLmxlbmd0aCA+IDA7XG4gICAgICBjYXNlICdmb3JtJzpcbiAgICAgIGNhc2UgJ2FjdGlvbic6XG4gICAgICBjYXNlICdzdWJmbG93JzpcbiAgICAgICAgLy8gT25seSBlbmFibGVkIGlmIHRoZXJlIGFyZSBub2RlcyBpbiB0aGUgd29ya2Zsb3dcbiAgICAgICAgcmV0dXJuIHRoaXMubm9kZVNlcnZpY2UuZ2V0Tm9kZUNvdW50KCkgPiAwO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBIYW5kbGUgc2F2ZSBidXR0b24gY2xpY2tcbiAgICovXG4gIG9uU2F2ZUNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuc2F2ZVdvcmtmbG93LmVtaXQoKTtcbiAgfVxuXG4gIG9uQWN0b3JUYWdzQ2xpY2soKTogdm9pZCB7XG4gICAgdGhpcy5vcGVuQWN0b3JUYWdzLmVtaXQoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImRlc2lnbmVyLXRvb2xiYXJcIj5cbiAgPGRpdiBjbGFzcz1cInRvb2xiYXItY29udGFpbmVyXCI+XG4gICAgPGJ1dHRvblxuICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgdG9vbGJhckl0ZW1zXCJcbiAgICAgIGNsYXNzPVwidG9vbC1idXR0b25cIlxuICAgICAgW2NsYXNzLmFjdGl2ZV09XCJzZWxlY3RlZFRvb2wgPT09IGl0ZW0uaWRcIlxuICAgICAgW2NsYXNzLmRpc2FibGVkXT1cIiFpc0VuYWJsZWQoaXRlbS5pZClcIlxuICAgICAgKGNsaWNrKT1cIm9uVG9vbENsaWNrKGl0ZW0uaWQpXCJcbiAgICAgIFt0aXRsZV09XCJpdGVtLmxhYmVsXCJcbiAgICAgIFtkaXNhYmxlZF09XCIhaXNFbmFibGVkKGl0ZW0uaWQpXCJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDYwcHg7IGhlaWdodDogYXV0b1wiXG4gICAgPlxuICAgICAgPCEtLSB7eyBpdGVtLmxhYmVsIH19IC0tPlxuICAgICAgPGltZ1xuICAgICAgICBbc3JjXT1cIidpY29ucy8nICsgaXRlbS5pZCArICcuc3ZnJ1wiXG4gICAgICAgIFthbHRdPVwiaXRlbS5sYWJlbFwiXG4gICAgICAgIGNsYXNzPVwidG9vbC1pY29uXCJcbiAgICAgIC8+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuXG4gIDx2ZXJiZW5hLWJ1dHRvblxuICAgICpuZ0lmPVwid29ya2Zsb3dDb2RlXCJcbiAgICBidXR0b25DbGFzcz1cImFjdG9yLXRhZ3MtYnV0dG9uXCJcbiAgICAoY2xpY2spPVwib25BY3RvclRhZ3NDbGljaygpXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICB0ZXh0PVwiKyBBY3RvciBUYWdzXCJcbiAgICBiZ0NvbG9yPVwiI0ZGRTY4MVwiXG4gICAgdGV4dENvbG9yPVwiIzQwNDA0MFwiXG4gICAgYm9yZGVyUmFkaXVzPVwiMTBweFwiXG4gICAgcGQ9XCIxMHB4IDIwcHhcIlxuICAgIGhlaWdodD1cIjM5cHhcIlxuICAgIGNsYXNzPVwibWwtMlwiXG4gID48L3ZlcmJlbmEtYnV0dG9uPlxuXG4gIDx2ZXJiZW5hLWJ1dHRvblxuICAgIGJ1dHRvbkNsYXNzPVwic2F2ZS1idXR0b25cIlxuICAgIChjbGljayk9XCJvblNhdmVDbGljaygpXCJcbiAgICBbaXNMb2FkaW5nXT1cImlzU2F2aW5nXCJcbiAgICB0eXBlPVwic3VibWl0XCJcbiAgICB0ZXh0PVwiU2F2ZVwiXG4gICAgYmdDb2xvcj1cIiNGRkU2ODFcIlxuICAgIHRleHRDb2xvcj1cIiM0MDQwNDBcIlxuICAgIGJvcmRlclJhZGl1cz1cIjEwcHhcIlxuICAgIHBkPVwiMTBweCAyMHB4XCJcbiAgICB3aWR0aD1cIjExNHB4XCJcbiAgICBoZWlnaHQ9XCIzOXB4XCJcbiAgPjwvdmVyYmVuYS1idXR0b24+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4td29ya2Zsb3ctdWkvc3JjL2xpYi9jb21wb25lbnRzL3dvcmtmbG93LWRlc2lnbmVyL2Rlc2lnbmVyLXRvb2xiYXIvZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4td29ya2Zsb3ctdWkvc3JjL2xpYi9jb21wb25lbnRzL3dvcmtmbG93LWRlc2lnbmVyL2Rlc2lnbmVyLXRvb2xiYXIvZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFXdkUsTUFBTSxPQUFPLHdCQUF3QjtJQW1CekI7SUFDQTtJQW5CRCxZQUFZLEdBQWEsSUFBSSxDQUFDO0lBQzlCLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFDMUIsWUFBWSxHQUFrQixJQUFJLENBQUM7SUFDbEMsYUFBYSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFDekMsWUFBWSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7SUFDNUMsWUFBWSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFbEQsZ0NBQWdDO0lBQ2hDLFlBQVksR0FBa0I7UUFDNUIsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUU7UUFDckMsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7UUFDL0IscUNBQXFDO1FBQ3JDLGlDQUFpQztRQUNqQyxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRTtRQUNyQyx1Q0FBdUM7S0FDeEMsQ0FBQztJQUVGLFlBQ1UsV0FBa0MsRUFDbEMsZUFBZ0M7UUFEaEMsZ0JBQVcsR0FBWCxXQUFXLENBQXVCO1FBQ2xDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtJQUN0QyxDQUFDO0lBRUw7O09BRUc7SUFDSCxXQUFXLENBQUMsSUFBYztRQUN4QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxTQUFTLENBQUMsSUFBYztRQUN0QixRQUFRLElBQUksRUFBRSxDQUFDO1lBQ2IsS0FBSyxVQUFVO2dCQUNiLE9BQU8sSUFBSSxDQUFDLENBQUMsaUJBQWlCO1lBQ2hDLEtBQUssT0FBTyxDQUFDO1lBQ2IsS0FBSyxVQUFVO2dCQUNiLDJDQUEyQztnQkFDM0MsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDeEQsS0FBSyxNQUFNLENBQUM7WUFDWixLQUFLLFFBQVEsQ0FBQztZQUNkLEtBQUssU0FBUztnQkFDWixrREFBa0Q7Z0JBQ2xELE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxZQUFZLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDN0M7Z0JBQ0UsT0FBTyxLQUFLLENBQUM7UUFDakIsQ0FBQztJQUNILENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzVCLENBQUM7d0dBNURVLHdCQUF3Qjs0RkFBeEIsd0JBQXdCLG1RQ1hyQywrekNBaURBOzs0RkR0Q2Esd0JBQXdCO2tCQUxwQyxTQUFTOytCQUNFLHNCQUFzQjt3SEFLdkIsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxZQUFZO3NCQUFyQixNQUFNO2dCQUNHLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTm9kZU1hbmFnZW1lbnRTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvbm9kZS1tYW5hZ2VtZW50LnNlcnZpY2UnO1xuaW1wb3J0IHsgU3dpbWxhbmVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvc3dpbWxhbmUuc2VydmljZSc7XG5pbXBvcnQgeyBUb29sVHlwZSB9IGZyb20gJy4uL3dvcmtmbG93LWRlc2lnbmVyLnR5cGVzJztcbmltcG9ydCB7IFRvb2xiYXJJdGVtIH0gZnJvbSAnLi9kZXNpZ25lci10b29sYmFyLnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWRlc2lnbmVyLXRvb2xiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVzaWduZXItdG9vbGJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9kZXNpZ25lci10b29sYmFyLmNvbXBvbmVudC5jc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBEZXNpZ25lclRvb2xiYXJDb21wb25lbnQge1xuICBASW5wdXQoKSBzZWxlY3RlZFRvb2w6IFRvb2xUeXBlID0gbnVsbDtcbiAgQElucHV0KCkgaXNTYXZpbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgd29ya2Zsb3dDb2RlOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgQE91dHB1dCgpIG9wZW5BY3RvclRhZ3MgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSB0b29sU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPFRvb2xUeXBlPigpO1xuICBAT3V0cHV0KCkgc2F2ZVdvcmtmbG93ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIC8vIFNpbXBsZSBhcnJheSBvZiB0b29sYmFyIGl0ZW1zXG4gIHRvb2xiYXJJdGVtczogVG9vbGJhckl0ZW1bXSA9IFtcbiAgICB7IGlkOiAnc3dpbWxhbmUnLCBsYWJlbDogJ1N3aW1sYW5lJyB9LFxuICAgIHsgaWQ6ICdzdGFnZScsIGxhYmVsOiAnU3RhZ2UnIH0sXG4gICAgLy8geyBpZDogJ2FjdGlvbicsIGxhYmVsOiAnQWN0aW9uJyB9LFxuICAgIC8vIHsgaWQ6ICdmb3JtJywgbGFiZWw6ICdGb3JtJyB9LFxuICAgIHsgaWQ6ICdkZWNpc2lvbicsIGxhYmVsOiAnRGVjaXNpb24nIH0sXG4gICAgLy8geyBpZDogJ3N1YmZsb3cnLCBsYWJlbDogJ1N1YmZsb3cnIH0sXG4gIF07XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBub2RlU2VydmljZTogTm9kZU1hbmFnZW1lbnRTZXJ2aWNlLFxuICAgIHByaXZhdGUgc3dpbWxhbmVTZXJ2aWNlOiBTd2ltbGFuZVNlcnZpY2VcbiAgKSB7IH1cblxuICAvKipcbiAgICogSGFuZGxlIHRvb2wgYnV0dG9uIGNsaWNrXG4gICAqL1xuICBvblRvb2xDbGljayh0b29sOiBUb29sVHlwZSk6IHZvaWQge1xuICAgIHRoaXMudG9vbFNlbGVjdGVkLmVtaXQodG9vbCk7XG4gIH1cblxuICAvKipcbiAgICogQ2hlY2sgaWYgYSB0b29sIHNob3VsZCBiZSBlbmFibGVkXG4gICAqL1xuICBpc0VuYWJsZWQodHlwZTogVG9vbFR5cGUpOiBib29sZWFuIHtcbiAgICBzd2l0Y2ggKHR5cGUpIHtcbiAgICAgIGNhc2UgJ3N3aW1sYW5lJzpcbiAgICAgICAgcmV0dXJuIHRydWU7IC8vIEFsd2F5cyBlbmFibGVkXG4gICAgICBjYXNlICdzdGFnZSc6XG4gICAgICBjYXNlICdkZWNpc2lvbic6XG4gICAgICAgIC8vIEVuYWJsZWQgaWYgdGhlcmUgYXJlIHN3aW1sYW5lcyBhdmFpbGFibGVcbiAgICAgICAgcmV0dXJuIHRoaXMuc3dpbWxhbmVTZXJ2aWNlLmdldFN3aW1sYW5lcygpLmxlbmd0aCA+IDA7XG4gICAgICBjYXNlICdmb3JtJzpcbiAgICAgIGNhc2UgJ2FjdGlvbic6XG4gICAgICBjYXNlICdzdWJmbG93JzpcbiAgICAgICAgLy8gT25seSBlbmFibGVkIGlmIHRoZXJlIGFyZSBub2RlcyBpbiB0aGUgd29ya2Zsb3dcbiAgICAgICAgcmV0dXJuIHRoaXMubm9kZVNlcnZpY2UuZ2V0Tm9kZUNvdW50KCkgPiAwO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBIYW5kbGUgc2F2ZSBidXR0b24gY2xpY2tcbiAgICovXG4gIG9uU2F2ZUNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuc2F2ZVdvcmtmbG93LmVtaXQoKTtcbiAgfVxuXG4gIG9uQWN0b3JUYWdzQ2xpY2soKTogdm9pZCB7XG4gICAgdGhpcy5vcGVuQWN0b3JUYWdzLmVtaXQoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImRlc2lnbmVyLXRvb2xiYXJcIj5cbiAgPGRpdiBjbGFzcz1cInRvb2xiYXItY29udGFpbmVyXCI+XG4gICAgPGJ1dHRvblxuICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgdG9vbGJhckl0ZW1zXCJcbiAgICAgIGNsYXNzPVwidG9vbC1idXR0b25cIlxuICAgICAgW2NsYXNzLmFjdGl2ZV09XCJzZWxlY3RlZFRvb2wgPT09IGl0ZW0uaWRcIlxuICAgICAgW2NsYXNzLmRpc2FibGVkXT1cIiFpc0VuYWJsZWQoaXRlbS5pZClcIlxuICAgICAgKGNsaWNrKT1cIm9uVG9vbENsaWNrKGl0ZW0uaWQpXCJcbiAgICAgIFt0aXRsZV09XCJpdGVtLmxhYmVsXCJcbiAgICAgIFtkaXNhYmxlZF09XCIhaXNFbmFibGVkKGl0ZW0uaWQpXCJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDYwcHg7IGhlaWdodDogYXV0b1wiXG4gICAgPlxuICAgICAgPCEtLSB7eyBpdGVtLmxhYmVsIH19IC0tPlxuICAgICAgPGltZ1xuICAgICAgICBbc3JjXT1cIidpY29ucy8nICsgaXRlbS5pZCArICcuc3ZnJ1wiXG4gICAgICAgIFthbHRdPVwiaXRlbS5sYWJlbFwiXG4gICAgICAgIGNsYXNzPVwidG9vbC1pY29uXCJcbiAgICAgIC8+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuXG4gIDx2ZXJiZW5hLWJ1dHRvblxuICAgICpuZ0lmPVwid29ya2Zsb3dDb2RlXCJcbiAgICBidXR0b25DbGFzcz1cImFjdG9yLXRhZ3MtYnV0dG9uXCJcbiAgICAoY2xpY2spPVwib25BY3RvclRhZ3NDbGljaygpXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICB0ZXh0PVwiKyBBY3RvciBUYWdzXCJcbiAgICBiZ0NvbG9yPVwidmFyKC0tdmJuLWNvbG9yLXByaW1hcnkpXCJcbiAgICB0ZXh0Q29sb3I9XCJ2YXIoLS12Ym4tY29sb3Itb24tcHJpbWFyeSlcIlxuICAgIGJvcmRlclJhZGl1cz1cIjEwcHhcIlxuICAgIHBkPVwiMTBweCAyMHB4XCJcbiAgICBoZWlnaHQ9XCIzOXB4XCJcbiAgICBjbGFzcz1cIm1sLTJcIlxuICA+PC92ZXJiZW5hLWJ1dHRvbj5cblxuICA8dmVyYmVuYS1idXR0b25cbiAgICBidXR0b25DbGFzcz1cInNhdmUtYnV0dG9uXCJcbiAgICAoY2xpY2spPVwib25TYXZlQ2xpY2soKVwiXG4gICAgW2lzTG9hZGluZ109XCJpc1NhdmluZ1wiXG4gICAgdHlwZT1cInN1Ym1pdFwiXG4gICAgdGV4dD1cIlNhdmVcIlxuICAgIGJnQ29sb3I9XCJ2YXIoLS12Ym4tY29sb3ItcHJpbWFyeSlcIlxuICAgIHRleHRDb2xvcj1cInZhcigtLXZibi1jb2xvci1vbi1wcmltYXJ5KVwiXG4gICAgYm9yZGVyUmFkaXVzPVwiMTBweFwiXG4gICAgcGQ9XCIxMHB4IDIwcHhcIlxuICAgIHdpZHRoPVwiMTE0cHhcIlxuICAgIGhlaWdodD1cIjM5cHhcIlxuICA+PC92ZXJiZW5hLWJ1dHRvbj5cbjwvZGl2PlxuIl19