@brggroup/share-lib 0.0.42 → 0.0.44

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.
Files changed (7) hide show
  1. package/fesm2022/brggroup-share-lib.mjs +63 -36
  2. package/fesm2022/brggroup-share-lib.mjs.map +1 -1
  3. package/lib/components/extend-input/extend-input.d.ts +8 -5
  4. package/lib/components/extend-input/extend-input.d.ts.map +1 -1
  5. package/lib/components/wf-editor/workflow-editor.component.d.ts +6 -3
  6. package/lib/components/wf-editor/workflow-editor.component.d.ts.map +1 -1
  7. package/package.json +1 -1
package/fesm2022/brggroup-share-lib.mjs CHANGED
@@ -2188,6 +2188,7 @@ class ExtendInput {
2188
2188
  noBottom = false;
2189
2189
  selectModeType = 'default';
2190
2190
  autocomplete = '';
2191
+ autofocus = false;
2191
2192
  inputWidth = '';
2192
2193
  inputHeight = '';
2193
2194
  borderBottomOnly = false;
@@ -2205,16 +2206,29 @@ class ExtendInput {
2205
2206
  _ngModelChange = new EventEmitter();
2206
2207
  onclickClearIcon = new EventEmitter();
2207
2208
  onenter = new EventEmitter();
2208
- ngOnInit() { }
2209
+ inputElement;
2210
+ ngAfterViewInit() {
2211
+ this.tryFocus();
2212
+ }
2213
+ ngOnChanges(changes) {
2214
+ if (changes['autofocus']?.currentValue === true) {
2215
+ // chờ DOM render xong (tránh lỗi khi *ngIf)
2216
+ setTimeout(() => this.tryFocus());
2217
+ }
2218
+ }
2219
+ tryFocus() {
2220
+ if (this.autofocus && this.inputElement?.nativeElement) {
2221
+ this.inputElement.nativeElement.focus();
2222
+ }
2223
+ }
2209
2224
  _onNgModelChange() {
2210
2225
  this._ngModelChange.emit(this._ngModel);
2211
2226
  }
2212
- inputElement;
2213
2227
  focus() {
2214
2228
  this.inputElement?.nativeElement?.select();
2215
2229
  }
2216
2230
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
2217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInput, isStandalone: true, selector: "extend-input", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", inputClass: "inputClass", labelSpan: "labelSpan", allowClear: "allowClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", onclickClearIcon: "onclickClearIcon", onenter: "onenter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n @if (controlName) {\n <div [formGroup]=\"formData\">\n <nz-form-item>\n <nz-form-label\n [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n [nzLabelAlign]=\"labelAlign\"\n [nzRequired]=\"required\"\n [nzFor]=\"controlName\"\n nzNoColon\n nzLabelWrap\n >\n {{ label }}\n </nz-form-label>\n <nz-form-control\n [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [formControlName]=\"controlName\"\n [autocomplete]=\"autocomplete\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass\"\n (keyup.enter)=\"onenter.emit()\"\n />\n </nz-form-control>\n </nz-form-item>\n </div>\n } @else {\n @if (label) {\n <nz-form-item>\n <nz-form-label\n [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n [nzLabelAlign]=\"labelAlign\"\n [nzRequired]=\"required\"\n [nzFor]=\"controlName\"\n nzNoColon\n nzLabelWrap\n >\n {{ label }}\n </nz-form-label>\n <nz-form-control\n [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [(ngModel)]=\"_ngModel\"\n [autocomplete]=\"autocomplete\"\n (ngModelChange)=\"_onNgModelChange()\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass\"\n (keyup.enter)=\"onenter.emit()\"\n />\n </nz-input-group>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n [autocomplete]=\"autocomplete\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n (keyup.enter)=\"onenter.emit()\"\n />\n }\n }\n</div>\n\n<ng-template #clearIcon>\n <i\n nz-icon\n nzType=\"close-circle\"\n nzTheme=\"twotone\"\n nzTwotoneColor=\"#999\"\n *ngIf=\"_ngModel\"\n (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n style=\"cursor: pointer\"\n ></i>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
2231
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInput, isStandalone: true, selector: "extend-input", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", inputClass: "inputClass", labelSpan: "labelSpan", allowClear: "allowClear", disabled: "disabled", readOnly: "readOnly", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", autofocus: "autofocus", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", onclickClearIcon: "onclickClearIcon", onenter: "onenter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n @if (controlName) {\n <div [formGroup]=\"formData\">\n <nz-form-item>\n <nz-form-label\n [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n [nzLabelAlign]=\"labelAlign\"\n [nzRequired]=\"required\"\n [nzFor]=\"controlName\"\n nzNoColon\n nzLabelWrap\n >\n {{ label }}\n </nz-form-label>\n <nz-form-control\n [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [formControlName]=\"controlName\"\n [autocomplete]=\"autocomplete\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass\"\n (keyup.enter)=\"onenter.emit()\"\n />\n </nz-form-control>\n </nz-form-item>\n </div>\n } @else {\n @if (label) {\n <nz-form-item>\n <nz-form-label\n [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n [nzLabelAlign]=\"labelAlign\"\n [nzRequired]=\"required\"\n [nzFor]=\"controlName\"\n nzNoColon\n nzLabelWrap\n >\n {{ label }}\n </nz-form-label>\n <nz-form-control\n [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-input-group [nzSize]=\"size\" [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [(ngModel)]=\"_ngModel\"\n [autocomplete]=\"autocomplete\"\n (ngModelChange)=\"_onNgModelChange()\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass\"\n (keyup.enter)=\"onenter.emit()\"\n />\n </nz-input-group>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <input\n #inputElement\n nz-input\n [nzSize]=\"size\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [id]=\"controlName\"\n [name]=\"controlName\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n [autocomplete]=\"autocomplete\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolder\"\n [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n (keyup.enter)=\"onenter.emit()\"\n />\n }\n }\n</div>\n\n<ng-template #clearIcon>\n <i\n nz-icon\n nzType=\"close-circle\"\n nzTheme=\"twotone\"\n nzTwotoneColor=\"#999\"\n *ngIf=\"_ngModel\"\n (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n style=\"cursor: pointer\"\n ></i>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
2218
2232
  }
2219
2233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, decorators: [{
2220
2234
  type: Component,
@@ -2245,6 +2259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2245
2259
  type: Input
2246
2260
  }], autocomplete: [{
2247
2261
  type: Input
2262
+ }], autofocus: [{
2263
+ type: Input
2248
2264
  }], inputWidth: [{
2249
2265
  type: Input
2250
2266
  }], inputHeight: [{
@@ -2837,6 +2853,7 @@ class Workflow extends WF_Template {
2837
2853
  lstStageStatus;
2838
2854
  lstActionType;
2839
2855
  lstActionStatus;
2856
+ editorOption = new WorkflowEditorOption();
2840
2857
  constructor(obj) {
2841
2858
  obj = obj || {};
2842
2859
  super(obj);
@@ -2845,6 +2862,16 @@ class Workflow extends WF_Template {
2845
2862
  this.lstStageStatus = obj.lstStageStatus || [];
2846
2863
  this.lstActionType = obj.lstActionType || [];
2847
2864
  this.lstActionStatus = obj.lstActionStatus || [];
2865
+ this.editorOption = obj.editorOption || new WorkflowEditorOption();
2866
+ }
2867
+ }
2868
+ class WorkflowEditorOption {
2869
+ panX;
2870
+ panY;
2871
+ constructor(obj) {
2872
+ obj = obj || {};
2873
+ this.panX = obj.panX || -5000;
2874
+ this.panY = obj.panY || -5000;
2848
2875
  }
2849
2876
  }
2850
2877
  /**
@@ -2869,14 +2896,12 @@ class WorkflowStageEditorOption {
2869
2896
  x;
2870
2897
  y;
2871
2898
  isReverse;
2872
- isReverseLabel;
2873
2899
  drawerPosition;
2874
2900
  constructor(obj) {
2875
2901
  obj = obj || {};
2876
2902
  this.x = obj.x || 0;
2877
2903
  this.y = obj.y || 0;
2878
2904
  this.isReverse = obj.isReverse || false;
2879
- this.isReverseLabel = obj.isReverseLabel || false;
2880
2905
  this.drawerPosition = obj.drawerPosition || '';
2881
2906
  }
2882
2907
  }
@@ -2995,8 +3020,8 @@ class WorkflowEditorComponent extends BaseComponent {
2995
3020
  panStart;
2996
3021
  // panX = 0;
2997
3022
  // panY = 0;
2998
- panX = -5000;
2999
- panY = -5000;
3023
+ // panX = -5000;
3024
+ // panY = -5000;
3000
3025
  isMoveMode = true;
3001
3026
  canvasRef;
3002
3027
  svgRef;
@@ -3134,8 +3159,8 @@ class WorkflowEditorComponent extends BaseComponent {
3134
3159
  const id = Date.now();
3135
3160
  const code = 'New_Stage';
3136
3161
  // tìm vị trí trống (đơn giản & hiệu quả)
3137
- const baseX = 200 - this.panX;
3138
- const baseY = 120 - this.panY;
3162
+ const baseX = 200 - this.template.editorOption.panX;
3163
+ const baseY = 120 - this.template.editorOption.panY;
3139
3164
  const GAP_X = 200;
3140
3165
  const GAP_Y = 120;
3141
3166
  let x = baseX;
@@ -3413,6 +3438,7 @@ class WorkflowEditorComponent extends BaseComponent {
3413
3438
  // click vào canvas trống
3414
3439
  if (event.target.closest('.workflow-node'))
3415
3440
  return;
3441
+ this.hoverStage = undefined;
3416
3442
  // 🖐 SPACE + drag → pan
3417
3443
  if (this.isMoveMode) {
3418
3444
  this.isPanning = true;
@@ -3433,8 +3459,8 @@ class WorkflowEditorComponent extends BaseComponent {
3433
3459
  if (this.isPanning && this.panStart) {
3434
3460
  const dx = event.clientX - this.panStart.x;
3435
3461
  const dy = event.clientY - this.panStart.y;
3436
- this.panX += dx;
3437
- this.panY += dy;
3462
+ this.template.editorOption.panX += dx;
3463
+ this.template.editorOption.panY += dy;
3438
3464
  this.panStart = {
3439
3465
  x: event.clientX,
3440
3466
  y: event.clientY,
@@ -3575,7 +3601,7 @@ class WorkflowEditorComponent extends BaseComponent {
3575
3601
  setTimeout(() => (this.isDragging = false));
3576
3602
  }
3577
3603
  onClickCanvas(e) {
3578
- console.log('onClickCanvas', e.offsetX, e.offsetY);
3604
+ console.log('onClickCanvas ', e.offsetX, e.offsetY);
3579
3605
  if (!this.connectingFrom)
3580
3606
  return;
3581
3607
  this.connectingPoints.push({
@@ -3587,7 +3613,7 @@ class WorkflowEditorComponent extends BaseComponent {
3587
3613
  //#endregion
3588
3614
  //#region NODE action
3589
3615
  onMouseDownNode(event, node) {
3590
- console.log('onMouseDownNode', node);
3616
+ console.log('onMouseDownNode ', node);
3591
3617
  event.stopPropagation();
3592
3618
  event.preventDefault();
3593
3619
  this.axisLock = null;
@@ -3624,6 +3650,7 @@ class WorkflowEditorComponent extends BaseComponent {
3624
3650
  }
3625
3651
  // CASE 2️⃣: node chưa được chọn → kéo node đơn
3626
3652
  this.lstSelectedStageId.clear();
3653
+ this.hoverStage = undefined;
3627
3654
  // this.selectedNodeIds.add(node.id);
3628
3655
  /* =============================
3629
3656
  * UNDO SNAPSHOT (1 NODE)
@@ -3640,7 +3667,7 @@ class WorkflowEditorComponent extends BaseComponent {
3640
3667
  this.isDragging = false;
3641
3668
  }
3642
3669
  onClickStage(node) {
3643
- console.log('onClickStage', node);
3670
+ console.log('onClickStage ', node);
3644
3671
  this.hoverStage = undefined;
3645
3672
  this.selectedStage = undefined;
3646
3673
  if (this.isDragging)
@@ -4015,10 +4042,10 @@ class WorkflowEditorComponent extends BaseComponent {
4015
4042
  get svgTransform() {
4016
4043
  const cx = this.getCanvasWidth() / 2;
4017
4044
  const cy = this.getCanvasHeight() / 2;
4018
- return `
4019
- translate(${cx} ${cy})
4020
- scale(${this.zoom})
4021
- translate(${-cx} ${-cy})
4045
+ return `
4046
+ translate(${cx} ${cy})
4047
+ scale(${this.zoom})
4048
+ translate(${-cx} ${-cy})
4022
4049
  `;
4023
4050
  }
4024
4051
  zoomIn() {
@@ -4262,9 +4289,9 @@ class WorkflowEditorComponent extends BaseComponent {
4262
4289
  /* =============================
4263
4290
  * 3. PATH THẲNG
4264
4291
  * ============================= */
4265
- return `
4266
- M ${sx} ${sy}
4267
- L ${ex} ${ey}
4292
+ return `
4293
+ M ${sx} ${sy}
4294
+ L ${ex} ${ey}
4268
4295
  `;
4269
4296
  }
4270
4297
  buildRoutedPath(from, toX, toY, ARROW_GAP = 12) {
@@ -4318,11 +4345,11 @@ class WorkflowEditorComponent extends BaseComponent {
4318
4345
  c2x = ex;
4319
4346
  c2y = ey - dir * BASE_CURVE;
4320
4347
  }
4321
- return `
4322
- M ${sx} ${sy}
4323
- C ${c1x} ${c1y},
4324
- ${c2x} ${c2y},
4325
- ${ex} ${ey}
4348
+ return `
4349
+ M ${sx} ${sy}
4350
+ C ${c1x} ${c1y},
4351
+ ${c2x} ${c2y},
4352
+ ${ex} ${ey}
4326
4353
  `;
4327
4354
  }
4328
4355
  /* =============================
@@ -4331,13 +4358,13 @@ class WorkflowEditorComponent extends BaseComponent {
4331
4358
  const routeY = this.findBestRouteY(from, ex, ey);
4332
4359
  const midX = (sx + ex) / 2;
4333
4360
  const CURVE = 40;
4334
- return `
4335
- M ${sx} ${sy}
4336
- C ${sx + CURVE} ${sy},
4337
- ${sx + CURVE} ${routeY},
4338
- ${midX} ${routeY}
4339
- S ${ex - CURVE} ${routeY},
4340
- ${ex} ${ey}
4361
+ return `
4362
+ M ${sx} ${sy}
4363
+ C ${sx + CURVE} ${sy},
4364
+ ${sx + CURVE} ${routeY},
4365
+ ${midX} ${routeY}
4366
+ S ${ex - CURVE} ${routeY},
4367
+ ${ex} ${ey}
4341
4368
  `;
4342
4369
  }
4343
4370
  buildPathThroughPoints(points, ARROW_GAP = 12, tension = 0.1) {
@@ -4422,7 +4449,7 @@ class WorkflowEditorComponent extends BaseComponent {
4422
4449
  });
4423
4450
  }
4424
4451
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4425
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n #canvasRef\n class=\"workflow-canvas\"\n [class.connecting]=\"!!connectingFrom\"\n [class.dragging-point]=\"!!draggingPoint\"\n [style.width.px]=\"CANVAS_WIDTH\"\n [style.height.px]=\"CANVAS_HEIGHT\"\n (mousedown)=\"onMouseDownCanvas($event)\"\n (mousemove)=\"onMouseMoveCanvas($event)\"\n (mouseup)=\"onMouseUpCanvas($event)\"\n (click)=\"onClickCanvas($event)\"\n>\n <!-- \n\n [style.width.px]=\"getCanvasWidth()\"\n [style.height.px]=\"getCanvasHeight()\" \n\n style=\"width: 100%; height: calc(100vh - 120px)\"\n \n -->\n\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n <nz-icon nzType=\"setting\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n <nz-icon nzType=\"setting\"></nz-icon> T\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n <nz-icon nzType=\"save\"></nz-icon>\n </button>\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button\n nz-button\n nzSize=\"small\"\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n nz-tooltip=\"Move mode\"\n (click)=\"isMoveMode = true\"\n >\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n </button>\n <button\n nz-button\n nzSize=\"small\"\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n nz-tooltip=\"Select mode\"\n (click)=\"isMoveMode = false\"\n >\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <!-- UNDO / REDO -->\n <button\n nz-button\n nzSize=\"small\"\n nzType=\"default\"\n [disabled]=\"undoStack.length === 0\"\n nz-tooltip=\"Undo\"\n (click)=\"undo()\"\n >\n <nz-icon nzType=\"undo\"></nz-icon>\n </button>\n\n <button\n nz-button\n nzSize=\"small\"\n nzType=\"default\"\n [disabled]=\"redoStack.length === 0\"\n nz-tooltip=\"Redo\"\n (click)=\"redo()\"\n >\n <nz-icon nzType=\"redo\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <!-- ALIGN -->\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n <span class=\"divider\"></span>\n\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n <span class=\"divider\"></span>\n\n <!-- DISTRIBUTE -->\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\n \u21C4\n </button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\n </div>\n\n <div\n class=\"canvas-content\"\n [class.panning]=\"isMoveMode\"\n [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n >\n <!-- GRID -->\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n <!-- <div class=\"zoom-toolbar\">\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n </div> -->\n\n <!-- SVG EDGES -->\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n <g [attr.transform]=\"svgTransform\">\n <!-- DEFS -->\n <defs>\n <!-- glow effect -->\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n <feMerge>\n <feMergeNode in=\"blur\" />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n\n <!-- arrow markers -->\n <marker\n id=\"arrow-blue\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n refX=\"10\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-red\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n refX=\"10\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-blue-start\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n viewBox=\"0 0 10 10\"\n refX=\"0\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-red-start\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n viewBox=\"0 0 10 10\"\n refX=\"0\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n </marker>\n </defs>\n\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n <path\n class=\"edge-hit\"\n [attr.d]=\"buildPath(e)\"\n (mouseenter)=\"onMouseEnterEdge(e)\"\n (mouseleave)=\"onMouseLeaveEdge(e)\"\n (click)=\"onClickEdge(e, $event)\"\n ></path>\n\n <path\n class=\"edge\"\n [attr.id]=\"'edge-path-' + i\"\n [attr.d]=\"buildPath(e)\"\n marker-end=\"url(#arrow-blue)\"\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n ></path>\n\n <!-- LABEL -->\n <!-- text b\u00E1m theo line -->\n <!-- \n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.ActionText }}\n </textPath>\n </text> \n \n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.labelBack }}\n </textPath>\n </text>\n -->\n\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\n <text\n *ngIf=\"e.ActionText\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.ActionText }}\n </text>\n\n <text\n *ngIf=\"e.allowBack && e.labelBack\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.labelBack }}\n </text>\n </ng-container>\n\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n <path\n class=\"edge-hit\"\n [attr.d]=\"buildPath(e)\"\n (mouseleave)=\"onMouseLeaveEdge(e)\"\n (click)=\"onClickEdge(e, $event)\"\n ></path>\n\n <path\n class=\"edge red\"\n [attr.id]=\"'edge-path-hover-' + i\"\n [attr.d]=\"buildPath(e)\"\n marker-end=\"url(#arrow-red)\"\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n ></path>\n\n <!-- LABEL -->\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.ActionText }}\n </textPath>\n </text>\n\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.labelBack }}\n </textPath>\n </text> -->\n\n <text\n *ngIf=\"e.ActionText\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.ActionText }}\n </text>\n\n <text\n *ngIf=\"e.allowBack && e.labelBack\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.labelBack }}\n </text>\n </ng-container>\n\n <!-- preview -->\n <path\n *ngIf=\"connectingFrom\"\n class=\"edge\"\n [attr.d]=\"buildPreviewPath()\"\n stroke-dasharray=\"5,5\"\n marker-end=\"url(#arrow-blue)\"\n ></path>\n </g>\n </svg>\n\n <div\n *ngIf=\"isSelecting && selectStart && selectEnd\"\n class=\"selection-box\"\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n ></div>\n\n <!-- lstStage -->\n @for (n of lstStage; track $index) {\n @if (n.StageType == \"NODE\") {\n <nz-card\n #nodeEl\n class=\"workflow-node\"\n [attr.data-id]=\"n.Code\"\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">{{ n.Code }}</div>\n\n <div>{{ n.Name }}</div>\n\n @if (!n.editorOption.isReverse) {\n <!-- connector RIGHT: output -->\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n <!-- connector LEFT: input -->\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n } @else {\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n }\n </nz-card>\n }\n <!-- START NODE -->\n @else if (n.StageType === \"START\") {\n <nz-card\n class=\"workflow-node workflow-node-start\"\n style=\"border: unset\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">&nbsp;</div>\n\n <nz-tag\n [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n style=\"position: relative; top: -13px\"\n [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n [nzColor]=\"'green'\"\n >\n {{ n.StageType }}\n </nz-tag>\n\n <!-- connector RIGHT: output -->\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n </nz-card>\n }\n\n <!-- END NODE -->\n @else if (n.StageType === \"END\") {\n <nz-card\n class=\"workflow-node workflow-node-end\"\n style=\"border: unset\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n [class.connecting-source]=\"isConnectingFrom(n)\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">&nbsp;</div>\n\n <nz-tag\n [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n style=\"position: relative; top: -13px\"\n [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n [nzColor]=\"'red'\"\n >\n {{ n.StageType }}\n </nz-tag>\n\n <!-- connector LEFT: input -->\n <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n </nz-card>\n }\n }\n\n <!-- POINTS -->\n @for (p of connectingPoints; track $index) {\n @if (p != draggingPoint) {\n <div\n class=\"waypoint\"\n [style.left.px]=\"p.x\"\n [style.top.px]=\"p.y\"\n (mousedown)=\"onmousedownPoint($event, p)\"\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n ></div>\n } @else {\n <div\n class=\"waypoint dragging\"\n [style.left.px]=\"p.x\"\n [style.top.px]=\"p.y\"\n (mousedown)=\"onmousedownPoint($event, p)\"\n ></div>\n }\n }\n </div>\n</div>\n\n<!-- drawer TEMPLATE -->\n<nz-drawer\n [nzTitle]=\"drawTemplateTitle\"\n nzPlacement=\"right\"\n [nzWidth]=\"500\"\n [nzClosable]=\"false\"\n [nzVisible]=\"drawTemplateVisibel\"\n [nzFooter]=\"footerTplTemplate\"\n (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n <ng-container *nzDrawerContent>\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n <extend-select\n [label]=\"'Type'\"\n [lstItem]=\"template.lstTemplateType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"template.DocType\"\n ></extend-select>\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n <extend-select\n [label]=\"'Print template'\"\n [lstItem]=\"template.lstTemplatePrint\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"template.TemplatePrint\"\n ></extend-select>\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\n\n @for (tag of lstStage; track tag) {\n <nz-tag (click)=\"hoverStage = tag\">\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n @for (tag of template.lstStageStatus; track tag) {\n <nz-tag\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\n >\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n @if (!inputStageStatusVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n <nz-icon nzType=\"plus\" />\n New Action type\n </nz-tag>\n } @else {\n <input\n #inputStageStatusElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Code\"\n [(ngModel)]=\"inputStageStatusCode\"\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\n />\n <input\n #inputStageStatusNameElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Name\"\n [(ngModel)]=\"inputStageStatusName\"\n (blur)=\"handleInputStageStatusConfirm()\"\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\n />\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n @for (tag of template.lstActionType; track tag) {\n <nz-tag\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n (nzOnClose)=\"handleCloseActionType(tag)\"\n >\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n @if (!inputActionTypeVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n <nz-icon nzType=\"plus\" />\n New Action type\n </nz-tag>\n } @else {\n <input\n #inputActionTypeElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Code\"\n [(ngModel)]=\"inputActionTypeCode\"\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\n />\n <input\n #inputActionTypeNameElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Name\"\n [(ngModel)]=\"inputActionTypeName\"\n (blur)=\"handleInputActionTypeConfirm()\"\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\n />\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n @for (tag of template.lstActionStatus; track tag) {\n <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n @if (!inputVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n <nz-icon nzType=\"plus\" />\n New Action status\n </nz-tag>\n } @else {\n <input\n #inputElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"+ New Action status\"\n [(ngModel)]=\"inputValue\"\n (blur)=\"handleInputConfirm()\"\n (keydown.enter)=\"handleInputConfirm()\"\n />\n }\n </ng-container>\n\n <ng-template #footerTplTemplate>\n <div nz-flex [nzGap]=\"6\">\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n <button nz-button nzDanger (click)=\"save()\">Save</button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- drawer STAGE -->\n<nz-drawer\n [nzTitle]=\"drawerTitleStage\"\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n [nzVisible]=\"!!selectedStage\"\n [nzWidth]=\"750\"\n [nzClosable]=\"false\"\n [nzFooter]=\"footerTplNode\"\n (nzOnClose)=\"selectedStage = undefined\"\n>\n <ng-template #drawerTitleStage>\n <div nz-row nzJustify=\"space-between\">\n @if (selectedStage && selectedStage.editorOption) {\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the right\"\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n >\n <nz-icon nzType=\"double-right\"></nz-icon>\n </button>\n STAGE\n } @else {\n STAGE\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the left\"\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n >\n <nz-icon nzType=\"double-left\"></nz-icon>\n </button>\n }\n }\n </div>\n </ng-template>\n <ng-container *nzDrawerContent>\n <ng-container *ngIf=\"selectedStage\">\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n </nz-radio-group>\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Code'\"\n [layOutType]=\"'vertical'\"\n [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n [required]=\"true\"\n [(_ngModel)]=\"selectedStage.Code\"\n ></extend-input>\n\n <extend-textarea\n nz-col\n [nzSpan]=\"16\"\n [label]=\"'Name'\"\n [layOutType]=\"'vertical'\"\n [autoSize]=\"true\"\n [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n [required]=\"true\"\n [(_ngModel)]=\"selectedStage.Name\"\n ></extend-textarea>\n </div>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input-number\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Sequence'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedStage.SeqValue\"\n ></extend-input-number>\n\n <extend-select\n nz-col\n [nzSpan]=\"16\"\n [label]=\"'Org implement'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstOrg\"\n [valueField]=\"'App_Org_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\n ></extend-select>\n </div>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input-number\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Number Day'\"\n [layOutType]=\"'vertical'\"\n [precision]=\"1\"\n [(_ngModel)]=\"selectedStage.NumberDay\"\n ></extend-input-number>\n </div>\n\n @if (selectedStage.editorOption) {\n @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n <extend-checkbox\n [label]=\"'Reverse'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n ></extend-checkbox>\n\n <extend-checkbox\n [label]=\"'Require user action'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\n ></extend-checkbox>\n } @else {\n <extend-checkbox\n [label]=\"'Reverse'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n ></extend-checkbox>\n }\n }\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"16\">\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n <div nz-col>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n <nz-icon nzType=\"plus\"></nz-icon>\n </button>\n </div>\n </div>\n\n <nz-table\n nzSize=\"small\"\n [nzData]=\"selectedStage.lstAction || []\"\n [nzShowPagination]=\"false\"\n [nzNoResult]=\"'&nbsp;'\"\n >\n <thead>\n <tr [hidden]=\"true\">\n <th nzWidth=\"50px\"></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n @for (action of selectedStage.lstAction; track $index) {\n <tr>\n <td>\n <nz-icon\n nzType=\"delete\"\n nzTheme=\"outline\"\n class=\"color-warn cursor-pointer icon-size-16\"\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\n ></nz-icon>\n </td>\n <td (click)=\"hoverAction = action\">\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"action.ActionText\"\n (_ngModelChange)=\"onchangeActionText(action)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"getlstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(action)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.NextStageStatus\"\n ></extend-select>\n </div>\n <box [height]=\"8\"></box>\n <div nz-row><strong>Role</strong></div>\n <div nz-row>\n <extend-select\n nz-col\n nzSpan=\"24\"\n [size]=\"'small'\"\n [lstItem]=\"lstRole\"\n [valueField]=\"'App_Role_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [multiple]=\"true\"\n [(_ngModel)]=\"action._lstRoleId\"\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\n ></extend-select>\n </div>\n <box [height]=\"8\"></box>\n <div nz-row>\n <strong>Email action</strong>\n </div>\n <div nz-row>\n <extend-select\n nz-col\n nzSpan=\"24\"\n [size]=\"'small'\"\n [lstItem]=\"lstEmailAction\"\n [valueField]=\"'ID'\"\n [displayField]=\"'Name'\"\n [multiple]=\"true\"\n [(_ngModel)]=\"action._lstEmailActionId\"\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\n ></extend-select>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n\n <box [height]=\"16\"></box>\n </ng-container>\n </ng-container>\n\n <ng-template #footerTplNode>\n <div\n nz-flex\n [nzGap]=\"6\"\n [nzJustify]=\"\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\n ? 'start'\n : 'end'\n \"\n >\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n <button\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n nz-button\n nzDanger\n (click)=\"deleteStage()\"\n >\n Delete\n </button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- drawer ACTION -->\n<nz-drawer\n [nzTitle]=\"drawerTitleAction\"\n nzTitle=\"ACTION\"\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n [nzClosable]=\"false\"\n [nzWidth]=\"750\"\n [nzVisible]=\"!!selectedAction\"\n [nzFooter]=\"footerTplAction\"\n (nzOnClose)=\"selectedAction = undefined\"\n>\n <ng-template #drawerTitleAction>\n <div nz-row nzJustify=\"space-between\">\n @if (selectedAction && selectedAction.editorOption) {\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the right\"\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n >\n <nz-icon nzType=\"double-right\"></nz-icon>\n </button>\n ACTION\n } @else {\n ACTION\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the left\"\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n >\n <nz-icon nzType=\"double-left\"></nz-icon>\n </button>\n }\n }\n </div>\n </ng-template>\n <ng-container *nzDrawerContent>\n <ng-container *ngIf=\"selectedAction\">\n <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedAction.ActionText\"\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.NextStageStatus\"\n ></extend-select>\n </div>\n\n <!-- <box [height]=\"16\"></box> -->\n <nz-divider></nz-divider>\n\n <extend-checkbox\n [label]=\"'Allow back'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedAction.allowBack\"\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n ></extend-checkbox>\n\n <box [height]=\"16\"></box>\n\n @if (selectedAction.allowBack) {\n <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\n\n @if (selectedBackAction) {\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedBackAction.ActionText\"\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n ></extend-select>\n </div>\n }\n }\n </ng-container>\n </ng-container>\n <ng-template #footerTplAction>\n <div\n nz-flex\n [nzGap]=\"6\"\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\n >\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n [nzTitle]=\"drawSettingTitle\"\n nzPlacement=\"right\"\n [nzClosable]=\"false\"\n [nzVisible]=\"settingVisible\"\n (nzOnClose)=\"settingVisible = false\"\n>\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n <ng-container *nzDrawerContent>\n <div class=\"form-item-no-bottom\">\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n <box [height]=\"16\"></box>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "inputClass", "labelSpan", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "inputSpan", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "autoSize", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i15.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i15.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i15.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i15.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i15.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i15.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
4452
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n @if (n.StageType == \"NODE\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- START NODE -->\r\n @else if (n.StageType === \"START\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <nz-tag [nzColor]=\"'green'\"> {{ n.StageType }} </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"END\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <nz-tag [nzColor]=\"'red'\">\r\n {{ n.StageType }}\r\n </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n @for (tag of lstStage; track tag) {\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\r\n\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n @for (tag of template.lstActionType; track tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\r\n\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\r\n\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\">\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n <button nz-button nzDanger (click)=\"save()\">Save</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"750\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"START\">START</label>\r\n <label nz-radio nzValue=\"NODE\">NODE</label>\r\n <label nz-radio nzValue=\"END\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-textarea\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [autoSize]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-textarea>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number Day'\"\r\n [layOutType]=\"'vertical'\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table\r\n nzSize=\"small\"\r\n [nzData]=\"selectedStage.lstAction || []\"\r\n [nzShowPagination]=\"false\"\r\n [nzNoResult]=\"'&nbsp;'\"\r\n >\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"50px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of selectedStage.lstAction; track $index) {\r\n <tr>\r\n <td>\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td (click)=\"hoverAction = action\">\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row><strong>Role</strong></div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>\r\n <strong>Email action</strong>\r\n </div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "inputClass", "labelSpan", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "inputSpan", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "autoSize", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i15.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i15.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i15.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i15.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i15.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i15.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
4426
4453
  }
4427
4454
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
4428
4455
  type: Component,
@@ -4447,7 +4474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
4447
4474
  ExtendInputNumber,
4448
4475
  NzTableModule,
4449
4476
  NzDividerModule,
4450
- ], template: "<div\n #canvasRef\n class=\"workflow-canvas\"\n [class.connecting]=\"!!connectingFrom\"\n [class.dragging-point]=\"!!draggingPoint\"\n [style.width.px]=\"CANVAS_WIDTH\"\n [style.height.px]=\"CANVAS_HEIGHT\"\n (mousedown)=\"onMouseDownCanvas($event)\"\n (mousemove)=\"onMouseMoveCanvas($event)\"\n (mouseup)=\"onMouseUpCanvas($event)\"\n (click)=\"onClickCanvas($event)\"\n>\n <!-- \n\n [style.width.px]=\"getCanvasWidth()\"\n [style.height.px]=\"getCanvasHeight()\" \n\n style=\"width: 100%; height: calc(100vh - 120px)\"\n \n -->\n\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n <nz-icon nzType=\"setting\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n <nz-icon nzType=\"setting\"></nz-icon> T\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n <nz-icon nzType=\"save\"></nz-icon>\n </button>\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <button\n nz-button\n nzSize=\"small\"\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n nz-tooltip=\"Move mode\"\n (click)=\"isMoveMode = true\"\n >\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n </button>\n <button\n nz-button\n nzSize=\"small\"\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n nz-tooltip=\"Select mode\"\n (click)=\"isMoveMode = false\"\n >\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <!-- UNDO / REDO -->\n <button\n nz-button\n nzSize=\"small\"\n nzType=\"default\"\n [disabled]=\"undoStack.length === 0\"\n nz-tooltip=\"Undo\"\n (click)=\"undo()\"\n >\n <nz-icon nzType=\"undo\"></nz-icon>\n </button>\n\n <button\n nz-button\n nzSize=\"small\"\n nzType=\"default\"\n [disabled]=\"redoStack.length === 0\"\n nz-tooltip=\"Redo\"\n (click)=\"redo()\"\n >\n <nz-icon nzType=\"redo\"></nz-icon>\n </button>\n\n <box [width]=\"1\"></box>\n <span class=\"divider\"></span>\n <box [width]=\"1\"></box>\n\n <!-- ALIGN -->\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n <span class=\"divider\"></span>\n\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n <span class=\"divider\"></span>\n\n <!-- DISTRIBUTE -->\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\n \u21C4\n </button>\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\n </div>\n\n <div\n class=\"canvas-content\"\n [class.panning]=\"isMoveMode\"\n [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n >\n <!-- GRID -->\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n <!-- <div class=\"zoom-toolbar\">\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n </div> -->\n\n <!-- SVG EDGES -->\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n <g [attr.transform]=\"svgTransform\">\n <!-- DEFS -->\n <defs>\n <!-- glow effect -->\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n <feMerge>\n <feMergeNode in=\"blur\" />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n\n <!-- arrow markers -->\n <marker\n id=\"arrow-blue\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n refX=\"10\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-red\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n refX=\"10\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-blue-start\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n viewBox=\"0 0 10 10\"\n refX=\"0\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n </marker>\n\n <marker\n id=\"arrow-red-start\"\n markerWidth=\"10\"\n markerHeight=\"10\"\n viewBox=\"0 0 10 10\"\n refX=\"0\"\n refY=\"5\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n </marker>\n </defs>\n\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n <path\n class=\"edge-hit\"\n [attr.d]=\"buildPath(e)\"\n (mouseenter)=\"onMouseEnterEdge(e)\"\n (mouseleave)=\"onMouseLeaveEdge(e)\"\n (click)=\"onClickEdge(e, $event)\"\n ></path>\n\n <path\n class=\"edge\"\n [attr.id]=\"'edge-path-' + i\"\n [attr.d]=\"buildPath(e)\"\n marker-end=\"url(#arrow-blue)\"\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n ></path>\n\n <!-- LABEL -->\n <!-- text b\u00E1m theo line -->\n <!-- \n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.ActionText }}\n </textPath>\n </text> \n \n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.labelBack }}\n </textPath>\n </text>\n -->\n\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\n <text\n *ngIf=\"e.ActionText\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.ActionText }}\n </text>\n\n <text\n *ngIf=\"e.allowBack && e.labelBack\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.labelBack }}\n </text>\n </ng-container>\n\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n <path\n class=\"edge-hit\"\n [attr.d]=\"buildPath(e)\"\n (mouseleave)=\"onMouseLeaveEdge(e)\"\n (click)=\"onClickEdge(e, $event)\"\n ></path>\n\n <path\n class=\"edge red\"\n [attr.id]=\"'edge-path-hover-' + i\"\n [attr.d]=\"buildPath(e)\"\n marker-end=\"url(#arrow-red)\"\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n ></path>\n\n <!-- LABEL -->\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.ActionText }}\n </textPath>\n </text>\n\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n {{ e.labelBack }}\n </textPath>\n </text> -->\n\n <text\n *ngIf=\"e.ActionText\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.ActionText }}\n </text>\n\n <text\n *ngIf=\"e.allowBack && e.labelBack\"\n class=\"edge-label\"\n [attr.x]=\"getEdgeLabelPosition(e).x\"\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n [attr.text-anchor]=\"'middle'\"\n >\n {{ e.labelBack }}\n </text>\n </ng-container>\n\n <!-- preview -->\n <path\n *ngIf=\"connectingFrom\"\n class=\"edge\"\n [attr.d]=\"buildPreviewPath()\"\n stroke-dasharray=\"5,5\"\n marker-end=\"url(#arrow-blue)\"\n ></path>\n </g>\n </svg>\n\n <div\n *ngIf=\"isSelecting && selectStart && selectEnd\"\n class=\"selection-box\"\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n ></div>\n\n <!-- lstStage -->\n @for (n of lstStage; track $index) {\n @if (n.StageType == \"NODE\") {\n <nz-card\n #nodeEl\n class=\"workflow-node\"\n [attr.data-id]=\"n.Code\"\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">{{ n.Code }}</div>\n\n <div>{{ n.Name }}</div>\n\n @if (!n.editorOption.isReverse) {\n <!-- connector RIGHT: output -->\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n <!-- connector LEFT: input -->\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n } @else {\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n }\n </nz-card>\n }\n <!-- START NODE -->\n @else if (n.StageType === \"START\") {\n <nz-card\n class=\"workflow-node workflow-node-start\"\n style=\"border: unset\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">&nbsp;</div>\n\n <nz-tag\n [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n style=\"position: relative; top: -13px\"\n [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n [nzColor]=\"'green'\"\n >\n {{ n.StageType }}\n </nz-tag>\n\n <!-- connector RIGHT: output -->\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n </nz-card>\n }\n\n <!-- END NODE -->\n @else if (n.StageType === \"END\") {\n <nz-card\n class=\"workflow-node workflow-node-end\"\n style=\"border: unset\"\n [style.left.px]=\"n.editorOption.x\"\n [style.top.px]=\"n.editorOption.y\"\n [class.connecting-source]=\"isConnectingFrom(n)\"\n nzSize=\"small\"\n (mousedown)=\"onMouseDownNode($event, n)\"\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\n >\n <div class=\"title\">&nbsp;</div>\n\n <nz-tag\n [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n style=\"position: relative; top: -13px\"\n [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n [nzColor]=\"'red'\"\n >\n {{ n.StageType }}\n </nz-tag>\n\n <!-- connector LEFT: input -->\n <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n </nz-card>\n }\n }\n\n <!-- POINTS -->\n @for (p of connectingPoints; track $index) {\n @if (p != draggingPoint) {\n <div\n class=\"waypoint\"\n [style.left.px]=\"p.x\"\n [style.top.px]=\"p.y\"\n (mousedown)=\"onmousedownPoint($event, p)\"\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n ></div>\n } @else {\n <div\n class=\"waypoint dragging\"\n [style.left.px]=\"p.x\"\n [style.top.px]=\"p.y\"\n (mousedown)=\"onmousedownPoint($event, p)\"\n ></div>\n }\n }\n </div>\n</div>\n\n<!-- drawer TEMPLATE -->\n<nz-drawer\n [nzTitle]=\"drawTemplateTitle\"\n nzPlacement=\"right\"\n [nzWidth]=\"500\"\n [nzClosable]=\"false\"\n [nzVisible]=\"drawTemplateVisibel\"\n [nzFooter]=\"footerTplTemplate\"\n (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n <ng-container *nzDrawerContent>\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n <extend-select\n [label]=\"'Type'\"\n [lstItem]=\"template.lstTemplateType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"template.DocType\"\n ></extend-select>\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n <extend-select\n [label]=\"'Print template'\"\n [lstItem]=\"template.lstTemplatePrint\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"template.TemplatePrint\"\n ></extend-select>\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\n\n @for (tag of lstStage; track tag) {\n <nz-tag (click)=\"hoverStage = tag\">\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n @for (tag of template.lstStageStatus; track tag) {\n <nz-tag\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\n >\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n @if (!inputStageStatusVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n <nz-icon nzType=\"plus\" />\n New Action type\n </nz-tag>\n } @else {\n <input\n #inputStageStatusElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Code\"\n [(ngModel)]=\"inputStageStatusCode\"\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\n />\n <input\n #inputStageStatusNameElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Name\"\n [(ngModel)]=\"inputStageStatusName\"\n (blur)=\"handleInputStageStatusConfirm()\"\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\n />\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n @for (tag of template.lstActionType; track tag) {\n <nz-tag\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n (nzOnClose)=\"handleCloseActionType(tag)\"\n >\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n @if (!inputActionTypeVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n <nz-icon nzType=\"plus\" />\n New Action type\n </nz-tag>\n } @else {\n <input\n #inputActionTypeElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Code\"\n [(ngModel)]=\"inputActionTypeCode\"\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\n />\n <input\n #inputActionTypeNameElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"Name\"\n [(ngModel)]=\"inputActionTypeName\"\n (blur)=\"handleInputActionTypeConfirm()\"\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\n />\n }\n\n <box [height]=\"16\"></box>\n\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n @for (tag of template.lstActionStatus; track tag) {\n <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n </nz-tag>\n }\n\n <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n @if (!inputVisible) {\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n <nz-icon nzType=\"plus\" />\n New Action status\n </nz-tag>\n } @else {\n <input\n #inputElement\n nz-input\n nzSize=\"small\"\n type=\"text\"\n style=\"width: 150px\"\n placeholder=\"+ New Action status\"\n [(ngModel)]=\"inputValue\"\n (blur)=\"handleInputConfirm()\"\n (keydown.enter)=\"handleInputConfirm()\"\n />\n }\n </ng-container>\n\n <ng-template #footerTplTemplate>\n <div nz-flex [nzGap]=\"6\">\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n <button nz-button nzDanger (click)=\"save()\">Save</button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- drawer STAGE -->\n<nz-drawer\n [nzTitle]=\"drawerTitleStage\"\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n [nzVisible]=\"!!selectedStage\"\n [nzWidth]=\"750\"\n [nzClosable]=\"false\"\n [nzFooter]=\"footerTplNode\"\n (nzOnClose)=\"selectedStage = undefined\"\n>\n <ng-template #drawerTitleStage>\n <div nz-row nzJustify=\"space-between\">\n @if (selectedStage && selectedStage.editorOption) {\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the right\"\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n >\n <nz-icon nzType=\"double-right\"></nz-icon>\n </button>\n STAGE\n } @else {\n STAGE\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the left\"\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n >\n <nz-icon nzType=\"double-left\"></nz-icon>\n </button>\n }\n }\n </div>\n </ng-template>\n <ng-container *nzDrawerContent>\n <ng-container *ngIf=\"selectedStage\">\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n </nz-radio-group>\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Code'\"\n [layOutType]=\"'vertical'\"\n [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n [required]=\"true\"\n [(_ngModel)]=\"selectedStage.Code\"\n ></extend-input>\n\n <extend-textarea\n nz-col\n [nzSpan]=\"16\"\n [label]=\"'Name'\"\n [layOutType]=\"'vertical'\"\n [autoSize]=\"true\"\n [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n [required]=\"true\"\n [(_ngModel)]=\"selectedStage.Name\"\n ></extend-textarea>\n </div>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input-number\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Sequence'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedStage.SeqValue\"\n ></extend-input-number>\n\n <extend-select\n nz-col\n [nzSpan]=\"16\"\n [label]=\"'Org implement'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstOrg\"\n [valueField]=\"'App_Org_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\n ></extend-select>\n </div>\n\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n <extend-input-number\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Number Day'\"\n [layOutType]=\"'vertical'\"\n [precision]=\"1\"\n [(_ngModel)]=\"selectedStage.NumberDay\"\n ></extend-input-number>\n </div>\n\n @if (selectedStage.editorOption) {\n @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n <extend-checkbox\n [label]=\"'Reverse'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n ></extend-checkbox>\n\n <extend-checkbox\n [label]=\"'Require user action'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\n ></extend-checkbox>\n } @else {\n <extend-checkbox\n [label]=\"'Reverse'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n ></extend-checkbox>\n }\n }\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"16\">\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n <div nz-col>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n <nz-icon nzType=\"plus\"></nz-icon>\n </button>\n </div>\n </div>\n\n <nz-table\n nzSize=\"small\"\n [nzData]=\"selectedStage.lstAction || []\"\n [nzShowPagination]=\"false\"\n [nzNoResult]=\"'&nbsp;'\"\n >\n <thead>\n <tr [hidden]=\"true\">\n <th nzWidth=\"50px\"></th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n @for (action of selectedStage.lstAction; track $index) {\n <tr>\n <td>\n <nz-icon\n nzType=\"delete\"\n nzTheme=\"outline\"\n class=\"color-warn cursor-pointer icon-size-16\"\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\n ></nz-icon>\n </td>\n <td (click)=\"hoverAction = action\">\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"action.ActionText\"\n (_ngModelChange)=\"onchangeActionText(action)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"getlstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(action)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"action.NextStageStatus\"\n ></extend-select>\n </div>\n <box [height]=\"8\"></box>\n <div nz-row><strong>Role</strong></div>\n <div nz-row>\n <extend-select\n nz-col\n nzSpan=\"24\"\n [size]=\"'small'\"\n [lstItem]=\"lstRole\"\n [valueField]=\"'App_Role_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [multiple]=\"true\"\n [(_ngModel)]=\"action._lstRoleId\"\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\n ></extend-select>\n </div>\n <box [height]=\"8\"></box>\n <div nz-row>\n <strong>Email action</strong>\n </div>\n <div nz-row>\n <extend-select\n nz-col\n nzSpan=\"24\"\n [size]=\"'small'\"\n [lstItem]=\"lstEmailAction\"\n [valueField]=\"'ID'\"\n [displayField]=\"'Name'\"\n [multiple]=\"true\"\n [(_ngModel)]=\"action._lstEmailActionId\"\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\n ></extend-select>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n\n <box [height]=\"16\"></box>\n </ng-container>\n </ng-container>\n\n <ng-template #footerTplNode>\n <div\n nz-flex\n [nzGap]=\"6\"\n [nzJustify]=\"\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\n ? 'start'\n : 'end'\n \"\n >\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n <button\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n nz-button\n nzDanger\n (click)=\"deleteStage()\"\n >\n Delete\n </button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- drawer ACTION -->\n<nz-drawer\n [nzTitle]=\"drawerTitleAction\"\n nzTitle=\"ACTION\"\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n [nzClosable]=\"false\"\n [nzWidth]=\"750\"\n [nzVisible]=\"!!selectedAction\"\n [nzFooter]=\"footerTplAction\"\n (nzOnClose)=\"selectedAction = undefined\"\n>\n <ng-template #drawerTitleAction>\n <div nz-row nzJustify=\"space-between\">\n @if (selectedAction && selectedAction.editorOption) {\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the right\"\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n >\n <nz-icon nzType=\"double-right\"></nz-icon>\n </button>\n ACTION\n } @else {\n ACTION\n <button\n nz-button\n nzSize=\"small\"\n nz-tooltip=\"To the left\"\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n >\n <nz-icon nzType=\"double-left\"></nz-icon>\n </button>\n }\n }\n </div>\n </ng-template>\n <ng-container *nzDrawerContent>\n <ng-container *ngIf=\"selectedAction\">\n <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\n\n <box [height]=\"16\"></box>\n\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedAction.ActionText\"\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedAction.NextStageStatus\"\n ></extend-select>\n </div>\n\n <!-- <box [height]=\"16\"></box> -->\n <nz-divider></nz-divider>\n\n <extend-checkbox\n [label]=\"'Allow back'\"\n [labelSpan]=\"0\"\n [(_ngModel)]=\"selectedAction.allowBack\"\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n ></extend-checkbox>\n\n <box [height]=\"16\"></box>\n\n @if (selectedAction.allowBack) {\n <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\n\n @if (selectedBackAction) {\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n <extend-input\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action text'\"\n [layOutType]=\"'vertical'\"\n [(_ngModel)]=\"selectedBackAction.ActionText\"\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n ></extend-input>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action type'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionType\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.ActionType\"\n ></extend-select>\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Action status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstActionStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"lstStage\"\n [valueField]=\"'WF_TemplateStage_Id'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n ></extend-select>\n\n <extend-select\n nz-col\n [nzSpan]=\"8\"\n [label]=\"'Next stage status'\"\n [layOutType]=\"'vertical'\"\n [lstItem]=\"template.lstStageStatus\"\n [valueField]=\"'Code'\"\n [displayFields]=\"['Code', 'Name']\"\n [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n ></extend-select>\n </div>\n }\n }\n </ng-container>\n </ng-container>\n <ng-template #footerTplAction>\n <div\n nz-flex\n [nzGap]=\"6\"\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\n >\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n </div>\n </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n [nzTitle]=\"drawSettingTitle\"\n nzPlacement=\"right\"\n [nzClosable]=\"false\"\n [nzVisible]=\"settingVisible\"\n (nzOnClose)=\"settingVisible = false\"\n>\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n <ng-container *nzDrawerContent>\n <div class=\"form-item-no-bottom\">\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n <box [height]=\"16\"></box>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"] }]
4477
+ ], template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n @if (n.StageType == \"NODE\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- START NODE -->\r\n @else if (n.StageType === \"START\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <nz-tag [nzColor]=\"'green'\"> {{ n.StageType }} </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"END\") {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <nz-tag [nzColor]=\"'red'\">\r\n {{ n.StageType }}\r\n </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n @for (tag of lstStage; track tag) {\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\r\n\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n @for (tag of template.lstActionType; track tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\r\n\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n }\r\n\r\n <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\r\n\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\">\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n <button nz-button nzDanger (click)=\"save()\">Save</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"750\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"START\">START</label>\r\n <label nz-radio nzValue=\"NODE\">NODE</label>\r\n <label nz-radio nzValue=\"END\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-textarea\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [autoSize]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-textarea>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number Day'\"\r\n [layOutType]=\"'vertical'\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table\r\n nzSize=\"small\"\r\n [nzData]=\"selectedStage.lstAction || []\"\r\n [nzShowPagination]=\"false\"\r\n [nzNoResult]=\"'&nbsp;'\"\r\n >\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"50px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of selectedStage.lstAction; track $index) {\r\n <tr>\r\n <td>\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td (click)=\"hoverAction = action\">\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row><strong>Role</strong></div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>\r\n <strong>Email action</strong>\r\n </div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [layOutType]=\"'vertical'\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstActionStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [layOutType]=\"'vertical'\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"] }]
4451
4478
  }], propDecorators: { lstOrg: [{
4452
4479
  type: Input
4453
4480
  }], lstRole: [{
@@ -5128,5 +5155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
5128
5155
  * Generated bundle index. Do not edit.
5129
5156
  */
5130
5157
 
5131
- export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowEditorComponent, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
5158
+ export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
5132
5159
  //# sourceMappingURL=brggroup-share-lib.mjs.map