verben-workflow-ui 0.5.48 → 0.5.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/lib/components/workflow-designer/designer-canvas/designer-canvas.component.mjs +3 -3
- package/esm2022/src/lib/components/workflow-designer/escalation-dialog/escalation-dialog.component.mjs +31 -13
- package/esm2022/src/lib/components/workflow-designer/workflow-data.service.mjs +6 -1
- package/esm2022/src/lib/components/workflows/workflow-form/workflow-form.component.mjs +3 -3
- package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs +43 -21
- package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs.map +1 -1
- package/fesm2022/verben-workflow-ui-src-lib-components-workflows.mjs +2 -2
- package/fesm2022/verben-workflow-ui-src-lib-components-workflows.mjs.map +1 -1
- package/package.json +46 -46
- package/src/lib/components/workflow-designer/escalation-dialog/escalation-dialog.component.d.ts +5 -1
- package/src/lib/components/workflow-designer/workflow-data.service.d.ts +2 -1
- package/styles/styles.css +3 -0
|
@@ -4,14 +4,14 @@ import { ObjectState, TaskAssignmentType, Status, StageActorRule, EscalationType
|
|
|
4
4
|
import * as i1 from 'verben-workflow-ui/src/lib/services';
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i3$1 from 'verben-ng-ui';
|
|
8
8
|
import { VerbenDialogueModule, VerbenPopUpModule, VerbenaButtonModule, DropDownModule, VerbenaInputModule, VerbenaSwitchModule } from 'verben-ng-ui';
|
|
9
|
-
import * as i5
|
|
9
|
+
import * as i5 from 'verben-workflow-ui/src/lib/components/designer';
|
|
10
10
|
import { LabelEditorComponent } from 'verben-workflow-ui/src/lib/components/designer';
|
|
11
11
|
import * as i1$1 from '@angular/forms';
|
|
12
12
|
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
13
13
|
import { BehaviorSubject } from 'rxjs';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i6 from 'verben-reporting-ui';
|
|
15
15
|
import { EditorMode, EditorModule } from 'verben-reporting-ui';
|
|
16
16
|
|
|
17
17
|
class WorkflowDesignerState {
|
|
@@ -729,6 +729,11 @@ class WorkflowDataService {
|
|
|
729
729
|
// console.log('Saving workflows', requests);
|
|
730
730
|
return this.httpService.post(url, requests, this.envSvc.environment.WorkFlowAPI);
|
|
731
731
|
}
|
|
732
|
+
deleteEscalations(requests) {
|
|
733
|
+
const url = `${this.ESCALATION_MODEL_BASE_PATH}/DeleteEscalation`;
|
|
734
|
+
// console.log('Saving workflows', requests);
|
|
735
|
+
return this.httpService.post(url, requests, this.envSvc.environment.WorkFlowAPI);
|
|
736
|
+
}
|
|
732
737
|
searchEscalationWithParam(params, skip = 0, limit = 1, sortOrder = 'Asc') {
|
|
733
738
|
const url = `${this.ESCALATION_MODEL_BASE_PATH}/SearchEscalations/${skip}/${limit}`;
|
|
734
739
|
const payload = Object.entries(params).map(([key, value]) => ({
|
|
@@ -1339,7 +1344,7 @@ class DesignerToolbarComponent {
|
|
|
1339
1344
|
this.openActorTags.emit();
|
|
1340
1345
|
}
|
|
1341
1346
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, deps: [{ token: NodeManagementService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1342
|
-
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:
|
|
1347
|
+
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: i3$1.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"] }] });
|
|
1343
1348
|
}
|
|
1344
1349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
|
|
1345
1350
|
type: Component,
|
|
@@ -1962,7 +1967,7 @@ class StageDialogComponent {
|
|
|
1962
1967
|
}
|
|
1963
1968
|
}
|
|
1964
1969
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: NodeManagementService }, { token: PopupService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1965
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible()\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"p-4 border-b border-gray-200\">\n <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-4\">\n <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n <!-- Stage Name -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n <input\n type=\"text\"\n formControlName=\"Name\"\n placeholder=\"Enter Stage Name\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Description -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Description</label>\n <textarea\n formControlName=\"Description\"\n placeholder=\"Enter Description\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n rows=\"3\"\n ></textarea>\n </div>\n\n <!-- Recipient Count -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n <input\n type=\"number\"\n formControlName=\"MinNoOfActor\"\n placeholder=\"Enter Count\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Pass On Rule -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n <input\n type=\"text\"\n formControlName=\"PassOnRule\"\n placeholder=\"Select Rule\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Duration -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Duration</label>\n <input\n type=\"number\"\n formControlName=\"Duration\"\n placeholder=\"Set Duration\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Actor Rule -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n <select\n formControlName=\"ActorRule\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n >\n <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n {{ rule }}\n </option>\n </select>\n </div>\n\n <!-- Assignment Type -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Assignment Type</label>\n\n <verben-drop-down\n label=\"Assignment\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select\"\n [options]=\"assignmentTypes\"\n id=\"assignment\"\n formControlName=\"AssignmentType\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Is Exit Point -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Exit Point</label>\n <div class=\"flex items-center\">\n <input\n type=\"checkbox\"\n formControlName=\"IsExitPoint\"\n [disabled]=\"hasOutgoingConnections\"\n class=\"mr-2 h-4 w-4\"\n />\n <span class=\"text-sm text-gray-600\">Mark as workflow end point</span>\n </div>\n </div>\n\n <!-- Tags -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Tags</label>\n <div\n class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n >\n <div *ngFor=\"let tag of tags\" class=\"py-1\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [checked]=\"isTagSelected(tag.Code)\"\n (change)=\"toggleTagSelection(tag.Code)\"\n class=\"mr-2\"\n />\n <span>{{ tag.Name }}</span>\n </label>\n </div>\n </div>\n </div>\n </form>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-end p-4 border-t border-gray-200\">\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveStage()\"\n [disabled]=\"stageForm.invalid\"\n >\n Save\n </button>\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"deleteStage()\"\n >\n Delete\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n class=\"ml-auto\"\n ></verbena-button>\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n (click)=\"saveStage()\"\n [disable]=\"stageForm.invalid\"\n ></verbena-button>\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteStage()\"\n ></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type:
|
|
1970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible()\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"p-4 border-b border-gray-200\">\n <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-4\">\n <form [formGroup]=\"stageForm\" class=\"space-y-4\">\n <!-- Stage Name -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Stage Name</label>\n <input\n type=\"text\"\n formControlName=\"Name\"\n placeholder=\"Enter Stage Name\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Description -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Description</label>\n <textarea\n formControlName=\"Description\"\n placeholder=\"Enter Description\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n rows=\"3\"\n ></textarea>\n </div>\n\n <!-- Recipient Count -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Recipient Count</label>\n <input\n type=\"number\"\n formControlName=\"MinNoOfActor\"\n placeholder=\"Enter Count\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Pass On Rule -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Pass On Rule</label>\n <input\n type=\"text\"\n formControlName=\"PassOnRule\"\n placeholder=\"Select Rule\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Duration -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Duration</label>\n <input\n type=\"number\"\n formControlName=\"Duration\"\n placeholder=\"Set Duration\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n />\n </div>\n\n <!-- Actor Rule -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Actor Rule</label>\n <select\n formControlName=\"ActorRule\"\n class=\"w-full px-4 py-2 rounded border border-gray-200\"\n >\n <option *ngFor=\"let rule of actorRules\" [value]=\"rule\">\n {{ rule }}\n </option>\n </select>\n </div>\n\n <!-- Assignment Type -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Assignment Type</label>\n\n <verben-drop-down\n label=\"Assignment\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select\"\n [options]=\"assignmentTypes\"\n id=\"assignment\"\n formControlName=\"AssignmentType\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Is Exit Point -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Exit Point</label>\n <div class=\"flex items-center\">\n <input\n type=\"checkbox\"\n formControlName=\"IsExitPoint\"\n [disabled]=\"hasOutgoingConnections\"\n class=\"mr-2 h-4 w-4\"\n />\n <span class=\"text-sm text-gray-600\">Mark as workflow end point</span>\n </div>\n </div>\n\n <!-- Tags -->\n <div>\n <label class=\"block text-sm font-medium mb-1\">Tags</label>\n <div\n class=\"border border-gray-200 rounded p-2 max-h-40 overflow-y-auto\"\n >\n <div *ngFor=\"let tag of tags\" class=\"py-1\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [checked]=\"isTagSelected(tag.Code)\"\n (change)=\"toggleTagSelection(tag.Code)\"\n class=\"mr-2\"\n />\n <span>{{ tag.Name }}</span>\n </label>\n </div>\n </div>\n </div>\n </form>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-end p-4 border-t border-gray-200\">\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveStage()\"\n [disabled]=\"stageForm.invalid\"\n >\n Save\n </button>\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"deleteStage()\"\n >\n Delete\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n class=\"ml-auto\"\n ></verbena-button>\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n (click)=\"saveStage()\"\n [disable]=\"stageForm.invalid\"\n ></verbena-button>\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteStage()\"\n ></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
|
|
1966
1971
|
}
|
|
1967
1972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, decorators: [{
|
|
1968
1973
|
type: Component,
|
|
@@ -2022,7 +2027,7 @@ class ConditionsPopupComponent {
|
|
|
2022
2027
|
this.closed.emit();
|
|
2023
2028
|
}
|
|
2024
2029
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
|
|
2025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [style.position]=\"'fixed'\"\n [style.left.px]=\"popupX\"\n [style.top.px]=\"popupY\"\n>\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n dropdown-content\n >\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"mb-3\">\n <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium mb-1\">Condition</label>\n <input\n type=\"text\"\n [(ngModel)]=\"currentCondition\"\n placeholder=\"e.g., order.amount > 500,000\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n />\n </div>\n\n <div\n class=\"space-y-3 max-h-60 overflow-y-auto\"\n *ngIf=\"connectionConditions.length > 1\"\n >\n <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n @for (conn of connectionConditions; track conn.connectionId) { @if\n (!conn.isActive) {\n <div class=\"border rounded p-3\">\n <div class=\"mb-2\">\n <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n </div>\n <div>\n <input\n type=\"text\"\n [value]=\"conn.condition\"\n placeholder=\"No condition\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n readonly\n />\n </div>\n </div>\n } }\n </div>\n\n <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onClose()\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveCondition()\"\n >\n Save\n </button>\n </div>\n </div>\n </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type:
|
|
2030
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [style.position]=\"'fixed'\"\n [style.left.px]=\"popupX\"\n [style.top.px]=\"popupY\"\n>\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n dropdown-content\n >\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"mb-3\">\n <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium mb-1\">Condition</label>\n <input\n type=\"text\"\n [(ngModel)]=\"currentCondition\"\n placeholder=\"e.g., order.amount > 500,000\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n />\n </div>\n\n <div\n class=\"space-y-3 max-h-60 overflow-y-auto\"\n *ngIf=\"connectionConditions.length > 1\"\n >\n <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n @for (conn of connectionConditions; track conn.connectionId) { @if\n (!conn.isActive) {\n <div class=\"border rounded p-3\">\n <div class=\"mb-2\">\n <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n </div>\n <div>\n <input\n type=\"text\"\n [value]=\"conn.condition\"\n placeholder=\"No condition\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n readonly\n />\n </div>\n </div>\n } }\n </div>\n\n <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onClose()\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveCondition()\"\n >\n Save\n </button>\n </div>\n </div>\n </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
|
|
2026
2031
|
}
|
|
2027
2032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, decorators: [{
|
|
2028
2033
|
type: Component,
|
|
@@ -2046,6 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2046
2051
|
class EscalationDialogComponent {
|
|
2047
2052
|
fb;
|
|
2048
2053
|
dataService;
|
|
2054
|
+
utilService;
|
|
2049
2055
|
visible = false;
|
|
2050
2056
|
workflowCode = input.required();
|
|
2051
2057
|
stageCode = input.required();
|
|
@@ -2091,9 +2097,10 @@ class EscalationDialogComponent {
|
|
|
2091
2097
|
],
|
|
2092
2098
|
};
|
|
2093
2099
|
// IsTaskDataSource: WritableSignal<boolean[]> = signal([]);
|
|
2094
|
-
constructor(fb, dataService) {
|
|
2100
|
+
constructor(fb, dataService, utilService) {
|
|
2095
2101
|
this.fb = fb;
|
|
2096
2102
|
this.dataService = dataService;
|
|
2103
|
+
this.utilService = utilService;
|
|
2097
2104
|
effect(() => {
|
|
2098
2105
|
const stageCode = this.stageCode();
|
|
2099
2106
|
const workflowCode = this.workflowCode();
|
|
@@ -2108,9 +2115,9 @@ class EscalationDialogComponent {
|
|
|
2108
2115
|
const escalation = this.escalation();
|
|
2109
2116
|
const reportSchedules = this.reportSchedules();
|
|
2110
2117
|
if (escalation && reportSchedules) {
|
|
2111
|
-
this.selectedMessages = escalation.FullMessages.map(({ Message, IsTaskDataSource }) => {
|
|
2118
|
+
this.selectedMessages = escalation.FullMessages.map(({ Message, IsTaskDataSource, IsMessageId }) => {
|
|
2112
2119
|
const found = reportSchedules.find((rs) => rs.Code === Message);
|
|
2113
|
-
return found ? { ...found, IsTaskDataSource
|
|
2120
|
+
return found ? { ...found, IsTaskDataSource, IsMessageId } : null;
|
|
2114
2121
|
});
|
|
2115
2122
|
// this.selectedOperationAction.next(escalation.OperationAction ?? null);
|
|
2116
2123
|
// console.log("SETTING OP", this.selectedOperationAction);
|
|
@@ -2142,7 +2149,7 @@ class EscalationDialogComponent {
|
|
|
2142
2149
|
console.log('Selected message:', reportSchedule, 'at index:', index);
|
|
2143
2150
|
this.selectedMessages = this.selectedMessages.map((msg, i) => {
|
|
2144
2151
|
if (i === index) {
|
|
2145
|
-
return { ...reportSchedule, IsTaskDataSource: true };
|
|
2152
|
+
return { ...reportSchedule, IsTaskDataSource: false, IsMessageId: true };
|
|
2146
2153
|
}
|
|
2147
2154
|
return msg;
|
|
2148
2155
|
});
|
|
@@ -2164,7 +2171,7 @@ class EscalationDialogComponent {
|
|
|
2164
2171
|
SenderConfig: msg.MessageConfig,
|
|
2165
2172
|
Medium: msg.Medium,
|
|
2166
2173
|
NotificationType: TaskNotificationType.Escalation,
|
|
2167
|
-
IsMessageId:
|
|
2174
|
+
IsMessageId: msg.IsMessageId,
|
|
2168
2175
|
IsTaskDataSource: msg.IsTaskDataSource,
|
|
2169
2176
|
MessageDataSource: !msg.IsTaskDataSource ? msg.ReportDataSource : '',
|
|
2170
2177
|
DataState: ObjectState.New,
|
|
@@ -2198,9 +2205,22 @@ class EscalationDialogComponent {
|
|
|
2198
2205
|
console.log("Saving escalation data:", data);
|
|
2199
2206
|
this.dataService.saveEscalations([data]).then((data) => {
|
|
2200
2207
|
console.log("Escalation saved:", data);
|
|
2208
|
+
this.escalation.set(data?.[0] ?? null);
|
|
2209
|
+
this.utilService.showSuccess('Escalation saved successfully');
|
|
2210
|
+
this.onDialogClose(null);
|
|
2201
2211
|
});
|
|
2202
2212
|
// }
|
|
2203
2213
|
}
|
|
2214
|
+
deleteEscalation() {
|
|
2215
|
+
const escalation = this.escalation();
|
|
2216
|
+
if (escalation) {
|
|
2217
|
+
this.dataService.deleteEscalations([escalation.Code]).then((data) => {
|
|
2218
|
+
console.log("Escalation deleted:", data);
|
|
2219
|
+
this.escalation.set(null);
|
|
2220
|
+
this.onDialogClose(null);
|
|
2221
|
+
});
|
|
2222
|
+
}
|
|
2223
|
+
}
|
|
2204
2224
|
loadEscalation(stageCode) {
|
|
2205
2225
|
this.dataService.getEscalationWithParam(stageCode).then((data) => {
|
|
2206
2226
|
this.escalation.set(data.Result[0] ?? null);
|
|
@@ -2231,6 +2251,8 @@ class EscalationDialogComponent {
|
|
|
2231
2251
|
// }
|
|
2232
2252
|
onDialogClose(eventData) {
|
|
2233
2253
|
console.log('Dialog closed, received data:', eventData);
|
|
2254
|
+
this.escalation.set(null);
|
|
2255
|
+
this.selectedMessages = [];
|
|
2234
2256
|
this.closed.emit();
|
|
2235
2257
|
}
|
|
2236
2258
|
onDialogOpen(eventData) {
|
|
@@ -2240,13 +2262,13 @@ class EscalationDialogComponent {
|
|
|
2240
2262
|
const escalation = this.escalation();
|
|
2241
2263
|
return escalation !== null && escalation.DataState !== 'New';
|
|
2242
2264
|
}
|
|
2243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"
|
|
2265
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Message ID?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Send\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"] }, { kind: "component", type: i3$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
|
|
2245
2267
|
}
|
|
2246
2268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, decorators: [{
|
|
2247
2269
|
type: Component,
|
|
2248
|
-
args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"
|
|
2249
|
-
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }], propDecorators: { visible: [{
|
|
2270
|
+
args: [{ selector: 'lib-escalation-dialog', template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Message ID?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Send\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"] }]
|
|
2271
|
+
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: i1.UtilService }], propDecorators: { visible: [{
|
|
2250
2272
|
type: Input
|
|
2251
2273
|
}], closed: [{
|
|
2252
2274
|
type: Output
|
|
@@ -2327,7 +2349,7 @@ class ActionDialogComponent {
|
|
|
2327
2349
|
console.log('Dialog opened, received data:', eventData);
|
|
2328
2350
|
}
|
|
2329
2351
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2330
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Operation Action\n </label>\n <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n </div>\n\n <div class=\"space-y-1\">\n <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Target Status\n </label>\n <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n </div>\n </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex gap-2 items-center justify-end\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n class=\"ml-auto\"></verbena-button>\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type:
|
|
2352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Operation Action\n </label>\n <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n formControlName=\"OperationAction\" class=\"form-control\"></verben-drop-down>\n </div>\n\n <div class=\"space-y-1\">\n <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Target Status\n </label>\n <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n formControlName=\"TargetStatus\" class=\"form-control\"></verben-drop-down>\n </div>\n </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex gap-2 items-center justify-end\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n class=\"ml-auto\"></verbena-button>\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i3$1.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i3$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
2331
2353
|
}
|
|
2332
2354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, decorators: [{
|
|
2333
2355
|
type: Component,
|
|
@@ -3364,11 +3386,11 @@ class DesignerCanvasComponent {
|
|
|
3364
3386
|
});
|
|
3365
3387
|
}
|
|
3366
3388
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, deps: [{ token: WorkflowDesignerState }, { token: WorkflowDataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3367
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", showStageDialog: "showStageDialog", stagePropertiesUpdated: "stagePropertiesUpdated", 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\n #canvas\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"canvasHeight\"\n class=\"designer-canvas\"\n (click)=\"onCanvasClick($event)\"\n >\n <defs>\n <!-- Grid pattern definition -->\n\n <pattern\n id=\"grid\"\n [attr.width]=\"gridSize\"\n [attr.height]=\"gridSize\"\n patternUnits=\"userSpaceOnUse\"\n >\n <path\n d=\"M 20 0 L 0 0 0 20\"\n fill=\"none\"\n stroke=\"#e2e8f0\"\n stroke-width=\"0.5\"\n />\n </pattern>\n\n <!-- Arrow head marker definition -->\n <marker\n id=\"arrowhead\"\n markerWidth=\"10\"\n markerHeight=\"7\"\n refX=\"9\"\n refY=\"3.5\"\n orient=\"auto\"\n >\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n </marker>\n\n <!-- Connection point styles -->\n <circle\n id=\"connection-point-template\"\n r=\"5\"\n fill=\"#D36CFF\"\n stroke=\"#FFFFFF\"\n stroke-width=\"1\"\n />\n\n <!-- Dashed line style for connection preview -->\n <pattern\n id=\"dashed-line\"\n width=\"10\"\n height=\"10\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n y1=\"5\"\n x2=\"10\"\n y2=\"5\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n stroke-dasharray=\"5,5\"\n />\n </pattern>\n\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n </clipPath>\n }\n </defs>\n\n <!-- Background grid -->\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n <!-- Display a message when no swimlanes exist -->\n @if (state.swimlanes.length === 0) {\n <text\n x=\"50%\"\n y=\"50%\"\n font-family=\"sans-serif\"\n font-size=\"16\"\n fill=\"#94a3b8\"\n text-anchor=\"middle\"\n >\n Select the Swimlane tool and click on the canvas to add a swimlane\n </text>\n }\n\n <!-- This is where workflow elements will be added later -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- <g\n [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n >\n <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\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"263\"\n [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\"\n stroke=\"none\"\n ></rect>\n\n <!-- Vertical swimlane label on the left -->\n <g class=\"swimlane-label\">\n <!-- Purple background for the label -->\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"43\"\n height=\"215\"\n rx=\"10.5\"\n fill=\"white\"\n stroke=\"#D36CFF\"\n ></rect>\n\n <!-- Plus button at the top -->\n <g\n (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \"\n >\n <rect\n x=\"12.5\"\n y=\"10\"\n width=\"18\"\n height=\"18\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n ></rect>\n\n <path\n d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n fill=\"#0000FF\"\n class=\"plus-icon\"\n style=\"cursor: pointer\"\n ></path>\n </g>\n\n <!-- Swimlane label -->\n <text\n x=\"22\"\n y=\"106\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#333333\"\n text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 100)\"\n >\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\n x=\"11.5\"\n y=\"187\"\n width=\"21\"\n height=\"19\"\n rx=\"9.5\"\n fill=\"#9E9E9E\"\n ></rect>\n <text\n x=\"24\"\n y=\"206\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"black\"\n text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 200)\"\n >\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\n class=\"node-element\"\n [attr.transform]=\"\n 'translate(' + node.x + ',' + (node.y - swimlane.order * 263) + ')'\n \"\n (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseleave)=\"hideConnectionPoints(node.id)\"\n >\n <!-- Start node indicator (circle and arrow) for the first node -->\n @if (node.isStartNode) {\n <!-- Circle -->\n <circle\n cx=\"-50\"\n cy=\"50\"\n r=\"30\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></circle>\n <!-- Form icon for start node -->\n <svg:g\n (click)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n \"\n class=\"stage-icon\"\n transform=\"translate(-45, 42)\"\n style=\"cursor: pointer; pointer-events: all\"\n >\n <!-- Transparent rectangle to capture clicks -->\n <svg:rect\n x=\"-2\"\n y=\"-2\"\n width=\"24\"\n height=\"24\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n />\n <svg:path\n d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n transform=\"scale(0.7)\"\n />\n </svg:g>\n <!-- Arrow from circle to node -->\n <path\n d=\"M -20 50 L 0 50\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n }\n\n <!-- Exit point indicator (circle and arrow) -->\n @if (node.stageData?.IsExitPoint) {\n <!-- Arrow from node to circle -->\n <path\n [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n <!-- Circle -->\n <circle\n [attr.cx]=\"node.width + 50\"\n cy=\"50\"\n r=\"30\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n ></circle>\n }\n\n <!-- Stage node -->\n @if (node.type === 'stage') {\n <!-- <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"node.width\"\n [attr.height]=\"node.height\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></rect> -->\n <svg:g\n lib-stage-node\n [node]=\"node\"\n [isStartNode]=\"node.isStartNode\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\"\n (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"\n ></svg:g>\n }\n\n <!-- Decision node -->\n @if (node.type === 'decision') {\n <path\n [attr.d]=\"\n 'M 0 ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' 0' +\n ' L ' +\n node.width +\n ' ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' ' +\n node.height +\n ' Z'\n \"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></path>\n\n <!-- Decision node condition indicator icon -->\n <svg:g\n (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\"\n class=\"decision-condition-icon\"\n [attr.transform]=\"\n 'translate(' +\n (node.width / 2 - 10) +\n ',' +\n (node.height / 2 - 10) +\n ')'\n \"\n >\n <svg:rect\n x=\"-5\"\n y=\"-5\"\n width=\"30\"\n height=\"30\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n />\n <svg:path\n d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n fill=\"#D36CFF\"\n />\n </svg:g>\n }\n\n <!-- Form node -->\n @if (node.type === 'form') {\n <path\n d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n transform=\"scale(0.7)\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n transform=\"scale(0.7)\"\n stroke=\"#D36CFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <text\n x=\"50%\"\n y=\"50%\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#D36CFF\"\n >\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <path\n [attr.d]=\"\n 'M 1 ' +\n node.height / 4 +\n ' L ' +\n node.width / 2 +\n ' 1 L ' +\n (node.width - 1) +\n ' ' +\n node.height / 4 +\n ' V ' +\n (node.height * 3) / 4 +\n ' L ' +\n node.width / 2 +\n ' ' +\n (node.height - 1) +\n ' L 1 ' +\n (node.height * 3) / 4 +\n ' Z'\n \"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></path>\n <text\n [attr.x]=\"node.width / 2\"\n [attr.y]=\"node.height / 2\"\n text-anchor=\"middle\"\n alignment-baseline=\"middle\"\n font-family=\"sans-serif\"\n font-size=\"10\"\n fill=\"#000000\"\n >\n <!-- Limit text length -->\n {{\n (node.workflowData?.name || \"Subflow\").length > 12\n ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n : node.workflowData?.name || \"Subflow\"\n }}\n </text>\n }\n\n <!-- Connection points for this node -->\n @for (point of node.connectionPoints || []; track point.id) { @if\n (isConnectionPointVisible(node.id)) {\n <use\n [attr.href]=\"'#connection-point-template'\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n [attr.id]=\"point.id\"\n (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n />\n } }\n </g>\n <!-- A transparent hover area for improved hover detection -->\n <rect\n [attr.x]=\"node.x - 10\"\n [attr.y]=\"node.y - 10\"\n [attr.width]=\"node.width + 20\"\n [attr.height]=\"node.height + 20\"\n fill=\"transparent\"\n (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseout)=\"hideConnectionPoints(node.id)\"\n style=\"pointer-events: none\"\n />\n } }\n\n <!-- Connections -->\n @for (connection of state.connections; track connection.id) {\n <g class=\"connection-element\">\n <path\n [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n\n <!-- Connection Label -->\n @if (connection.sourceNodeId && connection.targetNodeId) {\n <foreignObject\n [attr.x]=\"getLabelPosition(connection).x\"\n [attr.y]=\"getLabelPosition(connection).y\"\n width=\"150\"\n height=\"40\"\n style=\"overflow: visible; pointer-events: all;\"\n [attr.transform]=\"'translate(-75, -10)'\"\n >\n <wf-label-editor\n [label]=\"connection.label || 'New Action'\"\n [x]=\"0\"\n [y]=\"0\"\n [isConnection]=\"true\"\n (labelChange)=\"saveConnectionLabel(connection, $event)\"\n (openDialog)=\"onShowActionDialog(connection)\"\n />\n </foreignObject>\n }\n </g>\n }\n\n <!-- Connection preview line -->\n @if (state.isConnectionDragging()) {\n <g>\n <path\n [attr.d]=\"getConnectionPath()\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n stroke-dasharray=\"5,5\"\n fill=\"none\"\n ></path>\n </g>\n }\n </svg>\n\n <div\n *ngIf=\"popupVisible\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"popupX\"\n [style.top.px]=\"popupY\"\n >\n <verben-pop-Up\n [dropdownOpen]=\"true\"\n [customStyles]=\"{ 'z-index': '99' }\"\n [enableMouseLeave]=\"false\"\n (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\"\n >\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n dropdown-content\n >\n <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let type of allowedNodeTypes\">\n <button\n class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"createNodeConnection(type)\"\n >\n Create {{ type | titlecase }}\n </button>\n </ng-container>\n <button\n class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"hideConnectionPopup()\"\n >\n Cancel\n </button>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div\n *ngIf=\"showStartNodeFormPopup\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"startNodeFormPopupX\"\n [style.top.px]=\"startNodeFormPopupY\"\n >\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n dropdown-content\n style=\"background-color: white; z-index: 1000\"\n >\n <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n Loading forms...\n </div>\n <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n <div class=\"mb-2\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(null)\"\n >\n Clear form selection\n </button>\n </div>\n <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(form)\"\n >\n {{ form.Name }}\n </button>\n </div>\n <div\n *ngIf=\"startNodeFormsList.length === 0\"\n class=\"text-center py-2 text-gray-500\"\n >\n No forms available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div\n *ngIf=\"showSubflowPopup\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"subflowPopupX\"\n [style.top.px]=\"subflowPopupY\"\n >\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n dropdown-content\n style=\"background-color: white; z-index: 1000\"\n >\n <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n Loading workflows...\n </div>\n <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectSubflowWorkflow(workflow)\"\n >\n {{ workflow.Name }}\n </button>\n </div>\n <div\n *ngIf=\"workflowsList.length === 0\"\n class=\"text-center py-2 text-gray-500\"\n >\n No workflows available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <lib-conditions-popup\n [visible]=\"showDecisionConditionDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [newConnectionId]=\"activeConnectionId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n (saved)=\"onDecisionConditionSaved($event)\"\n ></lib-conditions-popup>\n\n <!-- <lib-decision-popup\n [visible]=\"showConditionsDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n ></lib-decision-popup> -->\n\n <lib-stage-dialog\n [visible]=\"showStageDialogLocal\"\n [stageData]=\"activeStageData || {}\"\n (closed)=\"onStageDialogClosed()\"\n (saved)=\"onStageDialogSaved($event)\"\n ></lib-stage-dialog>\n\n <lib-action-dialog\n [visible]=\"showActionDialogLocal\"\n [actionData]=\"activeActionData\"\n (closed)=\"onActionDialogClosed()\"\n (saved)=\"onActionDialogSaved($event)\"\n ></lib-action-dialog>\n\n <lib-escalation-dialog\n [visible]=\"showEscalationDialogLocal\"\n [type]=\"activeEscalationType()!\"\n [stageCode]=\"activeStageCode() || ''\"\n [workflowCode]=\"state.workflow?.Code || ''\"\n (closed)=\"onEscalationDialogClosed()\"\n ></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}\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.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5$1.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
3389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", showStageDialog: "showStageDialog", stagePropertiesUpdated: "stagePropertiesUpdated", 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 styles -->\n <circle id=\"connection-point-template\" r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\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)\" (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 <!-- 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\"></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\" />\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\" />\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n fill=\"#D36CFF\">\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <path [attr.d]=\"\n 'M 1 ' +\n node.height / 4 +\n ' L ' +\n node.width / 2 +\n ' 1 L ' +\n (node.width - 1) +\n ' ' +\n node.height / 4 +\n ' V ' +\n (node.height * 3) / 4 +\n ' L ' +\n node.width / 2 +\n ' ' +\n (node.height - 1) +\n ' L 1 ' +\n (node.height * 3) / 4 +\n ' Z'\n \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></path>\n <text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" alignment-baseline=\"middle\"\n font-family=\"sans-serif\" font-size=\"10\" fill=\"#000000\">\n <!-- Limit text length -->\n {{\n (node.workflowData?.name || \"Subflow\").length > 12\n ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n : node.workflowData?.name || \"Subflow\"\n }}\n </text>\n }\n\n <!-- Connection points for this node -->\n @for (point of node.connectionPoints || []; track point.id) { @if\n (isConnectionPointVisible(node.id)) {\n <use [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\" [attr.id]=\"point.id\"\n (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\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\">\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\">\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)\"></lib-action-dialog>\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}\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: i3$1.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: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
3368
3390
|
}
|
|
3369
3391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
|
|
3370
3392
|
type: Component,
|
|
3371
|
-
args: [{ selector: 'lib-designer-canvas', template: "<div class=\"canvas-container\">\n <svg\n #canvas\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"canvasHeight\"\n class=\"designer-canvas\"\n (click)=\"onCanvasClick($event)\"\n >\n <defs>\n <!-- Grid pattern definition -->\n\n <pattern\n id=\"grid\"\n [attr.width]=\"gridSize\"\n [attr.height]=\"gridSize\"\n patternUnits=\"userSpaceOnUse\"\n >\n <path\n d=\"M 20 0 L 0 0 0 20\"\n fill=\"none\"\n stroke=\"#e2e8f0\"\n stroke-width=\"0.5\"\n />\n </pattern>\n\n <!-- Arrow head marker definition -->\n <marker\n id=\"arrowhead\"\n markerWidth=\"10\"\n markerHeight=\"7\"\n refX=\"9\"\n refY=\"3.5\"\n orient=\"auto\"\n >\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n </marker>\n\n <!-- Connection point styles -->\n <circle\n id=\"connection-point-template\"\n r=\"5\"\n fill=\"#D36CFF\"\n stroke=\"#FFFFFF\"\n stroke-width=\"1\"\n />\n\n <!-- Dashed line style for connection preview -->\n <pattern\n id=\"dashed-line\"\n width=\"10\"\n height=\"10\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n y1=\"5\"\n x2=\"10\"\n y2=\"5\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n stroke-dasharray=\"5,5\"\n />\n </pattern>\n\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n </clipPath>\n }\n </defs>\n\n <!-- Background grid -->\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n <!-- Display a message when no swimlanes exist -->\n @if (state.swimlanes.length === 0) {\n <text\n x=\"50%\"\n y=\"50%\"\n font-family=\"sans-serif\"\n font-size=\"16\"\n fill=\"#94a3b8\"\n text-anchor=\"middle\"\n >\n Select the Swimlane tool and click on the canvas to add a swimlane\n </text>\n }\n\n <!-- This is where workflow elements will be added later -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- <g\n [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n >\n <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\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"263\"\n [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\"\n stroke=\"none\"\n ></rect>\n\n <!-- Vertical swimlane label on the left -->\n <g class=\"swimlane-label\">\n <!-- Purple background for the label -->\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"43\"\n height=\"215\"\n rx=\"10.5\"\n fill=\"white\"\n stroke=\"#D36CFF\"\n ></rect>\n\n <!-- Plus button at the top -->\n <g\n (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \"\n >\n <rect\n x=\"12.5\"\n y=\"10\"\n width=\"18\"\n height=\"18\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n ></rect>\n\n <path\n d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n fill=\"#0000FF\"\n class=\"plus-icon\"\n style=\"cursor: pointer\"\n ></path>\n </g>\n\n <!-- Swimlane label -->\n <text\n x=\"22\"\n y=\"106\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#333333\"\n text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 100)\"\n >\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\n x=\"11.5\"\n y=\"187\"\n width=\"21\"\n height=\"19\"\n rx=\"9.5\"\n fill=\"#9E9E9E\"\n ></rect>\n <text\n x=\"24\"\n y=\"206\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"black\"\n text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 200)\"\n >\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\n class=\"node-element\"\n [attr.transform]=\"\n 'translate(' + node.x + ',' + (node.y - swimlane.order * 263) + ')'\n \"\n (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseleave)=\"hideConnectionPoints(node.id)\"\n >\n <!-- Start node indicator (circle and arrow) for the first node -->\n @if (node.isStartNode) {\n <!-- Circle -->\n <circle\n cx=\"-50\"\n cy=\"50\"\n r=\"30\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></circle>\n <!-- Form icon for start node -->\n <svg:g\n (click)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n \"\n class=\"stage-icon\"\n transform=\"translate(-45, 42)\"\n style=\"cursor: pointer; pointer-events: all\"\n >\n <!-- Transparent rectangle to capture clicks -->\n <svg:rect\n x=\"-2\"\n y=\"-2\"\n width=\"24\"\n height=\"24\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n />\n <svg:path\n d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\"\n transform=\"scale(0.7)\"\n />\n </svg:g>\n <!-- Arrow from circle to node -->\n <path\n d=\"M -20 50 L 0 50\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n }\n\n <!-- Exit point indicator (circle and arrow) -->\n @if (node.stageData?.IsExitPoint) {\n <!-- Arrow from node to circle -->\n <path\n [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n <!-- Circle -->\n <circle\n [attr.cx]=\"node.width + 50\"\n cy=\"50\"\n r=\"30\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n ></circle>\n }\n\n <!-- Stage node -->\n @if (node.type === 'stage') {\n <!-- <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"node.width\"\n [attr.height]=\"node.height\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></rect> -->\n <svg:g\n lib-stage-node\n [node]=\"node\"\n [isStartNode]=\"node.isStartNode\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\"\n (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\"\n (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"\n ></svg:g>\n }\n\n <!-- Decision node -->\n @if (node.type === 'decision') {\n <path\n [attr.d]=\"\n 'M 0 ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' 0' +\n ' L ' +\n node.width +\n ' ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' ' +\n node.height +\n ' Z'\n \"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></path>\n\n <!-- Decision node condition indicator icon -->\n <svg:g\n (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\"\n class=\"decision-condition-icon\"\n [attr.transform]=\"\n 'translate(' +\n (node.width / 2 - 10) +\n ',' +\n (node.height / 2 - 10) +\n ')'\n \"\n >\n <svg:rect\n x=\"-5\"\n y=\"-5\"\n width=\"30\"\n height=\"30\"\n fill=\"transparent\"\n style=\"cursor: pointer\"\n />\n <svg:path\n d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n fill=\"#D36CFF\"\n />\n </svg:g>\n }\n\n <!-- Form node -->\n @if (node.type === 'form') {\n <path\n d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n transform=\"scale(0.7)\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n transform=\"scale(0.7)\"\n stroke=\"#D36CFF\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <text\n x=\"50%\"\n y=\"50%\"\n text-anchor=\"middle\"\n dominant-baseline=\"middle\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#D36CFF\"\n >\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <path\n [attr.d]=\"\n 'M 1 ' +\n node.height / 4 +\n ' L ' +\n node.width / 2 +\n ' 1 L ' +\n (node.width - 1) +\n ' ' +\n node.height / 4 +\n ' V ' +\n (node.height * 3) / 4 +\n ' L ' +\n node.width / 2 +\n ' ' +\n (node.height - 1) +\n ' L 1 ' +\n (node.height * 3) / 4 +\n ' Z'\n \"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></path>\n <text\n [attr.x]=\"node.width / 2\"\n [attr.y]=\"node.height / 2\"\n text-anchor=\"middle\"\n alignment-baseline=\"middle\"\n font-family=\"sans-serif\"\n font-size=\"10\"\n fill=\"#000000\"\n >\n <!-- Limit text length -->\n {{\n (node.workflowData?.name || \"Subflow\").length > 12\n ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n : node.workflowData?.name || \"Subflow\"\n }}\n </text>\n }\n\n <!-- Connection points for this node -->\n @for (point of node.connectionPoints || []; track point.id) { @if\n (isConnectionPointVisible(node.id)) {\n <use\n [attr.href]=\"'#connection-point-template'\"\n [attr.x]=\"point.x\"\n [attr.y]=\"point.y\"\n [attr.id]=\"point.id\"\n (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\"\n />\n } }\n </g>\n <!-- A transparent hover area for improved hover detection -->\n <rect\n [attr.x]=\"node.x - 10\"\n [attr.y]=\"node.y - 10\"\n [attr.width]=\"node.width + 20\"\n [attr.height]=\"node.height + 20\"\n fill=\"transparent\"\n (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseout)=\"hideConnectionPoints(node.id)\"\n style=\"pointer-events: none\"\n />\n } }\n\n <!-- Connections -->\n @for (connection of state.connections; track connection.id) {\n <g class=\"connection-element\">\n <path\n [attr.d]=\"getConnectionPathForSavedConnection(connection)\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrowhead)\"\n ></path>\n\n <!-- Connection Label -->\n @if (connection.sourceNodeId && connection.targetNodeId) {\n <foreignObject\n [attr.x]=\"getLabelPosition(connection).x\"\n [attr.y]=\"getLabelPosition(connection).y\"\n width=\"150\"\n height=\"40\"\n style=\"overflow: visible; pointer-events: all;\"\n [attr.transform]=\"'translate(-75, -10)'\"\n >\n <wf-label-editor\n [label]=\"connection.label || 'New Action'\"\n [x]=\"0\"\n [y]=\"0\"\n [isConnection]=\"true\"\n (labelChange)=\"saveConnectionLabel(connection, $event)\"\n (openDialog)=\"onShowActionDialog(connection)\"\n />\n </foreignObject>\n }\n </g>\n }\n\n <!-- Connection preview line -->\n @if (state.isConnectionDragging()) {\n <g>\n <path\n [attr.d]=\"getConnectionPath()\"\n stroke=\"#D36CFF\"\n stroke-width=\"2\"\n stroke-dasharray=\"5,5\"\n fill=\"none\"\n ></path>\n </g>\n }\n </svg>\n\n <div\n *ngIf=\"popupVisible\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"popupX\"\n [style.top.px]=\"popupY\"\n >\n <verben-pop-Up\n [dropdownOpen]=\"true\"\n [customStyles]=\"{ 'z-index': '99' }\"\n [enableMouseLeave]=\"false\"\n (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\"\n >\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md\"\n dropdown-content\n >\n <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let type of allowedNodeTypes\">\n <button\n class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"createNodeConnection(type)\"\n >\n Create {{ type | titlecase }}\n </button>\n </ng-container>\n <button\n class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"hideConnectionPopup()\"\n >\n Cancel\n </button>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div\n *ngIf=\"showStartNodeFormPopup\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"startNodeFormPopupX\"\n [style.top.px]=\"startNodeFormPopupY\"\n >\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n dropdown-content\n style=\"background-color: white; z-index: 1000\"\n >\n <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n Loading forms...\n </div>\n <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\">\n <div class=\"mb-2\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(null)\"\n >\n Clear form selection\n </button>\n </div>\n <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(form)\"\n >\n {{ form.Name }}\n </button>\n </div>\n <div\n *ngIf=\"startNodeFormsList.length === 0\"\n class=\"text-center py-2 text-gray-500\"\n >\n No forms available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div\n *ngIf=\"showSubflowPopup\"\n [style.position]=\"'absolute'\"\n [style.left.px]=\"subflowPopupX\"\n [style.top.px]=\"subflowPopupY\"\n >\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\"\n dropdown-content\n style=\"background-color: white; z-index: 1000\"\n >\n <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n Loading workflows...\n </div>\n <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\">\n <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n <button\n class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectSubflowWorkflow(workflow)\"\n >\n {{ workflow.Name }}\n </button>\n </div>\n <div\n *ngIf=\"workflowsList.length === 0\"\n class=\"text-center py-2 text-gray-500\"\n >\n No workflows available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <lib-conditions-popup\n [visible]=\"showDecisionConditionDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [newConnectionId]=\"activeConnectionId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n (saved)=\"onDecisionConditionSaved($event)\"\n ></lib-conditions-popup>\n\n <!-- <lib-decision-popup\n [visible]=\"showConditionsDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n ></lib-decision-popup> -->\n\n <lib-stage-dialog\n [visible]=\"showStageDialogLocal\"\n [stageData]=\"activeStageData || {}\"\n (closed)=\"onStageDialogClosed()\"\n (saved)=\"onStageDialogSaved($event)\"\n ></lib-stage-dialog>\n\n <lib-action-dialog\n [visible]=\"showActionDialogLocal\"\n [actionData]=\"activeActionData\"\n (closed)=\"onActionDialogClosed()\"\n (saved)=\"onActionDialogSaved($event)\"\n ></lib-action-dialog>\n\n <lib-escalation-dialog\n [visible]=\"showEscalationDialogLocal\"\n [type]=\"activeEscalationType()!\"\n [stageCode]=\"activeStageCode() || ''\"\n [workflowCode]=\"state.workflow?.Code || ''\"\n (closed)=\"onEscalationDialogClosed()\"\n ></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}\n"] }]
|
|
3393
|
+
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 styles -->\n <circle id=\"connection-point-template\" r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\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)\" (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 <!-- 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\"></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\" />\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\" />\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n fill=\"#D36CFF\">\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <path [attr.d]=\"\n 'M 1 ' +\n node.height / 4 +\n ' L ' +\n node.width / 2 +\n ' 1 L ' +\n (node.width - 1) +\n ' ' +\n node.height / 4 +\n ' V ' +\n (node.height * 3) / 4 +\n ' L ' +\n node.width / 2 +\n ' ' +\n (node.height - 1) +\n ' L 1 ' +\n (node.height * 3) / 4 +\n ' Z'\n \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></path>\n <text [attr.x]=\"node.width / 2\" [attr.y]=\"node.height / 2\" text-anchor=\"middle\" alignment-baseline=\"middle\"\n font-family=\"sans-serif\" font-size=\"10\" fill=\"#000000\">\n <!-- Limit text length -->\n {{\n (node.workflowData?.name || \"Subflow\").length > 12\n ? (node.workflowData?.name || \"Subflow\").substring(0, 10) + \"...\"\n : node.workflowData?.name || \"Subflow\"\n }}\n </text>\n }\n\n <!-- Connection points for this node -->\n @for (point of node.connectionPoints || []; track point.id) { @if\n (isConnectionPointVisible(node.id)) {\n <use [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\" [attr.id]=\"point.id\"\n (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\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\">\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\">\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)\"></lib-action-dialog>\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}\n"] }]
|
|
3372
3394
|
}], ctorParameters: () => [{ type: WorkflowDesignerState }, { type: WorkflowDataService }], propDecorators: { selectedTool: [{
|
|
3373
3395
|
type: Input
|
|
3374
3396
|
}], clickedPosition: [{
|
|
@@ -3491,7 +3513,7 @@ class SwimlaneDialogComponent {
|
|
|
3491
3513
|
this.searchQuery = '';
|
|
3492
3514
|
}
|
|
3493
3515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: SwimlaneService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Tags</h2>\n <span class=\"text-xs text-[#3E3E3E]/70\"\n >{{ this.selectedTags.length }}/{{ tags.length }}</span\n >\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"applySelection()\"\n >Create</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <!-- <input\n type=\"text\"\n placeholder=\"Enter Name\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"workflowName\"\n />\n\n <input\n type=\"search\"\n placeholder=\"Filter Tags\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"searchQuery\"\n />\n </div>\n\n <div class=\"\">\n <div class=\"py-3\">\n <label class=\"flex items-center\">\n <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n <span class=\"text-sm\">Select All</span>\n </label>\n </div>\n\n <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n class=\"mr-3\"\n [checked]=\"isTagSelected(tag.Name)\"\n (change)=\"toggleTagSelection(tag.Name)\"\n />\n <span class=\"text-sm\">{{ tag.Name }}</span>\n <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n >(Required)</span\n >\n </label>\n </div> -->\n\n <verbena-input\n [(ngModel)]=\"workflowName\"\n [border]=\"'1px solid #9A9FBF66'\"\n placeHolder=\"Enter Swimlane Label\"\n [bgColor]=\"'white'\"\n ></verbena-input>\n\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tags\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tags\"\n [(ngModel)]=\"selectedTags\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"selectedTags.length < 1\"\n (click)=\"applySelection()\"\n ></verbena-button>\n\n <!-- <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n ></verbena-button> -->\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
3516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Tags</h2>\n <span class=\"text-xs text-[#3E3E3E]/70\"\n >{{ this.selectedTags.length }}/{{ tags.length }}</span\n >\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"applySelection()\"\n >Create</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <!-- <input\n type=\"text\"\n placeholder=\"Enter Name\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"workflowName\"\n />\n\n <input\n type=\"search\"\n placeholder=\"Filter Tags\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"searchQuery\"\n />\n </div>\n\n <div class=\"\">\n <div class=\"py-3\">\n <label class=\"flex items-center\">\n <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n <span class=\"text-sm\">Select All</span>\n </label>\n </div>\n\n <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n class=\"mr-3\"\n [checked]=\"isTagSelected(tag.Name)\"\n (change)=\"toggleTagSelection(tag.Name)\"\n />\n <span class=\"text-sm\">{{ tag.Name }}</span>\n <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n >(Required)</span\n >\n </label>\n </div> -->\n\n <verbena-input\n [(ngModel)]=\"workflowName\"\n [border]=\"'1px solid #9A9FBF66'\"\n placeHolder=\"Enter Swimlane Label\"\n [bgColor]=\"'white'\"\n ></verbena-input>\n\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tags\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tags\"\n [(ngModel)]=\"selectedTags\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"selectedTags.length < 1\"\n (click)=\"applySelection()\"\n ></verbena-button>\n\n <!-- <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n ></verbena-button> -->\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i3$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
3495
3517
|
}
|
|
3496
3518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
|
|
3497
3519
|
type: Component,
|
|
@@ -3555,7 +3577,7 @@ class ActorTagsDialogComponent {
|
|
|
3555
3577
|
this.isViewOnly = false;
|
|
3556
3578
|
}
|
|
3557
3579
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActorTagsDialogComponent, deps: [{ token: WorkflowDataService }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"onSave()\"\n >Save</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tag\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Tag\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tag\"\n [(ngModel)]=\"selectedTag\"\n class=\"form-control\"\n >\n </verben-drop-down>\n\n <div class=\"flex items-center gap-4 mt-4\">\n <label\n for=\"is-view-only\"\n class=\"text-sm font-semibold text-[#3E3E3E]\"\n >\n Is View Only?\n </label>\n <verbena-switch\n id=\"is-view-only\"\n onText=\"Yes\"\n offText=\"No\"\n [onColor]=\"'#1A237E'\"\n [(ngModel)]=\"isViewOnly\"\n ></verbena-switch>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"!selectedTag\"\n (click)=\"onSave()\"\n ></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
3580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"onSave()\"\n >Save</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tag\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Tag\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tag\"\n [(ngModel)]=\"selectedTag\"\n class=\"form-control\"\n >\n </verben-drop-down>\n\n <div class=\"flex items-center gap-4 mt-4\">\n <label\n for=\"is-view-only\"\n class=\"text-sm font-semibold text-[#3E3E3E]\"\n >\n Is View Only?\n </label>\n <verbena-switch\n id=\"is-view-only\"\n onText=\"Yes\"\n offText=\"No\"\n [onColor]=\"'#1A237E'\"\n [(ngModel)]=\"isViewOnly\"\n ></verbena-switch>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"!selectedTag\"\n (click)=\"onSave()\"\n ></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3$1.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i3$1.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
|
|
3559
3581
|
}
|
|
3560
3582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActorTagsDialogComponent, decorators: [{
|
|
3561
3583
|
type: Component,
|
|
@@ -4022,7 +4044,7 @@ class DecisionPopupComponent {
|
|
|
4022
4044
|
this.closed.emit();
|
|
4023
4045
|
}
|
|
4024
4046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
|
|
4025
|
-
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\">></span>\n </div>\n <div class=\"mt-1 text-xs text-gray-500\">\n {{ getTargetNodeName(condition.targetNodeId) }}\n </div>\n </div>\n }\n </div>\n\n @if (getConnectionConditions().length === 0) {\n <div class=\"text-center py-3 text-gray-500\">\n No conditions defined for this decision node\n </div>\n } @if (showDuration) {\n <div class=\"mt-4 pt-3 border-t border-gray-200\">\n <div class=\"flex items-center\">\n <span class=\"font-medium\">Duration:</span>\n <span class=\"ml-2\">{{ getDuration() }} days</span>\n </div>\n </div>\n }\n </div>\n </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
4047
|
+
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\">></span>\n </div>\n <div class=\"mt-1 text-xs text-gray-500\">\n {{ getTargetNodeName(condition.targetNodeId) }}\n </div>\n </div>\n }\n </div>\n\n @if (getConnectionConditions().length === 0) {\n <div class=\"text-center py-3 text-gray-500\">\n No conditions defined for this decision node\n </div>\n } @if (showDuration) {\n <div class=\"mt-4 pt-3 border-t border-gray-200\">\n <div class=\"flex items-center\">\n <span class=\"font-medium\">Duration:</span>\n <span class=\"ml-2\">{{ getDuration() }} days</span>\n </div>\n </div>\n }\n </div>\n </verben-pop-Up>\n</div>\n", styles: [".decision-conditions-popup{z-index:1000}.border-purple-300{border-color:#d8b4fe}.bg-gray-50{background-color:#f9fafb}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
|
|
4026
4048
|
}
|
|
4027
4049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, decorators: [{
|
|
4028
4050
|
type: Component,
|