verben-workflow-ui 0.5.69 → 0.5.71
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 +16 -28
- package/esm2022/src/lib/components/workflow-designer/stage-dialog/stage-dialog.component.mjs +6 -32
- package/esm2022/src/lib/components/workflow-designer/workflow-designer.module.mjs +7 -4
- package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs +35 -69
- package/fesm2022/verben-workflow-ui-src-lib-components-workflow-designer.mjs.map +1 -1
- package/package.json +48 -48
- package/src/lib/components/workflow-designer/stage-dialog/stage-dialog.component.d.ts +0 -3
- package/src/lib/components/workflow-designer/workflow-designer.module.d.ts +1 -1
- package/styles/styles.css +3 -9
|
@@ -4,9 +4,9 @@ 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
|
|
8
|
-
import { VerbenDialogueModule, VerbenPopUpModule, VerbenaButtonModule, DropDownModule, VerbenaInputModule, VerbenaSwitchModule } from 'verben-ng-ui';
|
|
9
|
-
import * as i5 from 'verben-workflow-ui/src/lib/components/designer';
|
|
7
|
+
import * as i5 from 'verben-ng-ui';
|
|
8
|
+
import { VerbenDialogueModule, VerbenPopUpModule, VerbenaButtonModule, DropDownModule, VerbenaInputModule, VerbenaSwitchModule, VerbenaTextareaModule } from 'verben-ng-ui';
|
|
9
|
+
import * as i5$1 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';
|
|
@@ -1390,7 +1390,7 @@ class DesignerToolbarComponent {
|
|
|
1390
1390
|
this.openActorTags.emit();
|
|
1391
1391
|
}
|
|
1392
1392
|
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 });
|
|
1393
|
-
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:
|
|
1393
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DesignerToolbarComponent, selector: "lib-designer-toolbar", inputs: { selectedTool: "selectedTool", isSaving: "isSaving", workflowCode: "workflowCode" }, outputs: { openActorTags: "openActorTags", toolSelected: "toolSelected", saveWorkflow: "saveWorkflow" }, ngImport: i0, template: "<div class=\"designer-toolbar\">\n <div class=\"toolbar-container\">\n <button\n *ngFor=\"let item of toolbarItems\"\n class=\"tool-button\"\n [class.active]=\"selectedTool === item.id\"\n [class.disabled]=\"!isEnabled(item.id)\"\n (click)=\"onToolClick(item.id)\"\n [title]=\"item.label\"\n [disabled]=\"!isEnabled(item.id)\"\n style=\"width: 60px; height: auto\"\n >\n <!-- {{ item.label }} -->\n <img\n [src]=\"'icons/' + item.id + '.svg'\"\n [alt]=\"item.label\"\n class=\"tool-icon\"\n />\n </button>\n </div>\n\n <verbena-button\n *ngIf=\"workflowCode\"\n buttonClass=\"actor-tags-button\"\n (click)=\"onActorTagsClick()\"\n type=\"button\"\n text=\"+ Actor Tags\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n height=\"39px\"\n class=\"ml-2\"\n ></verbena-button>\n\n <verbena-button\n buttonClass=\"save-button\"\n (click)=\"onSaveClick()\"\n [isLoading]=\"isSaving\"\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n ></verbena-button>\n</div>\n", styles: [".designer-toolbar{padding:.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.toolbar-container{display:flex;gap:.5rem;background-color:#fff;border:1px solid #d8b4fe;border-radius:.5rem;padding:.5rem;box-shadow:0 2px 4px #0000001a;max-width:fit-content}.tool-button{padding:.5rem 1rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .2s}.tool-button:hover{background-color:#f9fafb}.tool-button.active{background-color:#f3e8ff;border-color:#d8b4fe;color:#7e22ce}.tool-button.active{opacity:.75}.save-button{padding:.5rem 1rem;background-color:#f3e8ff;border:1px solid #d8b4fe;border-radius:.25rem;color:#7e22ce;font-size:.875rem;cursor:pointer;transition:all .2s}.save-button:hover{background-color:#e9d5ff}.save-button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
|
|
1394
1394
|
}
|
|
1395
1395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerToolbarComponent, decorators: [{
|
|
1396
1396
|
type: Component,
|
|
@@ -1865,7 +1865,6 @@ class StageDialogComponent {
|
|
|
1865
1865
|
tags = [];
|
|
1866
1866
|
actorRules = Object.values(StageActorRule);
|
|
1867
1867
|
assignmentTypes = Object.values(TaskAssignmentType);
|
|
1868
|
-
selectedTagIds = [];
|
|
1869
1868
|
hasOutgoingConnections = false;
|
|
1870
1869
|
constructor(fb, dataService, nodeService, popupService) {
|
|
1871
1870
|
this.fb = fb;
|
|
@@ -1896,14 +1895,8 @@ class StageDialogComponent {
|
|
|
1896
1895
|
ActorRule: stageData.ActorRule || StageActorRule.None,
|
|
1897
1896
|
AssignmentType: stageData.AssignmentType || TaskAssignmentType.AutoRoute,
|
|
1898
1897
|
IsExitPoint: stageData.IsExitPoint || false,
|
|
1898
|
+
Tags: stageData.Tags || [],
|
|
1899
1899
|
});
|
|
1900
|
-
// Update selected tags
|
|
1901
|
-
if (stageData.Tags && stageData.Tags.length > 0) {
|
|
1902
|
-
this.selectedTagIds = stageData.Tags.map((tag) => tag.Code);
|
|
1903
|
-
}
|
|
1904
|
-
else {
|
|
1905
|
-
this.selectedTagIds = [];
|
|
1906
|
-
}
|
|
1907
1900
|
}
|
|
1908
1901
|
});
|
|
1909
1902
|
}
|
|
@@ -1920,11 +1913,6 @@ class StageDialogComponent {
|
|
|
1920
1913
|
loadTags() {
|
|
1921
1914
|
this.dataService.getTags().then((data) => {
|
|
1922
1915
|
this.tags = data.Result;
|
|
1923
|
-
const stageData = this.stageData();
|
|
1924
|
-
// If we have stage data with tags, update selectedTagIds after tags are loaded
|
|
1925
|
-
if (stageData && stageData.Tags && stageData.Tags.length > 0) {
|
|
1926
|
-
this.selectedTagIds = stageData.Tags.map((tag) => tag.Code);
|
|
1927
|
-
}
|
|
1928
1916
|
});
|
|
1929
1917
|
}
|
|
1930
1918
|
/**
|
|
@@ -1942,6 +1930,7 @@ class StageDialogComponent {
|
|
|
1942
1930
|
ActorRule: this.stageData().ActorRule || StageActorRule.None,
|
|
1943
1931
|
AssignmentType: this.stageData().AssignmentType || TaskAssignmentType.AutoRoute,
|
|
1944
1932
|
IsExitPoint: this.stageData().IsExitPoint || false,
|
|
1933
|
+
Tags: this.stageData().Tags || [],
|
|
1945
1934
|
});
|
|
1946
1935
|
}
|
|
1947
1936
|
}
|
|
@@ -1964,10 +1953,8 @@ class StageDialogComponent {
|
|
|
1964
1953
|
}
|
|
1965
1954
|
saveStage() {
|
|
1966
1955
|
if (this.stageForm.valid) {
|
|
1967
|
-
const selectedTags = this.tags.filter((tag) => this.selectedTagIds.includes(tag.Code));
|
|
1968
1956
|
const stageData = {
|
|
1969
1957
|
...this.stageForm.value,
|
|
1970
|
-
Tags: selectedTags,
|
|
1971
1958
|
};
|
|
1972
1959
|
// Reset form after saving
|
|
1973
1960
|
this.stageForm.reset();
|
|
@@ -1975,18 +1962,6 @@ class StageDialogComponent {
|
|
|
1975
1962
|
this.saved.emit(stageData);
|
|
1976
1963
|
}
|
|
1977
1964
|
}
|
|
1978
|
-
toggleTagSelection(tagId) {
|
|
1979
|
-
const index = this.selectedTagIds.indexOf(tagId);
|
|
1980
|
-
if (index > -1) {
|
|
1981
|
-
this.selectedTagIds.splice(index, 1);
|
|
1982
|
-
}
|
|
1983
|
-
else {
|
|
1984
|
-
this.selectedTagIds.push(tagId);
|
|
1985
|
-
}
|
|
1986
|
-
}
|
|
1987
|
-
isTagSelected(tagId) {
|
|
1988
|
-
return this.selectedTagIds.includes(tagId);
|
|
1989
|
-
}
|
|
1990
1965
|
onDialogOpen(event) {
|
|
1991
1966
|
console.log('Dialog opened:', event);
|
|
1992
1967
|
}
|
|
@@ -2028,11 +2003,11 @@ class StageDialogComponent {
|
|
|
2028
2003
|
}
|
|
2029
2004
|
}
|
|
2030
2005
|
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 });
|
|
2031
|
-
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=\"
|
|
2006
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, stageData: { classPropertyName: "stageData", publicName: "stageData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible()\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"p-4 border-b border-gray-200\">\n <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-4\">\n <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n <!-- Stage Name -->\n <verbena-input\n name=\"Name\"\n label=\"Stage Name\"\n formControlName=\"Name\"\n placeHolder=\"Enter Stage Name\"\n />\n\n <!-- Description -->\n <verbena-textarea\n label=\"Description\"\n [rows]=\"3\"\n formControlName=\"Description\"\n ></verbena-textarea>\n\n <!-- Recipient Count -->\n <verbena-input\n name=\"MinNoOfActor\"\n label=\"Recipient Count\"\n type=\"number\"\n formControlName=\"MinNoOfActor\"\n placeHolder=\"Enter Count\"\n />\n\n <!-- Pass On Rule -->\n <verbena-input\n name=\"PassOnRule\"\n label=\"Pass On Rule\"\n formControlName=\"PassOnRule\"\n placeHolder=\"Select Rule\"\n />\n\n <!-- Duration -->\n <verbena-input\n name=\"Duration\"\n label=\"Duration\"\n type=\"number\"\n formControlName=\"Duration\"\n placeHolder=\"Set Duration\"\n />\n\n <!-- Actor Rule -->\n <div class=\"space-y-1\">\n <label for=\"actor-rule\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Actor Rule\n </label>\n <verben-drop-down\n id=\"actor-rule\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Rule\"\n [options]=\"actorRules\"\n formControlName=\"ActorRule\"\n class=\"form-control\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Assignment Type -->\n <div class=\"space-y-1\">\n <label for=\"assignment\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Assignment Type\n </label>\n <verben-drop-down\n id=\"assignment\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select\"\n [options]=\"assignmentTypes\"\n formControlName=\"AssignmentType\"\n class=\"form-control\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Tags -->\n <div class=\"space-y-1\">\n <label for=\"tags\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Tags\n </label>\n <verben-drop-down\n id=\"tags\"\n selectKey=\"Code\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n formControlName=\"Tags\"\n class=\"form-control\"\n [filter]=\"true\"\n filterBy=\"Name\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Is Exit Point -->\n <div class=\"flex items-center gap-4\">\n <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Exit Point\n </label>\n <verbena-switch\n id=\"is-exit-point\"\n onText=\"Yes\"\n offText=\"No\"\n [onColor]=\"'#1A237E'\"\n formControlName=\"IsExitPoint\"\n ></verbena-switch>\n </div>\n </form>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveStage()\"\n [disabled]=\"stageForm.invalid\"\n >\n Save\n </button>\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"deleteStage()\"\n >\n Delete\n </button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteStage()\"\n ></verbena-button>\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n class=\"ml-auto\"\n ></verbena-button>\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n (click)=\"saveStage()\"\n [disable]=\"stageForm.invalid\"\n ></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i5.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }] });
|
|
2032
2007
|
}
|
|
2033
2008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StageDialogComponent, decorators: [{
|
|
2034
2009
|
type: Component,
|
|
2035
|
-
args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible()\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"p-4 border-b border-gray-200\">\n <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-4\">\n <form [formGroup]=\"stageForm\" class=\"
|
|
2010
|
+
args: [{ selector: 'lib-stage-dialog', template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible()\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"p-4 border-b border-gray-200\">\n <h2 class=\"text-xl font-medium m-0\">Stage Properties</h2>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-4\">\n <form [formGroup]=\"stageForm\" class=\"grid gap-y-4\">\n <!-- Stage Name -->\n <verbena-input\n name=\"Name\"\n label=\"Stage Name\"\n formControlName=\"Name\"\n placeHolder=\"Enter Stage Name\"\n />\n\n <!-- Description -->\n <verbena-textarea\n label=\"Description\"\n [rows]=\"3\"\n formControlName=\"Description\"\n ></verbena-textarea>\n\n <!-- Recipient Count -->\n <verbena-input\n name=\"MinNoOfActor\"\n label=\"Recipient Count\"\n type=\"number\"\n formControlName=\"MinNoOfActor\"\n placeHolder=\"Enter Count\"\n />\n\n <!-- Pass On Rule -->\n <verbena-input\n name=\"PassOnRule\"\n label=\"Pass On Rule\"\n formControlName=\"PassOnRule\"\n placeHolder=\"Select Rule\"\n />\n\n <!-- Duration -->\n <verbena-input\n name=\"Duration\"\n label=\"Duration\"\n type=\"number\"\n formControlName=\"Duration\"\n placeHolder=\"Set Duration\"\n />\n\n <!-- Actor Rule -->\n <div class=\"space-y-1\">\n <label for=\"actor-rule\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Actor Rule\n </label>\n <verben-drop-down\n id=\"actor-rule\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Rule\"\n [options]=\"actorRules\"\n formControlName=\"ActorRule\"\n class=\"form-control\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Assignment Type -->\n <div class=\"space-y-1\">\n <label for=\"assignment\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Assignment Type\n </label>\n <verben-drop-down\n id=\"assignment\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select\"\n [options]=\"assignmentTypes\"\n formControlName=\"AssignmentType\"\n class=\"form-control\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Tags -->\n <div class=\"space-y-1\">\n <label for=\"tags\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Tags\n </label>\n <verben-drop-down\n id=\"tags\"\n selectKey=\"Code\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n formControlName=\"Tags\"\n class=\"form-control\"\n [filter]=\"true\"\n filterBy=\"Name\"\n >\n </verben-drop-down>\n </div>\n\n <!-- Is Exit Point -->\n <div class=\"flex items-center gap-4\">\n <label for=\"is-exit-point\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Exit Point\n </label>\n <verbena-switch\n id=\"is-exit-point\"\n onText=\"Yes\"\n offText=\"No\"\n [onColor]=\"'#1A237E'\"\n formControlName=\"IsExitPoint\"\n ></verbena-switch>\n </div>\n </form>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"w-full flex justify-between gap-4 p-4 border-t border-gray-200\">\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveStage()\"\n [disabled]=\"stageForm.invalid\"\n >\n Save\n </button>\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"deleteStage()\"\n >\n Delete\n </button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteStage()\"\n ></verbena-button>\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n class=\"ml-auto\"\n ></verbena-button>\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n (click)=\"saveStage()\"\n [disable]=\"stageForm.invalid\"\n ></verbena-button>\n </div>\n</ng-template>\n" }]
|
|
2036
2011
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: WorkflowDataService }, { type: NodeManagementService }, { type: PopupService }], propDecorators: { closed: [{
|
|
2037
2012
|
type: Output
|
|
2038
2013
|
}], saved: [{
|
|
@@ -2088,7 +2063,7 @@ class ConditionsPopupComponent {
|
|
|
2088
2063
|
this.closed.emit();
|
|
2089
2064
|
}
|
|
2090
2065
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
|
|
2091
|
-
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:
|
|
2066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: { visible: "visible", decisionNodeId: "decisionNodeId", newConnectionId: "newConnectionId", popupX: "popupX", popupY: "popupY" }, outputs: { closed: "closed", saved: "saved" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [style.position]=\"'fixed'\"\n [style.left.px]=\"popupX\"\n [style.top.px]=\"popupY\"\n>\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div\n class=\"p-4 bg-white border border-purple-300 rounded shadow-md w-80\"\n dropdown-content\n >\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"text-lg font-medium\">Decision Conditions</h3>\n <button class=\"text-gray-500 hover:text-gray-700\" (click)=\"onClose()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"mb-3\">\n <p class=\"text-sm text-gray-600\">Define a condition for this branch.</p>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"block text-sm font-medium mb-1\">Condition</label>\n <input\n type=\"text\"\n [(ngModel)]=\"currentCondition\"\n placeholder=\"e.g., order.amount > 500,000\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 text-sm\"\n />\n </div>\n\n <div\n class=\"space-y-3 max-h-60 overflow-y-auto\"\n *ngIf=\"connectionConditions.length > 1\"\n >\n <h4 class=\"text-sm font-medium\">Existing Conditions:</h4>\n @for (conn of connectionConditions; track conn.connectionId) { @if\n (!conn.isActive) {\n <div class=\"border rounded p-3\">\n <div class=\"mb-2\">\n <span class=\"font-medium\">{{ conn.targetNodeName }}</span>\n </div>\n <div>\n <input\n type=\"text\"\n [value]=\"conn.condition\"\n placeholder=\"No condition\"\n class=\"w-full px-3 py-2 rounded border border-gray-200 bg-gray-50 text-sm\"\n readonly\n />\n </div>\n </div>\n } }\n </div>\n\n <div class=\"flex justify-end mt-4 pt-3 border-t border-gray-200\">\n <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onClose()\"\n >\n Cancel\n </button>\n <button\n class=\"px-4 py-2 bg-yellow-300 text-black rounded text-sm font-medium\"\n (click)=\"saveCondition()\"\n >\n Save\n </button>\n </div>\n </div>\n </verben-pop-Up>\n</div>\n", styles: [".border-purple-400{border-color:#d36cff}.bg-purple-50{background-color:#f9f5ff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
|
|
2092
2067
|
}
|
|
2093
2068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionsPopupComponent, decorators: [{
|
|
2094
2069
|
type: Component,
|
|
@@ -2324,7 +2299,7 @@ class EscalationDialogComponent {
|
|
|
2324
2299
|
return escalation !== null && escalation.DataState !== 'New';
|
|
2325
2300
|
}
|
|
2326
2301
|
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 });
|
|
2327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Message ID?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
2302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, workflowCode: { classPropertyName: "workflowCode", publicName: "workflowCode", isSignal: true, isRequired: true, transformFunction: null }, stageCode: { classPropertyName: "stageCode", publicName: "stageCode", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div>\n <div class=\"mb-4 space-y-4\">\n <!-- <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Escalation\n </label>\n <verben-drop-down\n id=\"operation-action\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n placeholder=\"Select Operation Action\"\n [options]=\"operationActions()\"\n optionLabel=\"Name\"\n optionValue=\"Code\"\n [ngModel]=\"selectedOperationAction | async\"\n (ngModelChange)=\"selectedOperationAction.next($event)\"\n class=\"form-control\"\n ></verben-drop-down>\n </div> -->\n\n <div class=\"space-y-4\" *ngFor=\"let message of selectedMessages; let i = index\">\n <div class=\"space-y-1\">\n <label [for]=\"message + '-' + i\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Message {{ i + 1 }}\n </label>\n <verben-drop-down [id]=\"message + '-' + i\" selectKey=\"Code\" styleClass=\"w-full\" width=\"100%\"\n [multiselect]=\"false\" placeholder=\"Select Message\" [options]=\"reportSchedules()\" optionLabel=\"Name\"\n [ngModel]=\"message\" (ngModelChange)=\"onMessageSelected($event, i)\" class=\"form-control\"></verben-drop-down>\n </div>\n\n @if (message) {\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'task-data-source'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Task Data Source?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'task-data-source'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsTaskDataSource\"></verbena-switch>\n </div>\n\n <div class=\"flex items-center gap-4\">\n <label [for]=\"'is-' + message + '-' + i + 'is-message-id'\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is Message ID?\n </label>\n <verbena-switch [id]=\"'is-' + message + '-' + i + 'is-message-id'\" onText=\"Yes\" offText=\"No\"\n [onColor]=\"'#1A237E'\" [(ngModel)]=\"message.IsMessageId\"></verbena-switch>\n </div>\n }\n\n <div class=\"border border-primary -m-2 rounded-lg flex flex-col gap-3\" *ngIf=\"message\">\n <div class=\"space-y-3 border-b border-primary px-2 py-3\">\n <verbena-input name=\"Subject\" [(ngModel)]=\"message.Subject\" [readOnly]=\"true\" />\n <verbena-input name=\"Recipients\" [(ngModel)]=\"message.Recipients\" [readOnly]=\"true\" />\n </div>\n <lib-editor [editorConfig]=\"editorConfig\" [editorMode]=\"editorMode\"\n [(ngModel)]=\"message.PlainMessage\"></lib-editor>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between items-center gap-8 w-full\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Add Message\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"add\" [svgHeight]=\"14\"\n [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"addMessage()\"></verbena-button>\n\n <div class=\"flex gap-2 items-center\">\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Delete\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"110px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"delete\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"deleteEscalation()\"></verbena-button>\n\n <verbena-button style=\"cursor: pointer\" type=\"button\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n borderRadius=\"8px\" pd=\"10px 20px\" width=\"160px\" height=\"39px\" fontWeight=\"600\" fontSize=\"12px\" svg=\"send\"\n [svgHeight]=\"14\" [svgWidth]=\"14\" [svgSize]=\"'sm'\" (click)=\"saveMessages()\"></verbena-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.EditorComponent, selector: "lib-editor", inputs: ["themeColor", "editorMode", "editorConfig", "content"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
|
|
2328
2303
|
}
|
|
2329
2304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EscalationDialogComponent, decorators: [{
|
|
2330
2305
|
type: Component,
|
|
@@ -2436,7 +2411,7 @@ class ActionDialogComponent {
|
|
|
2436
2411
|
console.log('Dialog opened, received data:', eventData);
|
|
2437
2412
|
}
|
|
2438
2413
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.FormBuilder }, { token: WorkflowDataService }, { token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
|
|
2439
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Operation Action\n </label>\n <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n </div>\n\n <div class=\"space-y-1\">\n <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Target Status\n </label>\n <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n </div>\n </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex gap-2 items-center justify-end\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n class=\"ml-auto\"></verbena-button>\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteAction()\"\n ></verbena-button>\n </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type:
|
|
2414
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible()\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <form [formGroup]=\"actionForm\" class=\"mb-4 space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" formControlName=\"Name\" placeHolder=\"Enter Name\" />\n\n <div class=\"space-y-1\">\n <label for=\"operation-action\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Operation Action\n </label>\n <verben-drop-down id=\"operation-action\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Name\"\n placeholder=\"Select Operation Action\" [options]=\"operationActions()\" optionLabel=\"Name\" optionValue=\"Code\"\n formControlName=\"OperationAction\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n </div>\n\n <div class=\"space-y-1\">\n <label for=\"target-status\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Target Status\n </label>\n <verben-drop-down id=\"target-status\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" filterBy=\"Description\"\n placeholder=\"Select Target Status\" [options]=\"flowableStatuses()\" optionLabel=\"Description\" optionValue=\"Name\"\n formControlName=\"TargetStatus\" class=\"form-control\" [showClear]=\"true\" [filter]=\"true\"></verben-drop-down>\n </div>\n </form>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex gap-2 items-center justify-end\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"\n class=\"ml-auto\"></verbena-button>\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" (click)=\"saveAction()\" [disable]=\"actionForm.invalid\"></verbena-button>\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n (click)=\"deleteAction()\"\n ></verbena-button>\n </div>\n</ng-template>\n\n", styles: ["::ng-deep .modal-footer{display:flex;justify-content:space-between!important}::ng-deep button,button{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
2440
2415
|
}
|
|
2441
2416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionDialogComponent, decorators: [{
|
|
2442
2417
|
type: Component,
|
|
@@ -3055,7 +3030,12 @@ class DesignerCanvasComponent {
|
|
|
3055
3030
|
this.hideConnectionPopup();
|
|
3056
3031
|
return;
|
|
3057
3032
|
}
|
|
3058
|
-
const { endX, endY
|
|
3033
|
+
const { endX, endY } = pathData;
|
|
3034
|
+
// Determine the target swimlane from the drop position (NOT the source
|
|
3035
|
+
// swimlane). `addNode` expects an absolute canvas Y plus the target
|
|
3036
|
+
// swimlane index, and performs the swimlane-relative conversion itself.
|
|
3037
|
+
let targetSwimlaneIndex = Math.floor(endY / this.swimlaneHeight);
|
|
3038
|
+
targetSwimlaneIndex = Math.max(0, Math.min(targetSwimlaneIndex, this.state.swimlanes.length - 1));
|
|
3059
3039
|
// Get source node info
|
|
3060
3040
|
const sourcePoint = this.state.draggingConnectionData.sourcePoint;
|
|
3061
3041
|
if (!sourcePoint) {
|
|
@@ -3072,12 +3052,10 @@ class DesignerCanvasComponent {
|
|
|
3072
3052
|
// Store information for later stage creation
|
|
3073
3053
|
this.pendingDecisionConnection = {
|
|
3074
3054
|
decisionNodeId: sourceNodeInfo.node.id,
|
|
3075
|
-
swimlaneIndex:
|
|
3055
|
+
swimlaneIndex: targetSwimlaneIndex,
|
|
3076
3056
|
x: endX,
|
|
3077
3057
|
y: endY,
|
|
3078
3058
|
};
|
|
3079
|
-
// Calculate popup position - position it near the decision node
|
|
3080
|
-
const swimlaneOffsetY = sourceSwimlaneIndex * 263;
|
|
3081
3059
|
// Center the popup over the connection endpoint
|
|
3082
3060
|
this.decisionConditionPopupX = endX;
|
|
3083
3061
|
this.decisionConditionPopupY = endY - 150; // Position above the endpoint
|
|
@@ -3088,26 +3066,11 @@ class DesignerCanvasComponent {
|
|
|
3088
3066
|
this.hideConnectionPopup();
|
|
3089
3067
|
return;
|
|
3090
3068
|
}
|
|
3091
|
-
const swimlaneIndex = Math.floor(endY / this.swimlaneHeight);
|
|
3092
|
-
const swimlaneTop = swimlaneIndex * this.swimlaneHeight;
|
|
3093
|
-
// Calculate swimlane-relative position
|
|
3094
|
-
const swimlaneOffsetY = sourceSwimlaneIndex * 263;
|
|
3095
|
-
let relativeY = endY - swimlaneOffsetY - 50; // Add half node height for better alignment
|
|
3096
|
-
const swimlaneBottom = swimlaneTop + 263;
|
|
3097
|
-
// Clamp nodeY so node stays within swimlane
|
|
3098
|
-
console.log(endY, swimlaneIndex, swimlaneOffsetY, swimlaneBottom);
|
|
3099
|
-
if (endY - 50 < swimlaneTop) {
|
|
3100
|
-
console.log('Less');
|
|
3101
|
-
relativeY = swimlaneTop; // Node would overflow above, so align to top
|
|
3102
|
-
}
|
|
3103
|
-
else if (endY + 50 > swimlaneBottom) {
|
|
3104
|
-
console.log('More');
|
|
3105
|
-
relativeY = swimlaneBottom - 100; // Node would overflow below, so align to bottom
|
|
3106
|
-
}
|
|
3107
3069
|
// Handle preconditions based on node type
|
|
3108
3070
|
if (nodeType === 'stage') {
|
|
3109
|
-
// Create the stage
|
|
3110
|
-
|
|
3071
|
+
// Create the stage in the target swimlane. `addNode` converts the
|
|
3072
|
+
// absolute endY to a swimlane-relative position internally.
|
|
3073
|
+
const newNode = this.state.addNode(targetSwimlaneIndex, 'stage', endX, endY, { Name: 'New Stage' } // Add default properties
|
|
3111
3074
|
);
|
|
3112
3075
|
if (newNode &&
|
|
3113
3076
|
newNode.connectionPoints &&
|
|
@@ -3123,7 +3086,7 @@ class DesignerCanvasComponent {
|
|
|
3123
3086
|
const targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
|
|
3124
3087
|
if (targetPoint) {
|
|
3125
3088
|
// Create the connection
|
|
3126
|
-
const connection = this.state.createConnection(newNode.id, targetPoint.id,
|
|
3089
|
+
const connection = this.state.createConnection(newNode.id, targetPoint.id, targetSwimlaneIndex);
|
|
3127
3090
|
if (connection) {
|
|
3128
3091
|
this.onConnectionCreated(connection);
|
|
3129
3092
|
}
|
|
@@ -3133,14 +3096,14 @@ class DesignerCanvasComponent {
|
|
|
3133
3096
|
return;
|
|
3134
3097
|
}
|
|
3135
3098
|
else if (nodeType === 'subflow') {
|
|
3136
|
-
console.log('Creating subflow from connection at:', endX, endY, 'swimlane:',
|
|
3099
|
+
console.log('Creating subflow from connection at:', endX, endY, 'swimlane:', targetSwimlaneIndex);
|
|
3137
3100
|
// Show workflow selection popup and store connection data for later use
|
|
3138
|
-
this.showSubflowSelectionPopup(endX, endY,
|
|
3101
|
+
this.showSubflowSelectionPopup(endX, endY, targetSwimlaneIndex);
|
|
3139
3102
|
this.hideConnectionPopup();
|
|
3140
3103
|
return;
|
|
3141
3104
|
}
|
|
3142
3105
|
// For other nodes Create the new node at the end position of the connection
|
|
3143
|
-
const newNode = this.state.addNode(
|
|
3106
|
+
const newNode = this.state.addNode(targetSwimlaneIndex, nodeType, endX, endY);
|
|
3144
3107
|
if (newNode &&
|
|
3145
3108
|
newNode.connectionPoints &&
|
|
3146
3109
|
newNode.connectionPoints.length > 0) {
|
|
@@ -3159,7 +3122,7 @@ class DesignerCanvasComponent {
|
|
|
3159
3122
|
targetPoint = newNode.connectionPoints.find((p) => p.type === opposingType);
|
|
3160
3123
|
if (targetPoint) {
|
|
3161
3124
|
// Create the connection
|
|
3162
|
-
const connection = this.state.createConnection(newNode.id, targetPoint.id,
|
|
3125
|
+
const connection = this.state.createConnection(newNode.id, targetPoint.id, targetSwimlaneIndex);
|
|
3163
3126
|
if (connection) {
|
|
3164
3127
|
this.onConnectionCreated(connection);
|
|
3165
3128
|
}
|
|
@@ -3628,7 +3591,7 @@ class DesignerCanvasComponent {
|
|
|
3628
3591
|
});
|
|
3629
3592
|
}
|
|
3630
3593
|
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 });
|
|
3631
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", stagePropertiesUpdated: "stagePropertiesUpdated", actionPropertiesUpdated: "actionPropertiesUpdated" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n <svg #canvas [attr.width]=\"canvasWidth\" [attr.height]=\"canvasHeight\" class=\"designer-canvas\"\n (click)=\"onCanvasClick($event)\">\n <defs>\n <!-- Grid pattern definition -->\n\n <pattern id=\"grid\" [attr.width]=\"gridSize\" [attr.height]=\"gridSize\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"0.5\" />\n </pattern>\n\n <!-- Arrow head marker definition -->\n <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n </marker>\n\n <!-- Connection point: outer transparent ring expands the hit target so a\n connection drag can be started without pixel-precise aim. The visible\n circle stays at r=5. The hit ring extends inward up to the node's\n drag-handle edge so clicks near the edge fall to the connection point\n (rendered topmost) rather than to the drag handle beneath. -->\n <g id=\"connection-point-template\">\n <circle r=\"12\" fill=\"transparent\" />\n <circle r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\n </g>\n\n <!-- Dashed line style for connection preview -->\n <pattern id=\"dashed-line\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n <line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" />\n </pattern>\n\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n </clipPath>\n }\n </defs>\n\n <!-- Background grid -->\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n <!-- Display a message when no swimlanes exist -->\n @if (state.swimlanes.length === 0) {\n <text x=\"50%\" y=\"50%\" font-family=\"sans-serif\" font-size=\"16\" fill=\"#94a3b8\" text-anchor=\"middle\">\n Select the Swimlane tool and click on the canvas to add a swimlane\n </text>\n }\n\n <!-- This is where workflow elements will be added later -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- <g\n [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n >\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"263\"\n fill=\"#ffffff\"\n stroke=\"#e2e8f0\"\n stroke-width=\"1\"\n ></rect>\n\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n height=\"40\"\n fill=\"#f8fafc\"\n stroke=\"#e2e8f0\"\n stroke-width=\"1\"\n ></rect>\n\n <text\n x=\"20\"\n y=\"25\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#333333\"\n font-weight=\"bold\"\n >\n {{ swimlane.label }}\n </text>\n\n <g\n class=\"edit-swimlane-button\"\n [attr.transform]=\"'translate(100, 20)'\"\n (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \"\n >\n <rect\n x=\"-5\"\n y=\"-15\"\n width=\"40\"\n height=\"20\"\n fill=\"#f3e8ff\"\n rx=\"3\"\n ry=\"3\"\n stroke=\"#d8b4fe\"\n stroke-width=\"1\"\n ></rect>\n <text\n x=\"15\"\n y=\"0\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#7e22ce\"\n text-anchor=\"middle\"\n >\n Edit\n </text>\n </g>\n\n <g [attr.transform]=\"'translate(200, 20)'\">\n @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n {\n <text\n [attr.x]=\"i * 100\"\n y=\"5\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#666666\"\n >\n {{ tag.Name }}\n </text>\n } @if (swimlane.tags.length > 3) {\n <text\n [attr.x]=\"3 * 100 + 10\"\n y=\"5\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#666666\"\n >\n +{{ swimlane.tags.length - 3 }} more\n </text>\n }\n </g>\n </g> -->\n\n <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n <!-- Swimlane container - remove stroke to make it purely background -->\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" [attr.height]=\"263\"\n [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\" stroke=\"none\"></rect>\n\n <!-- Vertical swimlane label on the left -->\n <g class=\"swimlane-label\">\n <!-- Purple background for the label -->\n <rect x=\"0.5\" y=\"0.5\" width=\"43\" height=\"215\" rx=\"10.5\" fill=\"white\" stroke=\"#D36CFF\"></rect>\n\n <!-- Plus button at the top -->\n <g (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \">\n <rect x=\"12.5\" y=\"10\" width=\"18\" height=\"18\" fill=\"transparent\" style=\"cursor: pointer\"></rect>\n\n <path d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n fill=\"#0000FF\" class=\"plus-icon\" style=\"cursor: pointer\"></path>\n </g>\n\n <!-- Swimlane label -->\n <text x=\"22\" y=\"106\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#333333\" text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 100)\">\n {{\n swimlane.label.length > 12\n ? swimlane.label.substring(0, 10) + \"...\"\n : swimlane.label\n }}\n </text>\n\n <!-- Tag count indicator at the bottom -->\n <rect x=\"11.5\" y=\"187\" width=\"21\" height=\"19\" rx=\"9.5\" fill=\"#9E9E9E\"></rect>\n <text x=\"24\" y=\"206\" font-family=\"sans-serif\" font-size=\"12\" fill=\"black\" text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 200)\">\n {{ swimlane.tags.length }}\n </text>\n </g>\n </g>\n\n }\n\n <!-- Nodes -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- Render nodes in this swimlane -->\n @for (node of swimlane.nodes; track node.id) {\n <g class=\"node-element\" [attr.transform]=\"\n 'translate(' + node.x + ',' + (node.y + swimlane.order * 263) + ')'\"\n (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseleave)=\"hideConnectionPoints(node.id)\">\n <!-- Start node indicator (circle and arrow) for the first node -->\n @if (node.isStartNode) {\n <!-- Circle -->\n <circle cx=\"-50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></circle>\n <!-- Form icon for start node -->\n <svg:g (click)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n \" class=\"stage-icon\" transform=\"translate(-45, 42)\" style=\"cursor: pointer; pointer-events: all\">\n <!-- Transparent rectangle to capture clicks -->\n <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n <svg:path\n d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\" transform=\"scale(0.7)\" />\n </svg:g>\n <!-- Arrow from circle to node -->\n <path d=\"M -20 50 L 0 50\" stroke=\"#D36CFF\" stroke-width=\"1\" marker-end=\"url(#arrowhead)\"></path>\n }\n\n <!-- Exit point indicator (circle and arrow) -->\n @if (node.stageData?.IsExitPoint) {\n <!-- Arrow from node to circle -->\n <path [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\" stroke=\"#D36CFF\" stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"></path>\n <!-- Circle -->\n <circle [attr.cx]=\"node.width + 50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"2\"></circle>\n }\n\n <!-- Inner drag-handle: inset 12px so the node edge ring stays drag-free.\n Rendered BEFORE the node shapes/icons so the clickable icons paint on\n top of it and win pointer events; the node body still falls through to\n this handle because its shape/label use pointer-events:none.\n Connection point <use> elements are rendered after everything so they\n stay topmost and win pointer events at the node edges. -->\n <rect class=\"node-drag-handle\"\n [attr.x]=\"12\" [attr.y]=\"12\"\n [attr.width]=\"node.width - 24\" [attr.height]=\"node.height - 24\"\n fill=\"transparent\"\n [style.cursor]=\"getCursorForNode(node.id)\"\n (mousedown)=\"onNodeMouseDown($event, node, swimlane.order)\" />\n\n <!-- Stage node -->\n @if (node.type === 'stage') {\n <!-- <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"node.width\"\n [attr.height]=\"node.height\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></rect> -->\n <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"></svg:g>\n }\n\n <!-- Decision node -->\n @if (node.type === 'decision') {\n <path [attr.d]=\"\n 'M 0 ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' 0' +\n ' L ' +\n node.width +\n ' ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' ' +\n node.height +\n ' Z'\n \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\" style=\"pointer-events: none\"></path>\n\n <!-- Decision node condition indicator icon -->\n <svg:g (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\" class=\"decision-condition-icon\"\n [attr.transform]=\"\n 'translate(' +\n (node.width / 2 - 10) +\n ',' +\n (node.height / 2 - 10) +\n ')'\n \">\n <svg:rect x=\"-5\" y=\"-5\" width=\"30\" height=\"30\" fill=\"transparent\" style=\"cursor: pointer\" />\n <svg:path d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n fill=\"#D36CFF\" />\n </svg:g>\n }\n\n <!-- Form node -->\n @if (node.type === 'form') {\n <path\n d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n transform=\"scale(0.7)\" fill=\"none\" stroke=\"#D36CFF\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n <path\n d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n transform=\"scale(0.7)\" stroke=\"#D36CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n fill=\"#D36CFF\" style=\"pointer-events: none\">\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\" [isSubflow]=\"true\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"></svg:g>\n }\n\n <!-- Connection points for this node (rendered last = topmost) -->\n @for (point of node.connectionPoints || []; track point.id) {\n @if (isConnectionPointVisible(node.id)) {\n <use class=\"connection-point\" [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\"\n [attr.id]=\"point.id\" (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\n }\n }\n </g>\n <!-- A transparent hover area for improved hover detection -->\n <rect [attr.x]=\"node.x - 10\" [attr.y]=\"node.y - 10\" [attr.width]=\"node.width + 20\" [attr.height]=\"node.height + 20\"\n fill=\"transparent\" (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseout)=\"hideConnectionPoints(node.id)\" style=\"pointer-events: none\" />\n } }\n\n <!-- Connections -->\n @for (connection of state.connections; track connection.id) {\n <g class=\"connection-element\">\n <path [attr.d]=\"getConnectionPathForSavedConnection(connection)\" stroke=\"#D36CFF\" stroke-width=\"2\" fill=\"none\"\n marker-end=\"url(#arrowhead)\"></path>\n\n <!-- Connection Label -->\n @if (connection.sourceNodeId && connection.targetNodeId) {\n <foreignObject [attr.x]=\"getLabelPosition(connection).x\" [attr.y]=\"getLabelPosition(connection).y\" width=\"150\"\n height=\"40\" style=\"overflow: visible; pointer-events: all;\" [attr.transform]=\"'translate(-75, -10)'\">\n <wf-label-editor [label]=\"connection.label || 'New Action'\" [x]=\"0\" [y]=\"0\" [isConnection]=\"true\"\n (labelChange)=\"saveConnectionLabel(connection, $event)\" (openDialog)=\"onShowActionDialog(connection)\" />\n </foreignObject>\n }\n </g>\n }\n\n <!-- Connection preview line -->\n @if (state.isConnectionDragging()) {\n <g>\n <path [attr.d]=\"getConnectionPath()\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" fill=\"none\"></path>\n </g>\n }\n </svg>\n\n <div *ngIf=\"popupVisible\" [style.position]=\"'absolute'\" [style.left.px]=\"popupX\" [style.top.px]=\"popupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '99' }\" [enableMouseLeave]=\"false\"\n (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md\" dropdown-content>\n <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let type of allowedNodeTypes\">\n <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"createNodeConnection(type)\">\n Create {{ type | titlecase }}\n </button>\n </ng-container>\n <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"hideConnectionPopup()\">\n Cancel\n </button>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div *ngIf=\"showStartNodeFormPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"startNodeFormPopupX\"\n [style.top.px]=\"startNodeFormPopupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n style=\"background-color: white; z-index: 1000\">\n <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n Loading forms...\n </div>\n <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\" style=\"max-height: 192px; overflow-y: auto;\">\n <div class=\"mb-3\">\n <button\n class=\"w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(null)\">\n Clear form selection\n </button>\n </div>\n <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n [ngClass]=\"{ 'bg-blue-50 !border-blue-500 !border-2 font-semibold': form?.Code === activeNodeForFormSelection?.stageData?.formId}\"\n (click)=\"selectStartNodeForm(form)\">\n {{ form.Name }}\n </button>\n </div>\n <div *ngIf=\"startNodeFormsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n No forms available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div *ngIf=\"showSubflowPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"subflowPopupX\"\n [style.top.px]=\"subflowPopupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n style=\"background-color: white; z-index: 1000\">\n <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n Loading workflows...\n </div>\n <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\" style=\"max-height: 192px; overflow-y: auto;\">\n <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectSubflowWorkflow(workflow)\">\n {{ workflow.Name }}\n </button>\n </div>\n <div *ngIf=\"workflowsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n No workflows available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <lib-conditions-popup [visible]=\"showDecisionConditionDialog\" [decisionNodeId]=\"activeDecisionNodeId\"\n [newConnectionId]=\"activeConnectionId\" [popupX]=\"decisionConditionPopupX\" [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\" (saved)=\"onDecisionConditionSaved($event)\"></lib-conditions-popup>\n\n <!-- <lib-decision-popup\n [visible]=\"showConditionsDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n ></lib-decision-popup> -->\n\n <lib-stage-dialog [visible]=\"showStageDialogLocal\" [stageData]=\"activeStageData || {}\"\n (closed)=\"onStageDialogClosed()\" (saved)=\"onStageDialogSaved($event)\"></lib-stage-dialog>\n\n <lib-action-dialog [visible]=\"showActionDialogLocal\" [actionData]=\"activeActionData\" (closed)=\"onActionDialogClosed()\"\n (saved)=\"onActionDialogSaved($event)\" (deleted)=\"onActionDialogDeleted($event)\"></lib-action-dialog>\n\n\n <lib-escalation-dialog [visible]=\"showEscalationDialogLocal\" [type]=\"activeEscalationType()!\"\n [stageCode]=\"activeStageCode() || ''\" [workflowCode]=\"state.workflow?.Code || ''\"\n (closed)=\"onEscalationDialogClosed()\"></lib-escalation-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}.node-drag-handle{pointer-events:all;-webkit-user-select:none;user-select:none}.connection-point{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved", "deleted"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
3594
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DesignerCanvasComponent, selector: "lib-designer-canvas", inputs: { selectedTool: "selectedTool" }, outputs: { clickedPosition: "clickedPosition", subflowSelected: "subflowSelected", stagePropertiesUpdated: "stagePropertiesUpdated", actionPropertiesUpdated: "actionPropertiesUpdated" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"canvas-container\">\n <svg #canvas [attr.width]=\"canvasWidth\" [attr.height]=\"canvasHeight\" class=\"designer-canvas\"\n (click)=\"onCanvasClick($event)\">\n <defs>\n <!-- Grid pattern definition -->\n\n <pattern id=\"grid\" [attr.width]=\"gridSize\" [attr.height]=\"gridSize\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"0.5\" />\n </pattern>\n\n <!-- Arrow head marker definition -->\n <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#D36CFF\" />\n </marker>\n\n <!-- Connection point: outer transparent ring expands the hit target so a\n connection drag can be started without pixel-precise aim. The visible\n circle stays at r=5. The hit ring extends inward up to the node's\n drag-handle edge so clicks near the edge fall to the connection point\n (rendered topmost) rather than to the drag handle beneath. -->\n <g id=\"connection-point-template\">\n <circle r=\"12\" fill=\"transparent\" />\n <circle r=\"5\" fill=\"#D36CFF\" stroke=\"#FFFFFF\" stroke-width=\"1\" />\n </g>\n\n <!-- Dashed line style for connection preview -->\n <pattern id=\"dashed-line\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n <line x1=\"0\" y1=\"5\" x2=\"10\" y2=\"5\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" />\n </pattern>\n\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <clipPath [attr.id]=\"'swimlane-clip-' + swimlane.order\">\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" height=\"263\" />\n </clipPath>\n }\n </defs>\n\n <!-- Background grid -->\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n\n <!-- Display a message when no swimlanes exist -->\n @if (state.swimlanes.length === 0) {\n <text x=\"50%\" y=\"50%\" font-family=\"sans-serif\" font-size=\"16\" fill=\"#94a3b8\" text-anchor=\"middle\">\n Select the Swimlane tool and click on the canvas to add a swimlane\n </text>\n }\n\n <!-- This is where workflow elements will be added later -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- <g\n [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\"\n [attr.clip-path]=\"'url(#swimlane-clip-' + swimlane.order + ')'\"\n >\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n [attr.height]=\"263\"\n fill=\"#ffffff\"\n stroke=\"#e2e8f0\"\n stroke-width=\"1\"\n ></rect>\n\n <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"canvasWidth\"\n height=\"40\"\n fill=\"#f8fafc\"\n stroke=\"#e2e8f0\"\n stroke-width=\"1\"\n ></rect>\n\n <text\n x=\"20\"\n y=\"25\"\n font-family=\"sans-serif\"\n font-size=\"14\"\n fill=\"#333333\"\n font-weight=\"bold\"\n >\n {{ swimlane.label }}\n </text>\n\n <g\n class=\"edit-swimlane-button\"\n [attr.transform]=\"'translate(100, 20)'\"\n (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \"\n >\n <rect\n x=\"-5\"\n y=\"-15\"\n width=\"40\"\n height=\"20\"\n fill=\"#f3e8ff\"\n rx=\"3\"\n ry=\"3\"\n stroke=\"#d8b4fe\"\n stroke-width=\"1\"\n ></rect>\n <text\n x=\"15\"\n y=\"0\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#7e22ce\"\n text-anchor=\"middle\"\n >\n Edit\n </text>\n </g>\n\n <g [attr.transform]=\"'translate(200, 20)'\">\n @for (tag of swimlane.tags.slice(0, 3); track tag.Name; let i = $index)\n {\n <text\n [attr.x]=\"i * 100\"\n y=\"5\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#666666\"\n >\n {{ tag.Name }}\n </text>\n } @if (swimlane.tags.length > 3) {\n <text\n [attr.x]=\"3 * 100 + 10\"\n y=\"5\"\n font-family=\"sans-serif\"\n font-size=\"12\"\n fill=\"#666666\"\n >\n +{{ swimlane.tags.length - 3 }} more\n </text>\n }\n </g>\n </g> -->\n\n <g [attr.transform]=\"'translate(0,' + swimlane.order * 263 + ')'\">\n <!-- Swimlane container - remove stroke to make it purely background -->\n <rect x=\"0\" y=\"0\" [attr.width]=\"canvasWidth\" [attr.height]=\"263\"\n [attr.fill]=\"swimlane.order % 2 === 0 ? '#FCF3FF' : '#ECFFF5'\" stroke=\"none\"></rect>\n\n <!-- Vertical swimlane label on the left -->\n <g class=\"swimlane-label\">\n <!-- Purple background for the label -->\n <rect x=\"0.5\" y=\"0.5\" width=\"43\" height=\"215\" rx=\"10.5\" fill=\"white\" stroke=\"#D36CFF\"></rect>\n\n <!-- Plus button at the top -->\n <g (click)=\"\n onEditSwimlane($event, swimlane, swimlane.order);\n $event.stopPropagation()\n \">\n <rect x=\"12.5\" y=\"10\" width=\"18\" height=\"18\" fill=\"transparent\" style=\"cursor: pointer\"></rect>\n\n <path d=\"M22.52 12.174V17.08H27.47V18.51H22.52V23.394H21.2V18.51H16.25V17.08H21.2V12.174H22.52Z\"\n fill=\"#0000FF\" class=\"plus-icon\" style=\"cursor: pointer\"></path>\n </g>\n\n <!-- Swimlane label -->\n <text x=\"22\" y=\"106\" font-family=\"sans-serif\" font-size=\"14\" fill=\"#333333\" text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 100)\">\n {{\n swimlane.label.length > 12\n ? swimlane.label.substring(0, 10) + \"...\"\n : swimlane.label\n }}\n </text>\n\n <!-- Tag count indicator at the bottom -->\n <rect x=\"11.5\" y=\"187\" width=\"21\" height=\"19\" rx=\"9.5\" fill=\"#9E9E9E\"></rect>\n <text x=\"24\" y=\"206\" font-family=\"sans-serif\" font-size=\"12\" fill=\"black\" text-anchor=\"middle\"\n transform=\"rotate(-90, 22, 200)\">\n {{ swimlane.tags.length }}\n </text>\n </g>\n </g>\n\n }\n\n <!-- Nodes -->\n @for (swimlane of state.swimlanes; track swimlane.order) {\n <!-- Render nodes in this swimlane -->\n @for (node of swimlane.nodes; track node.id) {\n <g class=\"node-element\" [attr.transform]=\"\n 'translate(' + node.x + ',' + (node.y + swimlane.order * 263) + ')'\"\n (mouseenter)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseleave)=\"hideConnectionPoints(node.id)\">\n <!-- Start node indicator (circle and arrow) for the first node -->\n @if (node.isStartNode) {\n <!-- Circle -->\n <circle cx=\"-50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\"></circle>\n <!-- Form icon for start node -->\n <svg:g (click)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order)\n \" class=\"stage-icon\" transform=\"translate(-45, 42)\" style=\"cursor: pointer; pointer-events: all\">\n <!-- Transparent rectangle to capture clicks -->\n <svg:rect x=\"-2\" y=\"-2\" width=\"24\" height=\"24\" fill=\"transparent\" style=\"cursor: pointer\" />\n <svg:path\n d=\"M16.5 20.475V17.475H13.5V16.475H16.5V13.475H17.5V16.475H20.5V17.475H17.5V20.475H16.5ZM3.5 17.5V16.5H4.5V17.5H3.5ZM6.5 17.5V16.5H11.517C11.5057 16.6767 11.5043 16.845 11.513 17.005C11.521 17.165 11.531 17.33 11.543 17.5H6.5ZM3.5 13.5V12.5H4.5V13.5H3.5ZM6.5 13.5V12.5H13.804C13.6127 12.6387 13.4333 12.7913 13.266 12.958C13.0993 13.1247 12.9377 13.3053 12.781 13.5H6.5ZM3.5 9.5V8.5H4.5V9.5H3.5ZM6.5 9.5V8.5H18.5V9.5H6.5ZM3.5 5.5V4.5H4.5V5.5H3.5ZM6.5 5.5V4.5H18.5V5.5H6.5Z\"\n [attr.fill]=\"state.workflowFormId ? '#D36CFF' : 'black'\" transform=\"scale(0.7)\" />\n </svg:g>\n <!-- Arrow from circle to node -->\n <path d=\"M -20 50 L 0 50\" stroke=\"#D36CFF\" stroke-width=\"1\" marker-end=\"url(#arrowhead)\"></path>\n }\n\n <!-- Exit point indicator (circle and arrow) -->\n @if (node.stageData?.IsExitPoint) {\n <!-- Arrow from node to circle -->\n <path [attr.d]=\"'M ' + node.width + ' 50 L ' + (node.width + 20) + ' 50'\" stroke=\"#D36CFF\" stroke-width=\"1\"\n marker-end=\"url(#arrowhead)\"></path>\n <!-- Circle -->\n <circle [attr.cx]=\"node.width + 50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"2\"></circle>\n }\n\n <!-- Inner drag-handle: inset 12px so the node edge ring stays drag-free.\n Rendered BEFORE the node shapes/icons so the clickable icons paint on\n top of it and win pointer events; the node body still falls through to\n this handle because its shape/label use pointer-events:none.\n Connection point <use> elements are rendered after everything so they\n stay topmost and win pointer events at the node edges. -->\n <rect class=\"node-drag-handle\"\n [attr.x]=\"12\" [attr.y]=\"12\"\n [attr.width]=\"node.width - 24\" [attr.height]=\"node.height - 24\"\n fill=\"transparent\"\n [style.cursor]=\"getCursorForNode(node.id)\"\n (mousedown)=\"onNodeMouseDown($event, node, swimlane.order)\" />\n\n <!-- Stage node -->\n @if (node.type === 'stage') {\n <!-- <rect\n x=\"0\"\n y=\"0\"\n [attr.width]=\"node.width\"\n [attr.height]=\"node.height\"\n fill=\"none\"\n stroke=\"#D36CFF\"\n stroke-width=\"1\"\n ></rect> -->\n <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"></svg:g>\n }\n\n <!-- Decision node -->\n @if (node.type === 'decision') {\n <path [attr.d]=\"\n 'M 0 ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' 0' +\n ' L ' +\n node.width +\n ' ' +\n node.height / 2 +\n ' L ' +\n node.width / 2 +\n ' ' +\n node.height +\n ' Z'\n \" fill=\"none\" stroke=\"#D36CFF\" stroke-width=\"1\" style=\"pointer-events: none\"></path>\n\n <!-- Decision node condition indicator icon -->\n <svg:g (click)=\"showDecisionConditionsPopup($event, node, swimlane.order)\" class=\"decision-condition-icon\"\n [attr.transform]=\"\n 'translate(' +\n (node.width / 2 - 10) +\n ',' +\n (node.height / 2 - 10) +\n ')'\n \">\n <svg:rect x=\"-5\" y=\"-5\" width=\"30\" height=\"30\" fill=\"transparent\" style=\"cursor: pointer\" />\n <svg:path d=\"M10 0H20V2H10V0ZM10 8H20V10H10V8ZM10 4H20V6H10V4ZM0 0H8V2H0V0ZM0 8H8V10H0V8ZM0 4H8V6H0V4Z\"\n fill=\"#D36CFF\" />\n </svg:g>\n }\n\n <!-- Form node -->\n @if (node.type === 'form') {\n <path\n d=\"M95.0625 50.5591V95.0625C95.0625 97.9716 93.9069 100.762 91.8498 102.819C89.7928 104.876 87.0028 106.031 84.0938 106.031H32.9062C29.9972 106.031 27.2072 104.876 25.1502 102.819C23.0931 100.762 21.9375 97.9716 21.9375 95.0625V21.9375C21.9375 19.0284 23.0931 16.2385 25.1502 14.1814C27.2072 12.1244 29.9972 10.9688 32.9062 10.9688H55.4722C57.4109 10.969 59.2701 11.7392 60.6412 13.1099L92.9213 45.3901C94.292 46.7611 95.0622 48.6204 95.0625 50.5591Z\"\n transform=\"scale(0.7)\" fill=\"none\" stroke=\"#D36CFF\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n <path\n d=\"M58.5 12.7969V40.2188C58.5 42.1581 59.2704 44.0181 60.6418 45.3895C62.0131 46.7608 63.8731 47.5312 65.8125 47.5312H93.2344\"\n transform=\"scale(0.7)\" stroke=\"#D36CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"pointer-events: none\" />\n <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-family=\"sans-serif\" font-size=\"14\"\n fill=\"#D36CFF\" style=\"pointer-events: none\">\n Form\n </text>\n }\n\n <!-- Subflow node -->\n @if (node.type === 'subflow') {\n <svg:g lib-stage-node [node]=\"node\" [isStartNode]=\"node.isStartNode\" [isSubflow]=\"true\"\n (stagePropertiesUpdated)=\"onStagePropertiesUpdated($event)\" (showShieldDialog)=\"onShowShieldDialog($event)\"\n (showEscalationDialog)=\"onShowEscalationDialog($event)\" (showFormDialog)=\"\n toggleStartNodeFormPopup($event, node.x, node.y, swimlane.order, node)\n \"></svg:g>\n }\n\n <!-- Connection points for this node (rendered last = topmost) -->\n @for (point of node.connectionPoints || []; track point.id) {\n @if (isConnectionPointVisible(node.id)) {\n <use class=\"connection-point\" [attr.href]=\"'#connection-point-template'\" [attr.x]=\"point.x\" [attr.y]=\"point.y\"\n [attr.id]=\"point.id\" (mousedown)=\"startConnectionDrag($event, point, swimlane.order)\" />\n }\n }\n </g>\n <!-- A transparent hover area for improved hover detection -->\n <rect [attr.x]=\"node.x - 10\" [attr.y]=\"node.y - 10\" [attr.width]=\"node.width + 20\" [attr.height]=\"node.height + 20\"\n fill=\"transparent\" (mouseover)=\"showConnectionPoints(node.id, swimlane.order)\"\n (mouseout)=\"hideConnectionPoints(node.id)\" style=\"pointer-events: none\" />\n } }\n\n <!-- Connections -->\n @for (connection of state.connections; track connection.id) {\n <g class=\"connection-element\">\n <path [attr.d]=\"getConnectionPathForSavedConnection(connection)\" stroke=\"#D36CFF\" stroke-width=\"2\" fill=\"none\"\n marker-end=\"url(#arrowhead)\"></path>\n\n <!-- Connection Label -->\n @if (connection.sourceNodeId && connection.targetNodeId) {\n <foreignObject [attr.x]=\"getLabelPosition(connection).x\" [attr.y]=\"getLabelPosition(connection).y\" width=\"150\"\n height=\"40\" style=\"overflow: visible; pointer-events: all;\" [attr.transform]=\"'translate(-75, -10)'\">\n <wf-label-editor [label]=\"connection.label || 'New Action'\" [x]=\"0\" [y]=\"0\" [isConnection]=\"true\"\n (labelChange)=\"saveConnectionLabel(connection, $event)\" (openDialog)=\"onShowActionDialog(connection)\" />\n </foreignObject>\n }\n </g>\n }\n\n <!-- Connection preview line -->\n @if (state.isConnectionDragging()) {\n <g>\n <path [attr.d]=\"getConnectionPath()\" stroke=\"#D36CFF\" stroke-width=\"2\" stroke-dasharray=\"5,5\" fill=\"none\"></path>\n </g>\n }\n </svg>\n\n <div *ngIf=\"popupVisible\" [style.position]=\"'absolute'\" [style.left.px]=\"popupX\" [style.top.px]=\"popupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '99' }\" [enableMouseLeave]=\"false\"\n (dropdownOpenChange)=\"$event ? null : hideConnectionPopup()\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md\" dropdown-content>\n <h4 class=\"mb-2 font-medium\">Create Connection</h4>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngFor=\"let type of allowedNodeTypes\">\n <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"createNodeConnection(type)\">\n Create {{ type | titlecase }}\n </button>\n </ng-container>\n <button class=\"px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50\"\n (click)=\"hideConnectionPopup()\">\n Cancel\n </button>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div *ngIf=\"showStartNodeFormPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"startNodeFormPopupX\"\n [style.top.px]=\"startNodeFormPopupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n style=\"background-color: white; z-index: 1000\">\n <h4 class=\"mb-2 font-medium\">Select Workflow Form</h4>\n <div *ngIf=\"isLoadingStartNodeForms\" class=\"text-center py-2\">\n Loading forms...\n </div>\n <div *ngIf=\"!isLoadingStartNodeForms\" class=\"max-h-48 overflow-y-auto\" style=\"max-height: 192px; overflow-y: auto;\">\n <div class=\"mb-3\">\n <button\n class=\"w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectStartNodeForm(null)\">\n Clear form selection\n </button>\n </div>\n <div *ngFor=\"let form of startNodeFormsList\" class=\"mb-1\">\n <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n [ngClass]=\"{ 'bg-blue-50 !border-blue-500 !border-2 font-semibold': form?.Code === activeNodeForFormSelection?.stageData?.formId}\"\n (click)=\"selectStartNodeForm(form)\">\n {{ form.Name }}\n </button>\n </div>\n <div *ngIf=\"startNodeFormsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n No forms available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <div *ngIf=\"showSubflowPopup\" [style.position]=\"'absolute'\" [style.left.px]=\"subflowPopupX\"\n [style.top.px]=\"subflowPopupY\">\n <verben-pop-Up [dropdownOpen]=\"true\" [customStyles]=\"{ 'z-index': '100' }\">\n <div dropdown-trigger style=\"display: none\">\n <!-- Hidden trigger element -->\n </div>\n <div class=\"p-3 bg-white border border-gray-200 rounded shadow-md w-64\" dropdown-content\n style=\"background-color: white; z-index: 1000\">\n <h4 class=\"mb-2 font-medium\">Select Workflow</h4>\n <div *ngIf=\"isLoadingWorkflows\" class=\"text-center py-2\">\n Loading workflows...\n </div>\n <div *ngIf=\"!isLoadingWorkflows\" class=\"max-h-48 overflow-y-auto\" style=\"max-height: 192px; overflow-y: auto;\">\n <div *ngFor=\"let workflow of workflowsList\" class=\"mb-1\">\n <button class=\"w-full px-3 py-2 bg-white border border-gray-200 rounded text-sm hover:bg-gray-50 text-left\"\n (click)=\"selectSubflowWorkflow(workflow)\">\n {{ workflow.Name }}\n </button>\n </div>\n <div *ngIf=\"workflowsList.length === 0\" class=\"text-center py-2 text-gray-500\">\n No workflows available\n </div>\n </div>\n </div>\n </verben-pop-Up>\n </div>\n\n <lib-conditions-popup [visible]=\"showDecisionConditionDialog\" [decisionNodeId]=\"activeDecisionNodeId\"\n [newConnectionId]=\"activeConnectionId\" [popupX]=\"decisionConditionPopupX\" [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\" (saved)=\"onDecisionConditionSaved($event)\"></lib-conditions-popup>\n\n <!-- <lib-decision-popup\n [visible]=\"showConditionsDialog\"\n [decisionNodeId]=\"activeDecisionNodeId\"\n [popupX]=\"decisionConditionPopupX\"\n [popupY]=\"decisionConditionPopupY\"\n (closed)=\"onDecisionConditionCancelled()\"\n ></lib-decision-popup> -->\n\n <lib-stage-dialog [visible]=\"showStageDialogLocal\" [stageData]=\"activeStageData || {}\"\n (closed)=\"onStageDialogClosed()\" (saved)=\"onStageDialogSaved($event)\"></lib-stage-dialog>\n\n <lib-action-dialog [visible]=\"showActionDialogLocal\" [actionData]=\"activeActionData\" (closed)=\"onActionDialogClosed()\"\n (saved)=\"onActionDialogSaved($event)\" (deleted)=\"onActionDialogDeleted($event)\"></lib-action-dialog>\n\n\n <lib-escalation-dialog [visible]=\"showEscalationDialogLocal\" [type]=\"activeEscalationType()!\"\n [stageCode]=\"activeStageCode() || ''\" [workflowCode]=\"state.workflow?.Code || ''\"\n (closed)=\"onEscalationDialogClosed()\"></lib-escalation-dialog>\n</div>\n", styles: [".canvas-container{flex:1;overflow:auto;background-color:#fff}.designer-canvas{min-width:100%;min-height:100%;cursor:default}.designer-canvas:focus{outline:none}.edit-swimlane-button{cursor:pointer}.edit-swimlane-button:hover rect{fill:#ddd6fe}.decision-condition-icon{cursor:pointer}.decision-condition-icon:hover path{fill:#c084fc}.swimlane-label{z-index:10;cursor:default}.plus-icon:hover{fill:#d36cff}.swimlane-container{pointer-events:none}.swimlane-container>*{pointer-events:auto}.node-element{z-index:10}.connection-element{z-index:5}.node-drag-handle{pointer-events:all;-webkit-user-select:none;user-select:none}.connection-point{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5$1.LabelEditorComponent, selector: "wf-label-editor", inputs: ["label", "x", "y", "isConnection", "isSwimlane"], outputs: ["labelChange", "openDialog"] }, { kind: "component", type: StageNodeComponent, selector: "svg:g[lib-stage-node]", inputs: ["node", "isStartNode", "isSubflow", "stageData"], outputs: ["stagePropertiesUpdated", "parallelExecutionToggled", "showShieldDialog", "showEscalationDialog", "showFormDialog"] }, { kind: "component", type: StageDialogComponent, selector: "lib-stage-dialog", inputs: ["visible", "stageData"], outputs: ["closed", "saved"] }, { kind: "component", type: ConditionsPopupComponent, selector: "lib-conditions-popup", inputs: ["visible", "decisionNodeId", "newConnectionId", "popupX", "popupY"], outputs: ["closed", "saved"] }, { kind: "component", type: EscalationDialogComponent, selector: "lib-escalation-dialog", inputs: ["visible", "workflowCode", "stageCode", "type"], outputs: ["closed", "created"] }, { kind: "component", type: ActionDialogComponent, selector: "lib-action-dialog", inputs: ["visible", "actionData"], outputs: ["closed", "saved", "deleted"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
3632
3595
|
}
|
|
3633
3596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DesignerCanvasComponent, decorators: [{
|
|
3634
3597
|
type: Component,
|
|
@@ -3753,7 +3716,7 @@ class SwimlaneDialogComponent {
|
|
|
3753
3716
|
this.searchQuery = '';
|
|
3754
3717
|
}
|
|
3755
3718
|
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 });
|
|
3756
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Tags</h2>\n <span class=\"text-xs text-[#3E3E3E]/70\"\n >{{ this.selectedTags.length }}/{{ tags.length }}</span\n >\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"applySelection()\"\n >Create</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <!-- <input\n type=\"text\"\n placeholder=\"Enter Name\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"workflowName\"\n />\n\n <input\n type=\"search\"\n placeholder=\"Filter Tags\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"searchQuery\"\n />\n </div>\n\n <div class=\"\">\n <div class=\"py-3\">\n <label class=\"flex items-center\">\n <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n <span class=\"text-sm\">Select All</span>\n </label>\n </div>\n\n <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n class=\"mr-3\"\n [checked]=\"isTagSelected(tag.Name)\"\n (change)=\"toggleTagSelection(tag.Name)\"\n />\n <span class=\"text-sm\">{{ tag.Name }}</span>\n <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n >(Required)</span\n >\n </label>\n </div> -->\n\n <verbena-input\n [(ngModel)]=\"workflowName\"\n [border]=\"'1px solid #9A9FBF66'\"\n placeHolder=\"Enter Swimlane Label\"\n [bgColor]=\"'white'\"\n ></verbena-input>\n\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tags\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tags\"\n [(ngModel)]=\"selectedTags\"\n class=\"form-control\"\n [filter]=\"true\"\n [filterBy]=\"'Name'\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"selectedTags.length < 1\"\n (click)=\"applySelection()\"\n ></verbena-button>\n\n <!-- <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n ></verbena-button> -->\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
3719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SwimlaneDialogComponent, selector: "lib-swimlane-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, swimlaneData: { classPropertyName: "swimlaneData", publicName: "swimlaneData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", created: "created" }, ngImport: i0, template: "<verben-dialogue\n [showCloseIcon]=\"true\"\n [dismissOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n [size]=\"'medium'\"\n [mode]=\"'drawer'\"\n [disableFooter]=\"false\"\n [isVisible]=\"visible\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\"\n>\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div\n class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\"\n >\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span\n class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"\n ></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Tags</h2>\n <span class=\"text-xs text-[#3E3E3E]/70\"\n >{{ this.selectedTags.length }}/{{ tags.length }}</span\n >\n </div>\n <span\n class=\"font-medium cursor-pointer text-[#3E3E3E]/70\"\n (click)=\"applySelection()\"\n >Create</span\n >\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <!-- <input\n type=\"text\"\n placeholder=\"Enter Name\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"workflowName\"\n />\n\n <input\n type=\"search\"\n placeholder=\"Filter Tags\"\n class=\"w-full px-4 py-2 rounded-lg border border-[#E7C10B] outline-none\"\n [(ngModel)]=\"searchQuery\"\n />\n </div>\n\n <div class=\"\">\n <div class=\"py-3\">\n <label class=\"flex items-center\">\n <input type=\"checkbox\" class=\"mr-3\" [(ngModel)]=\"allSelected\" />\n <span class=\"text-sm\">Select All</span>\n </label>\n </div>\n\n <div *ngFor=\"let tag of filteredTags\" class=\"py-3\">\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n class=\"mr-3\"\n [checked]=\"isTagSelected(tag.Name)\"\n (change)=\"toggleTagSelection(tag.Name)\"\n />\n <span class=\"text-sm\">{{ tag.Name }}</span>\n <span *ngIf=\"!tag.IsOptional\" class=\"ml-2 text-xs text-red-500\"\n >(Required)</span\n >\n </label>\n </div> -->\n\n <verbena-input\n [(ngModel)]=\"workflowName\"\n [border]=\"'1px solid #9A9FBF66'\"\n placeHolder=\"Enter Swimlane Label\"\n [bgColor]=\"'white'\"\n ></verbena-input>\n\n <verben-drop-down\n selectKey=\"Code\"\n label=\"Tags\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"true\"\n placeholder=\"Select\"\n [options]=\"tags\"\n optionLabel=\"Name\"\n id=\"tags\"\n [(ngModel)]=\"selectedTags\"\n class=\"form-control\"\n [filter]=\"true\"\n [filterBy]=\"'Name'\"\n [showClear]=\"true\"\n >\n </verben-drop-down>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div\n class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\"\n >\n <!-- <button\n class=\"px-4 py-2 mr-2 bg-white border border-gray-200 rounded text-sm font-medium\"\n (click)=\"onDialogClose($event)\"\n >\n Cancel\n </button> -->\n\n <verbena-button\n (click)=\"onDialogClose($event)\"\n text=\"Cancel\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n\n <verbena-button\n type=\"submit\"\n text=\"Save\"\n bgColor=\"#FFE681\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n [disable]=\"selectedTags.length < 1\"\n (click)=\"applySelection()\"\n ></verbena-button>\n\n <!-- <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n bgColor=\"#999999\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n ></verbena-button> -->\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
3757
3720
|
}
|
|
3758
3721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwimlaneDialogComponent, decorators: [{
|
|
3759
3722
|
type: Component,
|
|
@@ -3817,7 +3780,7 @@ class ActorTagsDialogComponent {
|
|
|
3817
3780
|
this.isViewOnly = false;
|
|
3818
3781
|
}
|
|
3819
3782
|
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 });
|
|
3820
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n </div>\n <span class=\"font-medium cursor-pointer text-[#3E3E3E]/70\" (click)=\"onSave()\">Save</span>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n </verben-drop-down>\n\n <div class=\"flex items-center gap-4 mt-4\">\n <label for=\"is-view-only\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is View Only?\n </label>\n <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'#1A237E'\"\n [(ngModel)]=\"isViewOnly\"></verbena-switch>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
3783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActorTagsDialogComponent, selector: "lib-actor-tags-dialog", inputs: { visible: "visible", workflowCode: "workflowCode" }, outputs: { closed: "closed" }, ngImport: i0, template: "<verben-dialogue [showCloseIcon]=\"true\" [dismissOutsideClick]=\"true\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n [mode]=\"'drawer'\" [disableFooter]=\"false\" [isVisible]=\"visible\" [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\" [footerTemplate]=\"footerTemplate\" (openModal)=\"onDialogOpen($event)\"\n (closeModal)=\"onDialogClose($event)\">\n</verben-dialogue>\n\n<ng-template #headerTemplate>\n <div class=\"flex items-center justify-between p-3 text-xs border-b-4 border-[#FFE681]\">\n <button class=\"mr-4\" type=\"button\" (click)=\"onDialogClose($event)\">\n <span class=\"block w-2.5 h-2.5 border-t border-l border-[#3E3E3E]/70 transform -rotate-45\"></span>\n </button>\n <div class=\"text-center\">\n <h2 class=\"text-sm font-medium\">Select Actor Tag</h2>\n </div>\n <span class=\"font-medium cursor-pointer text-[#3E3E3E]/70\" (click)=\"onSave()\">Save</span>\n </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n <div class=\"p-3\">\n <div class=\"mb-4 grid gap-4\">\n <verben-drop-down selectKey=\"Code\" label=\"Tag\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\"\n placeholder=\"Select Tag\" [options]=\"tags\" optionLabel=\"Name\" id=\"tag\" [(ngModel)]=\"selectedTag\"\n class=\"form-control\" [filter]=\"true\" filterBy=\"Name\" [showClear]=\"true\">\n </verben-drop-down>\n\n <div class=\"flex items-center gap-4 mt-4\">\n <label for=\"is-view-only\" class=\"text-sm font-semibold text-[#3E3E3E]\">\n Is View Only?\n </label>\n <verbena-switch id=\"is-view-only\" onText=\"Yes\" offText=\"No\" [onColor]=\"'#1A237E'\"\n [(ngModel)]=\"isViewOnly\"></verbena-switch>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"flex justify-between w-full items-center p-4 border-t border-gray-200\">\n <verbena-button (click)=\"onDialogClose($event)\" text=\"Cancel\" styleType=\"ylw-outline\"></verbena-button>\n\n <verbena-button type=\"submit\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\" pd=\"10px 20px\"\n width=\"114px\" height=\"39px\" [disable]=\"!selectedTag\" (click)=\"onSave()\"></verbena-button>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i5.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i5.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }] });
|
|
3821
3784
|
}
|
|
3822
3785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActorTagsDialogComponent, decorators: [{
|
|
3823
3786
|
type: Component,
|
|
@@ -4228,7 +4191,7 @@ class DecisionPopupComponent {
|
|
|
4228
4191
|
this.closed.emit();
|
|
4229
4192
|
}
|
|
4230
4193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, deps: [{ token: WorkflowDesignerState }], target: i0.ɵɵFactoryTarget.Component });
|
|
4231
|
-
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:
|
|
4194
|
+
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: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }] });
|
|
4232
4195
|
}
|
|
4233
4196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DecisionPopupComponent, decorators: [{
|
|
4234
4197
|
type: Component,
|
|
@@ -4738,7 +4701,8 @@ class WorkflowDesignerModule {
|
|
|
4738
4701
|
LabelEditorComponent,
|
|
4739
4702
|
EditorModule,
|
|
4740
4703
|
VerbenaInputModule,
|
|
4741
|
-
VerbenaSwitchModule
|
|
4704
|
+
VerbenaSwitchModule,
|
|
4705
|
+
VerbenaTextareaModule], exports: [WorkflowDesignerComponent] });
|
|
4742
4706
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, providers: [
|
|
4743
4707
|
NodeManagementService,
|
|
4744
4708
|
ConnectionService,
|
|
@@ -4755,7 +4719,8 @@ class WorkflowDesignerModule {
|
|
|
4755
4719
|
LabelEditorComponent,
|
|
4756
4720
|
EditorModule,
|
|
4757
4721
|
VerbenaInputModule,
|
|
4758
|
-
VerbenaSwitchModule
|
|
4722
|
+
VerbenaSwitchModule,
|
|
4723
|
+
VerbenaTextareaModule] });
|
|
4759
4724
|
}
|
|
4760
4725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkflowDesignerModule, decorators: [{
|
|
4761
4726
|
type: NgModule,
|
|
@@ -4785,6 +4750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4785
4750
|
EditorModule,
|
|
4786
4751
|
VerbenaInputModule,
|
|
4787
4752
|
VerbenaSwitchModule,
|
|
4753
|
+
VerbenaTextareaModule,
|
|
4788
4754
|
],
|
|
4789
4755
|
providers: [
|
|
4790
4756
|
NodeManagementService,
|