@brggroup/share-lib 0.0.53 → 0.0.56

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 (19) hide show
  1. package/fesm2022/brggroup-share-lib.mjs +541 -95
  2. package/fesm2022/brggroup-share-lib.mjs.map +1 -1
  3. package/lib/components/wf-editor/minimap.d.ts +1 -0
  4. package/lib/components/wf-editor/minimap.d.ts.map +1 -1
  5. package/lib/components/wf-editor/workflow-editor.component.d.ts +27 -3
  6. package/lib/components/wf-editor/workflow-editor.component.d.ts.map +1 -1
  7. package/lib/directive/img-hide-if-error.directive.d.ts +7 -0
  8. package/lib/directive/img-hide-if-error.directive.d.ts.map +1 -0
  9. package/lib/icon.d.ts +61 -0
  10. package/lib/icon.d.ts.map +1 -0
  11. package/lib/pipe/dic-domain.pipe.d.ts +10 -0
  12. package/lib/pipe/dic-domain.pipe.d.ts.map +1 -0
  13. package/lib/pipe/highlight.pipe.d.ts +8 -0
  14. package/lib/pipe/highlight.pipe.d.ts.map +1 -0
  15. package/lib/services/dic-domain.service.d.ts +40 -0
  16. package/lib/services/dic-domain.service.d.ts.map +1 -0
  17. package/package.json +1 -1
  18. package/public-api.d.ts +4 -0
  19. package/public-api.d.ts.map +1 -1
package/fesm2022/brggroup-share-lib.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { inject, Injectable, NgZone, Component, HostListener, ViewContainerRef, Input, ViewChild, EventEmitter, Output, Directive, Optional, Self, HostBinding, forwardRef, Pipe } from '@angular/core';
3
- import * as i1$3 from '@angular/router';
3
+ import * as i1$4 from '@angular/router';
4
4
  import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
5
5
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
6
6
  import * as i3 from '@ngx-translate/core';
@@ -11,20 +11,20 @@ import * as i1 from 'ng-zorro-antd/modal';
11
11
  import { NzModalService } from 'ng-zorro-antd/modal';
12
12
  import { jwtDecode } from 'jwt-decode';
13
13
  import { switchMap, distinctUntilChanged, filter as filter$1, takeUntil } from 'rxjs/operators';
14
- import * as i2$2 from '@angular/forms';
14
+ import * as i2$1 from '@angular/forms';
15
15
  import { FormGroup, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
16
- import * as i1$2 from '@angular/common';
16
+ import * as i1$3 from '@angular/common';
17
17
  import { Location, CommonModule } from '@angular/common';
18
18
  import { Overlay } from '@angular/cdk/overlay';
19
19
  import { TemplatePortal } from '@angular/cdk/portal';
20
20
  import * as i1$1 from 'ng-zorro-antd/breadcrumb';
21
21
  import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
22
- import * as i2 from 'ng-zorro-antd/icon';
22
+ import * as i1$2 from 'ng-zorro-antd/icon';
23
23
  import { NzIconModule } from 'ng-zorro-antd/icon';
24
24
  import { Chart, registerables } from 'chart.js';
25
25
  import * as i4 from 'ng-zorro-antd/grid';
26
26
  import { NzGridModule } from 'ng-zorro-antd/grid';
27
- import * as i2$1 from 'ng-zorro-antd/checkbox';
27
+ import * as i2 from 'ng-zorro-antd/checkbox';
28
28
  import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
29
29
  import * as i5 from 'ng-zorro-antd/form';
30
30
  import { NzFormModule } from 'ng-zorro-antd/form';
@@ -37,10 +37,10 @@ import * as i6$1 from 'ng-zorro-antd/input';
37
37
  import { NzInputModule } from 'ng-zorro-antd/input';
38
38
  import * as i6$2 from 'ng-zorro-antd/select';
39
39
  import { NzSelectModule } from 'ng-zorro-antd/select';
40
- import * as i1$4 from 'ngx-extended-pdf-viewer';
40
+ import * as i1$5 from 'ngx-extended-pdf-viewer';
41
41
  import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
42
- import { trigger, transition, animate, style } from '@angular/animations';
43
- import * as i2$3 from 'ng-zorro-antd/spin';
42
+ import { trigger, transition, style, animate } from '@angular/animations';
43
+ import * as i2$2 from 'ng-zorro-antd/spin';
44
44
  import { NzSpinModule } from 'ng-zorro-antd/spin';
45
45
  import * as i3$1 from 'ng-zorro-antd/card';
46
46
  import { NzCardModule } from 'ng-zorro-antd/card';
@@ -60,6 +60,8 @@ import * as i15 from 'ng-zorro-antd/table';
60
60
  import { NzTableModule } from 'ng-zorro-antd/table';
61
61
  import * as i16 from 'ng-zorro-antd/divider';
62
62
  import { NzDividerModule } from 'ng-zorro-antd/divider';
63
+ import * as i17 from 'ng-zorro-antd/auto-complete';
64
+ import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
63
65
  import * as i9 from 'ng-zorro-antd/core/transition-patch';
64
66
  import * as i10 from 'ng-zorro-antd/core/wave';
65
67
  import * as XLSX from 'xlsx';
@@ -501,7 +503,7 @@ class TokenStorage {
501
503
  }
502
504
  }
503
505
 
504
- const URLs = {
506
+ const URLs$1 = {
505
507
  login: '/api/Auth/Login',
506
508
  register: '/api/Auth/Register',
507
509
  pingAuth: '/api/Auth/PingAuth',
@@ -536,7 +538,7 @@ class AuthService extends HTTPService {
536
538
  }
537
539
  async pingAuth() {
538
540
  try {
539
- const res = await this.get(AppGlobals.apiEndpoint + URLs.pingAuth, true);
541
+ const res = await this.get(AppGlobals.apiEndpoint + URLs$1.pingAuth, true);
540
542
  return res?.IsSuccess;
541
543
  }
542
544
  catch {
@@ -569,7 +571,7 @@ class AuthService extends HTTPService {
569
571
  return true;
570
572
  }
571
573
  async sendSignIn(body) {
572
- return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs.login, body, {
574
+ return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$1.login, body, {
573
575
  headers: new HttpHeaders().set('Content-Type', 'application/json'),
574
576
  }));
575
577
  }
@@ -606,10 +608,10 @@ class AuthService extends HTTPService {
606
608
  }
607
609
  }
608
610
  changePassword(data) {
609
- return this.postData(AppGlobals.apiEndpoint + URLs.changePassword, data);
611
+ return this.postData(AppGlobals.apiEndpoint + URLs$1.changePassword, data);
610
612
  }
611
613
  setPass(data) {
612
- return this.postData(AppGlobals.apiEndpoint + URLs.setPass, data);
614
+ return this.postData(AppGlobals.apiEndpoint + URLs$1.setPass, data);
613
615
  }
614
616
  async signUp(d) {
615
617
  try {
@@ -627,7 +629,7 @@ class AuthService extends HTTPService {
627
629
  }
628
630
  }
629
631
  async sendSignUp(d) {
630
- return this.postData(AppGlobals.apiEndpoint + URLs.register, d);
632
+ return this.postData(AppGlobals.apiEndpoint + URLs$1.register, d);
631
633
  }
632
634
  idleTimer;
633
635
  idleTimeInMinutes = 15; // phút
@@ -1180,7 +1182,7 @@ class Breadcrumb extends BaseComponent {
1180
1182
  }
1181
1183
  }
1182
1184
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
1183
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\n <nz-breadcrumb-item (click)=\"gohome()\">\n <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n </nz-breadcrumb-item>\n @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n }\n</nz-breadcrumb>\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$1.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$1.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
1185
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\n <nz-breadcrumb-item (click)=\"gohome()\">\n <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n </nz-breadcrumb-item>\n @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n }\n</nz-breadcrumb>\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$1.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$1.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
1184
1186
  }
1185
1187
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, decorators: [{
1186
1188
  type: Component,
@@ -1318,7 +1320,7 @@ class BarGraphComponent {
1318
1320
  });
1319
1321
  }
1320
1322
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1321
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BarGraphComponent, isStandalone: true, selector: "cdk-bar-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1323
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BarGraphComponent, isStandalone: true, selector: "cdk-bar-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1322
1324
  }
1323
1325
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, decorators: [{
1324
1326
  type: Component,
@@ -1334,7 +1336,7 @@ class DashcardComponent {
1334
1336
  constructor() { }
1335
1337
  ngOnInit() { }
1336
1338
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1337
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DashcardComponent, isStandalone: true, selector: "cdk-dashcard", inputs: { dashData: "dashData" }, ngImport: i0, template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n </div>\n <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n <div class=\"text-center animated-digit\">\n <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n </div>\n <p\n class=\"text-center mat-body-1 border-top text-bold\"\n style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n >\n {{ dashData?.title }}\n </p>\n </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ 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: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: AnimatedDigitComponent, selector: "animated-digit", inputs: ["duration", "digit", "steps"] }] });
1339
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DashcardComponent, isStandalone: true, selector: "cdk-dashcard", inputs: { dashData: "dashData" }, ngImport: i0, template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n </div>\n <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n <div class=\"text-center animated-digit\">\n <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n </div>\n <p\n class=\"text-center mat-body-1 border-top text-bold\"\n style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n >\n {{ dashData?.title }}\n </p>\n </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: AnimatedDigitComponent, selector: "animated-digit", inputs: ["duration", "digit", "steps"] }] });
1338
1340
  }
1339
1341
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, decorators: [{
1340
1342
  type: Component,
@@ -1404,7 +1406,7 @@ class DoughnutGraphComponent {
1404
1406
  });
1405
1407
  }
1406
1408
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1407
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DoughnutGraphComponent, isStandalone: true, selector: "cdk-doughnut-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"doughnut-graph-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1409
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DoughnutGraphComponent, isStandalone: true, selector: "cdk-doughnut-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"doughnut-graph-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1408
1410
  }
1409
1411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, decorators: [{
1410
1412
  type: Component,
@@ -1466,7 +1468,7 @@ class LineGraphComponent {
1466
1468
  });
1467
1469
  }
1468
1470
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1469
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: LineGraphComponent, isStandalone: true, selector: "cdk-line-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1471
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: LineGraphComponent, isStandalone: true, selector: "cdk-line-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1470
1472
  }
1471
1473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, decorators: [{
1472
1474
  type: Component,
@@ -1572,7 +1574,7 @@ class ExtendCheckbox {
1572
1574
  }
1573
1575
  }
1574
1576
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
1575
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox, isStandalone: true, selector: "extend-checkbox", inputs: { label: "label", labelSpan: "labelSpan", disabled: "disabled", formData: "formData", controlName: "controlName", valueType: "valueType", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (label) {\n <div nz-row>\n <div nz-col [nzSpan]=\"labelSpan\"></div>\n <div nz-col nzFlex=\"auto\">\n <label\n style=\"position: relative; top: 5px\"\n nz-checkbox\n [nzDisabled]=\"disabled\"\n [(nzChecked)]=\"checked\"\n (nzCheckedChange)=\"onCheckChange($event)\"\n >\n {{ label }}\n </label>\n </div>\n </div>\n} @else {\n <label\n nz-checkbox\n [nzDisabled]=\"disabled\"\n [(nzChecked)]=\"checked\"\n (nzCheckedChange)=\"onCheckChange($event)\"\n style=\"width: 16px\"\n >\n {{ label }}\n </label>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i2$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
1577
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox, isStandalone: true, selector: "extend-checkbox", inputs: { label: "label", labelSpan: "labelSpan", disabled: "disabled", formData: "formData", controlName: "controlName", valueType: "valueType", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (label) {\n <div nz-row>\n <div nz-col [nzSpan]=\"labelSpan\"></div>\n <div nz-col nzFlex=\"auto\">\n <label\n style=\"position: relative; top: 5px\"\n nz-checkbox\n [nzDisabled]=\"disabled\"\n [(nzChecked)]=\"checked\"\n (nzCheckedChange)=\"onCheckChange($event)\"\n >\n {{ label }}\n </label>\n </div>\n </div>\n} @else {\n <label\n nz-checkbox\n [nzDisabled]=\"disabled\"\n [(nzChecked)]=\"checked\"\n (nzCheckedChange)=\"onCheckChange($event)\"\n style=\"width: 16px\"\n >\n {{ label }}\n </label>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i2.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
1576
1578
  }
1577
1579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, decorators: [{
1578
1580
  type: Component,
@@ -1751,7 +1753,7 @@ class DateInputParserDirective {
1751
1753
  this.ngControl?.control?.setValue(parsed);
1752
1754
  }
1753
1755
  }
1754
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
1756
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
1755
1757
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: DateInputParserDirective, isStandalone: true, selector: "nz-date-picker", inputs: { format: "format" }, host: { listeners: { "keyup.enter": "onEnter()" } }, ngImport: i0 });
1756
1758
  }
1757
1759
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, decorators: [{
@@ -1759,7 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1759
1761
  args: [{
1760
1762
  selector: 'nz-date-picker',
1761
1763
  }]
1762
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
1764
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.NgControl, decorators: [{
1763
1765
  type: Optional
1764
1766
  }, {
1765
1767
  type: Self
@@ -1864,7 +1866,7 @@ class ExtendDatePicker {
1864
1866
  this.isTouched = true;
1865
1867
  }
1866
1868
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
1867
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDatePicker, isStandalone: true, selector: "extend-date-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", minDate: "minDate", maxDate: "maxDate", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, 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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [formControlName]=\"controlName\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n ></nz-date-picker>\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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"errorMessage\"\n [nzValidateStatus]=\"errorMessage ? 'error' : ''\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [disabled]=\"disabled\"\n [nzDisabledDate]=\"disabledDate\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onNgModelChange($event)\"\n (blur)=\"onBlur()\"\n ></nz-date-picker>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-date-picker\n class=\"full-width\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onNgModelChange($event)\"\n ></nz-date-picker>\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DateInputParserDirective, selector: "nz-date-picker", inputs: ["format"] }] });
1869
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDatePicker, isStandalone: true, selector: "extend-date-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", minDate: "minDate", maxDate: "maxDate", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, 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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [formControlName]=\"controlName\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n ></nz-date-picker>\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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"errorMessage\"\n [nzValidateStatus]=\"errorMessage ? 'error' : ''\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [disabled]=\"disabled\"\n [nzDisabledDate]=\"disabledDate\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onNgModelChange($event)\"\n (blur)=\"onBlur()\"\n ></nz-date-picker>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-date-picker\n class=\"full-width\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onNgModelChange($event)\"\n ></nz-date-picker>\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DateInputParserDirective, selector: "nz-date-picker", inputs: ["format"] }] });
1868
1870
  }
1869
1871
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, decorators: [{
1870
1872
  type: Component,
@@ -1983,7 +1985,7 @@ class ExtendDateRangePicker {
1983
1985
  this.date2Change.emit(this.date2);
1984
1986
  }
1985
1987
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
1986
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDateRangePicker, isStandalone: true, selector: "extend-date-range-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", date1: "date1", date2: "date2" }, outputs: { date1Change: "date1Change", date2Change: "date2Change" }, 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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [formControlName]=\"controlName\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n ></nz-date-picker>\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-range-picker\n [nzSize]=\"size\"\n [nzFormat]=\"dateFormat\"\n [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n [nzRanges]=\"ranges\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"ngModelChange($event)\"\n ></nz-range-picker>\n </nz-form-item>\n } @else {\n <nz-range-picker\n [nzSize]=\"size\"\n [nzFormat]=\"dateFormat\"\n [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"ngModelChange($event)\"\n ></nz-range-picker>\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: ReactiveFormsModule }, { 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: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i5$1.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: TranslateModule }] });
1988
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDateRangePicker, isStandalone: true, selector: "extend-date-range-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", date1: "date1", date2: "date2" }, outputs: { date1Change: "date1Change", date2Change: "date2Change" }, 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' ? inputSpan : null\"\n [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <nz-date-picker\n class=\"full-width\"\n [nzPlaceHolder]=\"placeHolder || ' '\"\n [nzFormat]=\"dateFormat\"\n [nzSize]=\"size\"\n [formControlName]=\"controlName\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n }\"\n ></nz-date-picker>\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-range-picker\n [nzSize]=\"size\"\n [nzFormat]=\"dateFormat\"\n [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n [nzRanges]=\"ranges\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"ngModelChange($event)\"\n ></nz-range-picker>\n </nz-form-item>\n } @else {\n <nz-range-picker\n [nzSize]=\"size\"\n [nzFormat]=\"dateFormat\"\n [nzPlaceHolder]=\"['T\u1EEB ng\u00E0y', '\u0111\u1EBFn ng\u00E0y']\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"ngModelChange($event)\"\n ></nz-range-picker>\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i5$1.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: TranslateModule }] });
1987
1989
  }
1988
1990
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDateRangePicker, decorators: [{
1989
1991
  type: Component,
@@ -2120,7 +2122,7 @@ class ExtendInputNumber {
2120
2122
  return ExtendInputNumber.defaultSeparatorType;
2121
2123
  }
2122
2124
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
2123
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInputNumber, isStandalone: true, selector: "extend-input-number", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", size: "size", min: "min", max: "max", precision: "precision", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", separatorType: "separatorType", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, viewQueries: [{ propertyName: "inputnumber", first: true, predicate: ["inputnumber"], descendants: true }, { 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 <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [formControlName]=\"controlName\"\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 @if (min != null && max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (min != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n }\n </nz-form-control>\n </nz-form-item>\n } @else {\n @if (min != null && max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (min != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n border: borderBottomOnly ? 'none' : '',\n 'border-bottom': borderBottomOnly ? '1px dashed' : '',\n }\"\n />\n }\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: NzInputNumberModule }, { kind: "component", type: i6.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls"], outputs: ["nzOnStep"], exportAs: ["nzInputNumber"] }] });
2125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInputNumber, isStandalone: true, selector: "extend-input-number", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", size: "size", min: "min", max: "max", precision: "precision", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", separatorType: "separatorType", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, viewQueries: [{ propertyName: "inputnumber", first: true, predicate: ["inputnumber"], descendants: true }, { 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 <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [formControlName]=\"controlName\"\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 @if (min != null && max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (min != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n }\n </nz-form-control>\n </nz-form-item>\n } @else {\n @if (min != null && max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (min != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMin]=\"min\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else if (max != null) {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzMax]=\"max\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n />\n } @else {\n <nz-input-number\n #inputnumber\n class=\"full-width\"\n [nzSize]=\"size\"\n [nzFormatter]=\"formatterNumber\"\n [nzParser]=\"parserNumber\"\n [nzPrecision]=\"precision\"\n [nzDisabled]=\"disabled\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"_onNgModelChange()\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n border: borderBottomOnly ? 'none' : '',\n 'border-bottom': borderBottomOnly ? '1px dashed' : '',\n }\"\n />\n }\n }\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: NzInputNumberModule }, { kind: "component", type: i6.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls"], outputs: ["nzOnStep"], exportAs: ["nzInputNumber"] }] });
2124
2126
  }
2125
2127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, decorators: [{
2126
2128
  type: Component,
@@ -2232,7 +2234,7 @@ class ExtendInput {
2232
2234
  this.inputElement?.nativeElement?.select();
2233
2235
  }
2234
2236
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
2235
- 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"] }] });
2237
+ 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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
2236
2238
  }
2237
2239
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, decorators: [{
2238
2240
  type: Component,
@@ -2391,7 +2393,7 @@ class ExtendSelectComponent {
2391
2393
  }
2392
2394
  }
2393
2395
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2394
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n @if (!multiple) {\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [formControlName]=\"controlName\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-select\n class=\"full-width\"\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n 'custom-height-select': inputHeight ? true : false,\n }\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n }\n }\n } @else {\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [formControlName]=\"controlName\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-select\n class=\"full-width\"\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n }\n }\n }\n</div>\n", styles: [":host ::ng-deep .ant-select-selector{height:var(--custom-select-height)!important;line-height:var(--custom-select-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
2396
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", itemChange: "itemChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n @if (!multiple) {\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [formControlName]=\"controlName\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-select\n class=\"full-width\"\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: inputWidth,\n height: inputHeight,\n }\"\n [ngClass]=\"{\n 'border-bottom-only': borderBottomOnly,\n 'custom-height-select': inputHeight ? true : false,\n }\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n }\n }\n } @else {\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [formControlName]=\"controlName\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\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 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-select\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzAllowClear]=\"true\"\n [nzShowSearch]=\"true\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <nz-select\n class=\"full-width\"\n nzShowSearch\n nzAllowClear\n [nzSize]=\"size\"\n [nzPlaceHolder]=\"placeHolder\"\n [nzMode]=\"'multiple'\"\n [nzMaxMultipleCount]=\"lstItem.length\"\n [nzMaxTagCount]=\"maxTagCount\"\n [nzDropdownMatchSelectWidth]=\"false\"\n [ngModel]=\"_ngModel\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onSelectChange($event)\"\n (nzFocus)=\"onFocus.emit()\"\n >\n @if (showSelectAll) {\n <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n }\n @for (item of lstItem; track $index) {\n <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n }\n </nz-select>\n }\n }\n }\n</div>\n", styles: [":host ::ng-deep .ant-select-selector{height:var(--custom-select-height)!important;line-height:var(--custom-select-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
2395
2397
  }
2396
2398
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, decorators: [{
2397
2399
  type: Component,
@@ -2479,7 +2481,7 @@ class ExtendTextArea {
2479
2481
  this._ngModelChange.emit(this._ngModel);
2480
2482
  }
2481
2483
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
2482
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTextArea, isStandalone: true, selector: "extend-textarea", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputClass: "inputClass", minRows: "minRows", maxRows: "maxRows", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@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 [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [formControlName]=\"controlName\"\n [ngClass]=\"inputClass\"\n ></textarea>\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 [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onChange()\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n ></textarea>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onChange()\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n ></textarea>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: NzDatePickerModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: "directive", type: i6$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] });
2484
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTextArea, isStandalone: true, selector: "extend-textarea", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputClass: "inputClass", minRows: "minRows", maxRows: "maxRows", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@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 [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [formControlName]=\"controlName\"\n [ngClass]=\"inputClass\"\n ></textarea>\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 [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n >\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onChange()\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n ></textarea>\n </nz-form-control>\n </nz-form-item>\n } @else {\n <textarea\n nz-input\n [nzAutosize]=\"{ minRows: minRows || 3, maxRows: maxRows || 5 }\"\n [(ngModel)]=\"_ngModel\"\n (ngModelChange)=\"onChange()\"\n [disabled]=\"disabled\"\n [ngClass]=\"inputClass\"\n ></textarea>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: NzDatePickerModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: "directive", type: i6$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] });
2483
2485
  }
2484
2486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, decorators: [{
2485
2487
  type: Component,
@@ -2547,14 +2549,14 @@ class NoPermission {
2547
2549
  this.message = state?.message || null;
2548
2550
  console.log('Lấy từ history.state:', state);
2549
2551
  }
2550
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
2552
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
2551
2553
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: NoPermission, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
2552
2554
  <h2>Không có quyền truy cập</h2>
2553
2555
  <p *ngIf="message">{{ message }}</p>
2554
2556
  <p *ngIf="deniedUrl">
2555
2557
  Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
2556
2558
  </p>
2557
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2559
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2558
2560
  }
2559
2561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, decorators: [{
2560
2562
  type: Component,
@@ -2568,7 +2570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2568
2570
  `,
2569
2571
  imports: [CommonModule],
2570
2572
  }]
2571
- }], ctorParameters: () => [{ type: i1$3.Router }] });
2573
+ }], ctorParameters: () => [{ type: i1$4.Router }] });
2572
2574
 
2573
2575
  class PdfViewerComponent {
2574
2576
  // data = inject(NZ_MODAL_DATA);
@@ -2603,7 +2605,7 @@ class PdfViewerComponent {
2603
2605
  }
2604
2606
  }
2605
2607
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2606
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PdfViewerComponent, isStandalone: true, selector: "pdf-viewer", inputs: { dataType: "dataType", pdfData: "pdfData" }, ngImport: i0, template: "@if (dataType == \"base64\") {\n <ngx-extended-pdf-viewer\n [zoom]=\"100\"\n [base64Src]=\"this.pdfData\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showDownloadButton]=\"false\"\n ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n <ngx-extended-pdf-viewer\n [zoom]=\"100\"\n [src]=\"this.pdfData\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showDownloadButton]=\"false\"\n ></ngx-extended-pdf-viewer>\n}\n", dependencies: [{ kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i1$4.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }] });
2608
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PdfViewerComponent, isStandalone: true, selector: "pdf-viewer", inputs: { dataType: "dataType", pdfData: "pdfData" }, ngImport: i0, template: "@if (dataType == \"base64\") {\n <ngx-extended-pdf-viewer\n [zoom]=\"100\"\n [base64Src]=\"this.pdfData\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showDownloadButton]=\"false\"\n ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n <ngx-extended-pdf-viewer\n [zoom]=\"100\"\n [src]=\"this.pdfData\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showDownloadButton]=\"false\"\n ></ngx-extended-pdf-viewer>\n}\n", dependencies: [{ kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i1$5.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }] });
2607
2609
  }
2608
2610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, decorators: [{
2609
2611
  type: Component,
@@ -2637,9 +2639,9 @@ class GlobalSpinnerComponent {
2637
2639
  <nz-spin [nzSpinning]="true" style="position: relative; bottom: 50px;"></nz-spin>
2638
2640
  </div>
2639
2641
  }
2640
- `, isInline: true, styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }], animations: [
2642
+ `, isInline: true, styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }], animations: [
2641
2643
  trigger('fadeInOut', [
2642
- // transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
2644
+ transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
2643
2645
  transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
2644
2646
  ]),
2645
2647
  ] });
@@ -2654,7 +2656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2654
2656
  }
2655
2657
  `, animations: [
2656
2658
  trigger('fadeInOut', [
2657
- // transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
2659
+ transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
2658
2660
  transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
2659
2661
  ]),
2660
2662
  ], imports: [NzSpinModule], styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"] }]
@@ -2663,7 +2665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2663
2665
  class Height {
2664
2666
  height = 0;
2665
2667
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Height, deps: [], target: i0.ɵɵFactoryTarget.Component });
2666
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Height, isStandalone: true, selector: "height", inputs: { height: "height" }, ngImport: i0, template: `<div [ngStyle]="{ height: height + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2668
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Height, isStandalone: true, selector: "height", inputs: { height: "height" }, ngImport: i0, template: `<div [ngStyle]="{ height: height + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2667
2669
  }
2668
2670
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Height, decorators: [{
2669
2671
  type: Component,
@@ -2679,7 +2681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2679
2681
  class Width {
2680
2682
  width = 0;
2681
2683
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Width, deps: [], target: i0.ɵɵFactoryTarget.Component });
2682
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Width, isStandalone: true, selector: "width", inputs: { width: "width" }, ngImport: i0, template: `<div style="display: inline" [ngStyle]="{ 'padding-left': width + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2684
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Width, isStandalone: true, selector: "width", inputs: { width: "width" }, ngImport: i0, template: `<div style="display: inline" [ngStyle]="{ 'padding-left': width + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2683
2685
  }
2684
2686
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Width, decorators: [{
2685
2687
  type: Component,
@@ -2703,7 +2705,7 @@ class Box {
2703
2705
  'padding-left': width + 'px',
2704
2706
  display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
2705
2707
  }"
2706
- ></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2708
+ ></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2707
2709
  }
2708
2710
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Box, decorators: [{
2709
2711
  type: Component,
@@ -2727,6 +2729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
2727
2729
  }] } });
2728
2730
 
2729
2731
  const createMinimap = ($mapSource) => {
2732
+ // console.log('begin createMinimap');
2730
2733
  for (var $child of document.getElementsByClassName('minimap')) {
2731
2734
  $child.remove();
2732
2735
  }
@@ -2764,9 +2767,8 @@ const createMinimap = ($mapSource) => {
2764
2767
  $viewport.style.top = `${Math.round(t)}px`;
2765
2768
  };
2766
2769
  const init = () => {
2767
- console.log('init');
2770
+ // console.log('minimap init');
2768
2771
  for (var $child of $mapSource.getElementsByClassName('workflow-node')) {
2769
- console.log($child.classList);
2770
2772
  if ($child.classList.contains('workflow-node-start') || $child.classList.contains('workflow-node-end')) {
2771
2773
  var mini = document.createElement('div');
2772
2774
  mini.classList.add('minimap-node-round');
@@ -2784,7 +2786,7 @@ const createMinimap = ($mapSource) => {
2784
2786
  mini.style.width = `5px`;
2785
2787
  mini.style.height = `5px`;
2786
2788
  mini.style.left = `${Math.round(xM)}px`;
2787
- mini.style.top = `${Math.round(yM) + 5}px`;
2789
+ mini.style.top = `${Math.round(yM)}px`;
2788
2790
  }
2789
2791
  else {
2790
2792
  var mini = document.createElement('div');
@@ -2860,12 +2862,53 @@ const createMinimap = ($mapSource) => {
2860
2862
  redraw();
2861
2863
  };
2862
2864
  synchronize();
2863
- $minimap.addEventListener('mousedown', down);
2864
- $minimap.addEventListener('touchstart', down);
2865
+ // $minimap.addEventListener('mousedown', down);
2866
+ // $minimap.addEventListener('touchstart', down);
2865
2867
  init();
2866
2868
  return this;
2867
2869
  };
2870
+ const deleteMinimap = () => {
2871
+ var minimap = document.getElementsByClassName('minimap')[0];
2872
+ if (minimap) {
2873
+ minimap.remove();
2874
+ }
2875
+ };
2868
2876
 
2877
+ class AutoFocusDirective {
2878
+ el;
2879
+ renderer;
2880
+ appAutoFocus = false;
2881
+ constructor(el, renderer) {
2882
+ this.el = el;
2883
+ this.renderer = renderer;
2884
+ }
2885
+ ngOnChanges(changes) {
2886
+ if (changes['appAutoFocus'] && this.appAutoFocus) {
2887
+ setTimeout(() => this.el.nativeElement.focus(), 0);
2888
+ }
2889
+ }
2890
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
2891
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AutoFocusDirective, isStandalone: true, selector: "[appAutoFocus]", inputs: { appAutoFocus: "appAutoFocus" }, usesOnChanges: true, ngImport: i0 });
2892
+ }
2893
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, decorators: [{
2894
+ type: Directive,
2895
+ args: [{
2896
+ selector: '[appAutoFocus]'
2897
+ }]
2898
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { appAutoFocus: [{
2899
+ type: Input
2900
+ }] } });
2901
+
2902
+ // import {
2903
+ // Box,
2904
+ // ExtendInput,
2905
+ // ExtendSelectComponent,
2906
+ // ExtendCheckbox,
2907
+ // ExtendTextArea,
2908
+ // ExtendInputNumber,
2909
+ // BaseComponent,
2910
+ // AutoFocusDirective,
2911
+ // } from '@brggroup/share-lib';
2869
2912
  class WF_Template {
2870
2913
  // #region properties
2871
2914
  WF_Template_Id;
@@ -2928,7 +2971,7 @@ class WF_TemplateStage {
2928
2971
  this.WF_Template_Id = obj.WF_Template_Id || null;
2929
2972
  this.Code = obj.Code || '';
2930
2973
  this.Name = obj.Name || '';
2931
- this.StageType = obj.StageType || '';
2974
+ this.StageType = obj.StageType?.toLowerCase() || '';
2932
2975
  this.SeqValue = obj.SeqValue || null;
2933
2976
  this.NumberDay = obj.NumberDay || null;
2934
2977
  this.LimitValue = obj.LimitValue || null;
@@ -3000,6 +3043,7 @@ class Workflow extends WF_Template {
3000
3043
  lstStageStatus;
3001
3044
  lstActionType;
3002
3045
  lstActionStatus;
3046
+ editingActionStatus;
3003
3047
  editorOption = new WorkflowEditorOption();
3004
3048
  constructor(obj) {
3005
3049
  obj = obj || {};
@@ -3101,9 +3145,13 @@ class WorkflowEditorComponent extends BaseComponent {
3101
3145
  //#region NGHIỆP VỤ
3102
3146
  lstOrg = [];
3103
3147
  lstRole = [];
3148
+ ready = false;
3104
3149
  template = new Workflow();
3105
3150
  lstStage = [];
3106
3151
  lstAction = [];
3152
+ get getLstStage() {
3153
+ return this.lstStage.sort((a, b) => a.SeqValue - b.SeqValue);
3154
+ }
3107
3155
  get lstEmailAction() {
3108
3156
  if (this.lstAction && this.lstAction.length) {
3109
3157
  const res = this.lstAction.map((x) => ({
@@ -3127,6 +3175,7 @@ class WorkflowEditorComponent extends BaseComponent {
3127
3175
  Math = Math;
3128
3176
  drawTemplateVisibel = false;
3129
3177
  settingVisible = false;
3178
+ infoVisible = false;
3130
3179
  wfcSetting = { ShowGrid: true };
3131
3180
  selectedStage;
3132
3181
  hoverStage;
@@ -3198,7 +3247,9 @@ class WorkflowEditorComponent extends BaseComponent {
3198
3247
  if (e.ctrlKey && e.key === 's') {
3199
3248
  console.log('ctrl s');
3200
3249
  e.preventDefault();
3201
- this.save();
3250
+ if (this.ready) {
3251
+ this.save();
3252
+ }
3202
3253
  }
3203
3254
  if (e.ctrlKey && e.key === 'z') {
3204
3255
  console.log('ctrl z');
@@ -3234,20 +3285,23 @@ class WorkflowEditorComponent extends BaseComponent {
3234
3285
  this.moveSelectedNodesBy(dx, dy);
3235
3286
  }
3236
3287
  }
3237
- ngOnInit() { }
3288
+ ngOnInit() {
3289
+ this.afterInput();
3290
+ }
3238
3291
  ngAfterViewInit() { }
3292
+ ngOnDestroy() {
3293
+ deleteMinimap();
3294
+ }
3239
3295
  afterInput() {
3240
- console.log(`this.template`);
3241
- console.log(this.template);
3242
- this.template = this.template ? new Workflow(this.template) : new Workflow();
3296
+ this.template = new Workflow(this.template);
3243
3297
  if (!this.lstStage || !this.lstStage.length) {
3244
3298
  this.lstStage = [
3245
3299
  new WorkflowStage({
3246
- WF_TemplateStage_Id: Date.now(),
3300
+ WF_TemplateStage_Id: Date.now() + 1,
3247
3301
  IsTempId: true,
3248
- Code: 'start',
3302
+ Code: '_start_',
3249
3303
  Name: 'Start',
3250
- StageType: 'START',
3304
+ StageType: '_start_',
3251
3305
  SeqValue: 1,
3252
3306
  editorOption: {
3253
3307
  x: 120,
@@ -3255,11 +3309,11 @@ class WorkflowEditorComponent extends BaseComponent {
3255
3309
  },
3256
3310
  }),
3257
3311
  new WorkflowStage({
3258
- WF_TemplateStage_Id: Date.now(),
3312
+ WF_TemplateStage_Id: Date.now() + 2,
3259
3313
  IsTempId: true,
3260
- Code: 'end',
3314
+ Code: '_end_',
3261
3315
  Name: 'End',
3262
- StageType: 'END',
3316
+ StageType: '_end_',
3263
3317
  SeqValue: 999,
3264
3318
  editorOption: {
3265
3319
  x: 120,
@@ -3289,13 +3343,15 @@ class WorkflowEditorComponent extends BaseComponent {
3289
3343
  this.lstStage.forEach((x) => {
3290
3344
  x.lstAction = this.lstAction.filter((y) => y.WF_TemplateStage_Id == x.WF_TemplateStage_Id);
3291
3345
  });
3292
- console.log('WorkflowEditorComponent ngOnInit');
3346
+ this.ready = true;
3347
+ console.log('WorkflowEditorComponent afterInput');
3293
3348
  console.log('template', this.template);
3294
3349
  console.log('lstStage', this.lstStage);
3295
3350
  console.log('lstAction', this.lstAction);
3296
3351
  this.updateMiniMap();
3297
3352
  }
3298
3353
  updateMiniMap() {
3354
+ // console.log('updateMiniMap');
3299
3355
  setTimeout(() => {
3300
3356
  if (document.getElementsByClassName('canvas-content')[0]) {
3301
3357
  createMinimap(document.getElementsByClassName('canvas-content')[0]);
@@ -3318,6 +3374,7 @@ class WorkflowEditorComponent extends BaseComponent {
3318
3374
  }
3319
3375
  }
3320
3376
  save() {
3377
+ this.ready = false;
3321
3378
  this.onSave.emit({ template: this.template, lstStage: this.lstStage, lstAction: this.lstAction });
3322
3379
  }
3323
3380
  addStage() {
@@ -3341,7 +3398,7 @@ class WorkflowEditorComponent extends BaseComponent {
3341
3398
  stage.Name = 'New Stage';
3342
3399
  stage.editorOption.x = x;
3343
3400
  stage.editorOption.y = y;
3344
- stage.StageType = 'NODE';
3401
+ stage.StageType = 'node';
3345
3402
  stage.SeqValue = 10;
3346
3403
  this.lstStage.push(stage);
3347
3404
  this.lstStage = this.lstStage.sort((a, b) => a.SeqValue - b.SeqValue);
@@ -3784,8 +3841,12 @@ class WorkflowEditorComponent extends BaseComponent {
3784
3841
  //#region NODE action
3785
3842
  onMouseDownNode(event, node) {
3786
3843
  console.log('onMouseDownNode ', node);
3844
+ console.log('onMouseDownNode ', event);
3787
3845
  event.stopPropagation();
3788
3846
  event.preventDefault();
3847
+ if (event.target.classList.contains('connector')) {
3848
+ return;
3849
+ }
3789
3850
  this.axisLock = null;
3790
3851
  const p = this.getSvgPoint(event);
3791
3852
  // CASE 1️⃣: node nằm trong selection → kéo cả group
@@ -4323,15 +4384,15 @@ class WorkflowEditorComponent extends BaseComponent {
4323
4384
  getCanvasWidth() {
4324
4385
  // return 3000;
4325
4386
  const PADDING = 300;
4326
- const CANVAS_MIN_WIDTH = 1000;
4327
- const maxX = Math.max(...this.lstStage.map((n) => (n.StageType == 'END' ? n.editorOption?.x || 0 : n.editorOption?.x || 0 + 160)), // 160 = node width
4387
+ const CANVAS_MIN_WIDTH = 2000;
4388
+ const maxX = Math.max(...this.lstStage.map((n) => (n.StageType == '_end_' ? n.editorOption?.x || 0 : n.editorOption?.x || 0 + 160)), // 160 = node width
4328
4389
  CANVAS_MIN_WIDTH);
4329
4390
  return maxX + PADDING;
4330
4391
  }
4331
4392
  getCanvasHeight() {
4332
4393
  // return 2000;
4333
4394
  const PADDING = 200;
4334
- const CANVAS_MIN_HEIGHT = 400;
4395
+ const CANVAS_MIN_HEIGHT = 1500;
4335
4396
  const maxY = Math.max(...this.lstStage.map((n) => n.editorOption?.y || 0 + 80), CANVAS_MIN_HEIGHT);
4336
4397
  return maxY + PADDING;
4337
4398
  }
@@ -4394,11 +4455,11 @@ class WorkflowEditorComponent extends BaseComponent {
4394
4455
  const from = this.getNode(edge.WF_TemplateStage_Id);
4395
4456
  const to = this.getNode(edge.To_WF_TemplateStage_Id);
4396
4457
  const start = {
4397
- x: from.editorOption.x + (from.StageType == 'START' ? 5 : from.editorOption.isReverse ? 0 : 160),
4458
+ x: from.editorOption.x + (from.StageType == '_start_' ? 5 : from.editorOption.isReverse ? 0 : 160),
4398
4459
  y: from.editorOption.y + 40,
4399
4460
  };
4400
4461
  const end = {
4401
- x: to.editorOption.x + (to.StageType == 'END' ? 5 : to.editorOption.isReverse ? 160 : 0),
4462
+ x: to.editorOption.x + (to.StageType == '_end_' ? 5 : to.editorOption.isReverse ? 160 : 0),
4402
4463
  y: to.editorOption.y + 40,
4403
4464
  };
4404
4465
  if (edge.editorOption.points && edge.editorOption.points.length) {
@@ -4412,7 +4473,11 @@ class WorkflowEditorComponent extends BaseComponent {
4412
4473
  return '';
4413
4474
  const start = {
4414
4475
  x: this.connectingFrom.node.editorOption.x +
4415
- (this.connectingFrom.node.StageType == 'START' ? 5 : this.connectingFrom.node.editorOption.isReverse ? 0 : 160),
4476
+ (this.connectingFrom.node.StageType == '_start_'
4477
+ ? 5
4478
+ : this.connectingFrom.node.editorOption.isReverse
4479
+ ? 0
4480
+ : 160),
4416
4481
  y: this.connectingFrom.node.editorOption.y + 40,
4417
4482
  };
4418
4483
  const end = {
@@ -4607,8 +4672,26 @@ class WorkflowEditorComponent extends BaseComponent {
4607
4672
  return this.doesLineCrossNodeY(routeY, n);
4608
4673
  });
4609
4674
  }
4675
+ //#endregion
4676
+ compareFun = (o1, o2) => {
4677
+ if (o1) {
4678
+ return typeof o1 === 'string' ? o1 === o2.Code : o1.Code === o2.Code;
4679
+ }
4680
+ else {
4681
+ return false;
4682
+ }
4683
+ };
4684
+ lstActionStatusFiltered = [];
4685
+ nzAutocompletechange(val, lstActionStatus) {
4686
+ this.lstActionStatusFiltered = lstActionStatus.filter((x) => x.Code.includes(val));
4687
+ }
4688
+ onenterAotu(ActionStatus) {
4689
+ if (ActionStatus && !this.template.lstActionStatus.find((x) => x.Code == ActionStatus)) {
4690
+ this.template.lstActionStatus = [...this.template.lstActionStatus, { Code: ActionStatus }];
4691
+ }
4692
+ }
4610
4693
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4611
- 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]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\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.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\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 (Ctrl + S)\" (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 workflow-node-start\"\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 workflow-node-end\"\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\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></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\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</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-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\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 @if (selectedStage.StageType == \"NODE\") {\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\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 [class.selected]=\"action == hoverAction\"\r\n [class.text-bold]=\"action == hoverAction\"\r\n (click)=\"hoverAction = action\"\r\n >\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>\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>Role</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>Email action</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 @if (template.editorOption.AllowbackInUse) {\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\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 nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</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\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:59px;right:9px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\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", "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"] }] });
4694
+ 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]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\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.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\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 <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></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 [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (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 <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\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 <nz-tag [nzColor]=\"'green'\"> START </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 <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\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 <nz-tag [nzColor]=\"'red'\"> END </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 } @else {\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 }\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\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\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 </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\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 </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</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_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\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-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\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 @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\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\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 [class.text-bold]=\"action == hoverAction\" (click)=\"hoverAction = action\">\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>\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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(action.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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>Role</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>Email action</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 [nzLoading]=\"!ready\" (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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(selectedAction.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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 @if (template.editorOption.AllowbackInUse) {\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\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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(selectedBackAction.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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 [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</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\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i1$2.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", "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: "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: "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"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }] });
4612
4695
  }
4613
4696
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
4614
4697
  type: Component,
@@ -4633,7 +4716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
4633
4716
  ExtendInputNumber,
4634
4717
  NzTableModule,
4635
4718
  NzDividerModule,
4636
- ], 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]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\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.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\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 (Ctrl + S)\" (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 workflow-node-start\"\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 workflow-node-end\"\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\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></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\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</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-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\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 @if (selectedStage.StageType == \"NODE\") {\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\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 [class.selected]=\"action == hoverAction\"\r\n [class.text-bold]=\"action == hoverAction\"\r\n (click)=\"hoverAction = action\"\r\n >\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>\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>Role</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>Email action</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 @if (template.editorOption.AllowbackInUse) {\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\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 nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</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\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:59px;right:9px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"] }]
4719
+ AutoFocusDirective,
4720
+ NzAutocompleteModule,
4721
+ ], 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]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\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.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\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 <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></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 [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (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 <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\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 <nz-tag [nzColor]=\"'green'\"> START </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 <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\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 <nz-tag [nzColor]=\"'red'\"> END </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 } @else {\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 }\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\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\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 </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\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 </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\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 <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\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 </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</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_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\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-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [layOutType]=\"'vertical'\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\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 @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\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\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 [class.text-bold]=\"action == hoverAction\" (click)=\"hoverAction = action\">\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>\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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(action.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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>Role</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>Email action</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 [nzLoading]=\"!ready\" (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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(selectedAction.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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 @if (template.editorOption.AllowbackInUse) {\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\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\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"nzAutocompletechange(selectedBackAction.ActionStatus, template.lstActionStatus)\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\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 [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</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\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"] }]
4637
4722
  }], propDecorators: { lstOrg: [{
4638
4723
  type: Input
4639
4724
  }], lstRole: [{
@@ -4667,31 +4752,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
4667
4752
  args: ['inputElement', { static: false }]
4668
4753
  }] } });
4669
4754
 
4670
- class AutoFocusDirective {
4671
- el;
4672
- renderer;
4673
- appAutoFocus = false;
4674
- constructor(el, renderer) {
4675
- this.el = el;
4676
- this.renderer = renderer;
4677
- }
4678
- ngOnChanges(changes) {
4679
- if (changes['appAutoFocus'] && this.appAutoFocus) {
4680
- setTimeout(() => this.el.nativeElement.focus(), 0);
4681
- }
4682
- }
4683
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
4684
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AutoFocusDirective, isStandalone: true, selector: "[appAutoFocus]", inputs: { appAutoFocus: "appAutoFocus" }, usesOnChanges: true, ngImport: i0 });
4685
- }
4686
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, decorators: [{
4687
- type: Directive,
4688
- args: [{
4689
- selector: '[appAutoFocus]'
4690
- }]
4691
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { appAutoFocus: [{
4692
- type: Input
4693
- }] } });
4694
-
4695
4755
  class NullIfEmptyDirective {
4696
4756
  el;
4697
4757
  ngControl;
@@ -4704,7 +4764,7 @@ class NullIfEmptyDirective {
4704
4764
  // const newValue = value.trim() === '' ? null : value;
4705
4765
  // this.ngControl?.control?.setValue(newValue, { emitEvent: false });
4706
4766
  }
4707
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
4767
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
4708
4768
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: NullIfEmptyDirective, isStandalone: true, selector: "input", host: { listeners: { "input": "onInput()" } }, ngImport: i0 });
4709
4769
  }
4710
4770
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, decorators: [{
@@ -4712,7 +4772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
4712
4772
  args: [{
4713
4773
  selector: 'input',
4714
4774
  }]
4715
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
4775
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.NgControl, decorators: [{
4716
4776
  type: Optional
4717
4777
  }] }], propDecorators: { onInput: [{
4718
4778
  type: HostListener,
@@ -5201,13 +5261,13 @@ class RouteMonitorService {
5201
5261
  }
5202
5262
  });
5203
5263
  }
5204
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$3.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
5264
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$4.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
5205
5265
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, providedIn: 'root' });
5206
5266
  }
5207
5267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, decorators: [{
5208
5268
  type: Injectable,
5209
5269
  args: [{ providedIn: 'root' }]
5210
- }], ctorParameters: () => [{ type: i1$3.Router }, { type: AuthService }, { type: NotiService }] });
5270
+ }], ctorParameters: () => [{ type: i1$4.Router }, { type: AuthService }, { type: NotiService }] });
5211
5271
 
5212
5272
  class ThemeService {
5213
5273
  setHighContrast(enabled) {
@@ -5308,9 +5368,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
5308
5368
  }]
5309
5369
  }] });
5310
5370
 
5371
+ class H3Icon {
5372
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: H3Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
5373
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: H3Icon, isStandalone: true, selector: "h3-icon", ngImport: i0, template: ` <h3 nz-col><nz-icon nzType="send" nzTheme="outline" />&nbsp;<ng-content></ng-content></h3> `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5374
+ }
5375
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: H3Icon, decorators: [{
5376
+ type: Component,
5377
+ args: [{
5378
+ selector: 'h3-icon',
5379
+ template: ` <h3 nz-col><nz-icon nzType="send" nzTheme="outline" />&nbsp;<ng-content></ng-content></h3> `,
5380
+ imports: [NzIconModule],
5381
+ }]
5382
+ }] });
5383
+ class IconAdd {
5384
+ click = new EventEmitter();
5385
+ /**
5386
+ * default = 16
5387
+ */
5388
+ size = 16;
5389
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconAdd, deps: [], target: i0.ɵɵFactoryTarget.Component });
5390
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconAdd, isStandalone: true, selector: "icon-add", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5391
+ <nz-icon
5392
+ nzType="plus"
5393
+ nzTheme="outline"
5394
+ class="color-primary cursor-pointer"
5395
+ [ngStyle]="{ 'font-size.px': size }"
5396
+ (click)="$event.stopPropagation(); click.emit()"
5397
+ ></nz-icon>
5398
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5399
+ }
5400
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconAdd, decorators: [{
5401
+ type: Component,
5402
+ args: [{
5403
+ selector: 'icon-add',
5404
+ template: `
5405
+ <nz-icon
5406
+ nzType="plus"
5407
+ nzTheme="outline"
5408
+ class="color-primary cursor-pointer"
5409
+ [ngStyle]="{ 'font-size.px': size }"
5410
+ (click)="$event.stopPropagation(); click.emit()"
5411
+ ></nz-icon>
5412
+ `,
5413
+ imports: [CommonModule, NzIconModule],
5414
+ }]
5415
+ }], propDecorators: { click: [{
5416
+ type: Output
5417
+ }], size: [{
5418
+ type: Input
5419
+ }] } });
5420
+ class IconEdit {
5421
+ click = new EventEmitter();
5422
+ /**
5423
+ * default = 16
5424
+ */
5425
+ size = 16;
5426
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconEdit, deps: [], target: i0.ɵɵFactoryTarget.Component });
5427
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconEdit, isStandalone: true, selector: "icon-edit", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5428
+ <nz-icon
5429
+ nzType="edit"
5430
+ nzTheme="outline"
5431
+ class="color-primary cursor-pointer"
5432
+ [ngStyle]="{ 'font-size.px': size }"
5433
+ (click)="$event.stopPropagation(); click.emit()"
5434
+ ></nz-icon>
5435
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5436
+ }
5437
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconEdit, decorators: [{
5438
+ type: Component,
5439
+ args: [{
5440
+ selector: 'icon-edit',
5441
+ template: `
5442
+ <nz-icon
5443
+ nzType="edit"
5444
+ nzTheme="outline"
5445
+ class="color-primary cursor-pointer"
5446
+ [ngStyle]="{ 'font-size.px': size }"
5447
+ (click)="$event.stopPropagation(); click.emit()"
5448
+ ></nz-icon>
5449
+ `,
5450
+ imports: [CommonModule, NzIconModule],
5451
+ }]
5452
+ }], propDecorators: { click: [{
5453
+ type: Output
5454
+ }], size: [{
5455
+ type: Input
5456
+ }] } });
5457
+ class IconSave {
5458
+ click = new EventEmitter();
5459
+ /**
5460
+ * default = 16
5461
+ */
5462
+ size = 16;
5463
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSave, deps: [], target: i0.ɵɵFactoryTarget.Component });
5464
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSave, isStandalone: true, selector: "icon-save", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5465
+ <nz-icon
5466
+ nzType="save"
5467
+ nzTheme="outline"
5468
+ class="color-primary cursor-pointer"
5469
+ [ngStyle]="{ 'font-size.px': size }"
5470
+ (click)="$event.stopPropagation(); click.emit()"
5471
+ ></nz-icon>
5472
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5473
+ }
5474
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSave, decorators: [{
5475
+ type: Component,
5476
+ args: [{
5477
+ selector: 'icon-save',
5478
+ template: `
5479
+ <nz-icon
5480
+ nzType="save"
5481
+ nzTheme="outline"
5482
+ class="color-primary cursor-pointer"
5483
+ [ngStyle]="{ 'font-size.px': size }"
5484
+ (click)="$event.stopPropagation(); click.emit()"
5485
+ ></nz-icon>
5486
+ `,
5487
+ imports: [CommonModule, NzIconModule],
5488
+ }]
5489
+ }], propDecorators: { click: [{
5490
+ type: Output
5491
+ }], size: [{
5492
+ type: Input
5493
+ }] } });
5494
+ class IconDelete {
5495
+ click = new EventEmitter();
5496
+ /**
5497
+ * default = 16
5498
+ */
5499
+ size = 16;
5500
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconDelete, deps: [], target: i0.ɵɵFactoryTarget.Component });
5501
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconDelete, isStandalone: true, selector: "icon-delete", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5502
+ <nz-icon
5503
+ nzType="delete"
5504
+ nzTheme="outline"
5505
+ class="color-warn cursor-pointer"
5506
+ [ngStyle]="{ 'font-size.px': size }"
5507
+ (click)="$event.stopPropagation(); click.emit()"
5508
+ ></nz-icon>
5509
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5510
+ }
5511
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconDelete, decorators: [{
5512
+ type: Component,
5513
+ args: [{
5514
+ selector: 'icon-delete',
5515
+ template: `
5516
+ <nz-icon
5517
+ nzType="delete"
5518
+ nzTheme="outline"
5519
+ class="color-warn cursor-pointer"
5520
+ [ngStyle]="{ 'font-size.px': size }"
5521
+ (click)="$event.stopPropagation(); click.emit()"
5522
+ ></nz-icon>
5523
+ `,
5524
+ imports: [CommonModule, NzIconModule],
5525
+ }]
5526
+ }], propDecorators: { click: [{
5527
+ type: Output
5528
+ }], size: [{
5529
+ type: Input
5530
+ }] } });
5531
+ class IconView {
5532
+ click = new EventEmitter();
5533
+ /**
5534
+ * default = 16
5535
+ */
5536
+ size = 16;
5537
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconView, deps: [], target: i0.ɵɵFactoryTarget.Component });
5538
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconView, isStandalone: true, selector: "icon-view", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5539
+ <nz-icon
5540
+ nzType="eye"
5541
+ nzTheme="outline"
5542
+ class="color-primary cursor-pointer"
5543
+ [ngStyle]="{ 'font-size.px': size }"
5544
+ (click)="$event.stopPropagation(); click.emit()"
5545
+ ></nz-icon>
5546
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5547
+ }
5548
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconView, decorators: [{
5549
+ type: Component,
5550
+ args: [{
5551
+ selector: 'icon-view',
5552
+ template: `
5553
+ <nz-icon
5554
+ nzType="eye"
5555
+ nzTheme="outline"
5556
+ class="color-primary cursor-pointer"
5557
+ [ngStyle]="{ 'font-size.px': size }"
5558
+ (click)="$event.stopPropagation(); click.emit()"
5559
+ ></nz-icon>
5560
+ `,
5561
+ imports: [CommonModule, NzIconModule],
5562
+ }]
5563
+ }], propDecorators: { click: [{
5564
+ type: Output
5565
+ }], size: [{
5566
+ type: Input
5567
+ }] } });
5568
+ class IconSearch {
5569
+ click = new EventEmitter();
5570
+ /**
5571
+ * default = 16
5572
+ */
5573
+ size = 16;
5574
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
5575
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: IconSearch, isStandalone: true, selector: "icon-search", inputs: { size: "size" }, outputs: { click: "click" }, ngImport: i0, template: `
5576
+ <nz-icon
5577
+ nzType="search"
5578
+ nzTheme="outline"
5579
+ class="color-primary cursor-pointer"
5580
+ [ngStyle]="{ 'font-size.px': size }"
5581
+ (click)="$event.stopPropagation(); click.emit()"
5582
+ ></nz-icon>
5583
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
5584
+ }
5585
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IconSearch, decorators: [{
5586
+ type: Component,
5587
+ args: [{
5588
+ selector: 'icon-search',
5589
+ template: `
5590
+ <nz-icon
5591
+ nzType="search"
5592
+ nzTheme="outline"
5593
+ class="color-primary cursor-pointer"
5594
+ [ngStyle]="{ 'font-size.px': size }"
5595
+ (click)="$event.stopPropagation(); click.emit()"
5596
+ ></nz-icon>
5597
+ `,
5598
+ imports: [CommonModule, NzIconModule],
5599
+ }]
5600
+ }], propDecorators: { click: [{
5601
+ type: Output
5602
+ }], size: [{
5603
+ type: Input
5604
+ }] } });
5605
+
5606
+ const URLs = {
5607
+ getById: '/api/App_Dic_Domain/GetById',
5608
+ getAll: '/api/App_Dic_Domain/GetAll',
5609
+ getList: '/api/App_Dic_Domain/GetList',
5610
+ getPaging: '/api/App_Dic_Domain/GetPaging',
5611
+ addOrEdit: '/api/App_Dic_Domain/AddOrEdit',
5612
+ delete: '/api/App_Dic_Domain/Delete',
5613
+ };
5614
+ class App_Dic_Domain {
5615
+ // #region properties
5616
+ App_Dic_Domain_Id;
5617
+ App_Org_Id;
5618
+ IsActive;
5619
+ CreatedDate;
5620
+ CreatedUser;
5621
+ UpdatedDate;
5622
+ UpdatedUser;
5623
+ DomainCode;
5624
+ ItemCode;
5625
+ ItemValue;
5626
+ OrderValue;
5627
+ Description;
5628
+ ChildDomainCode;
5629
+ ParentItemCode;
5630
+ // #endregion properties
5631
+ constructor(obj) {
5632
+ obj = obj || {};
5633
+ this.App_Dic_Domain_Id = obj.App_Dic_Domain_Id || '';
5634
+ this.App_Org_Id = obj.App_Org_Id || '';
5635
+ this.App_Org_Id = obj.App_Org_Id || '';
5636
+ this.IsActive = obj.IsActive || false;
5637
+ this.CreatedDate = obj.CreatedDate || null;
5638
+ this.CreatedUser = obj.CreatedUser || '';
5639
+ this.UpdatedDate = obj.UpdatedDate || null;
5640
+ this.UpdatedUser = obj.UpdatedUser || '';
5641
+ this.DomainCode = obj.DomainCode || '';
5642
+ this.ItemCode = obj.ItemCode || '';
5643
+ this.ItemValue = obj.ItemValue || '';
5644
+ this.OrderValue = obj.OrderValue || null;
5645
+ this.Description = obj.Description || '';
5646
+ this.ChildDomainCode = obj.ChildDomainCode || '';
5647
+ this.ParentItemCode = obj.ParentItemCode || '';
5648
+ }
5649
+ }
5650
+ class DicDomainService extends HTTPService {
5651
+ cms = inject(CommonService);
5652
+ async getByDomain(DomainCode) {
5653
+ // 1. Nếu đã có dữ liệu trong cache → dùng ngay
5654
+ const cached = DicDomainService.dataCache.get(DomainCode);
5655
+ if (cached && cached.length) {
5656
+ return cached;
5657
+ }
5658
+ // 2. Nếu đang load dữ liệu này → trả về Promise cũ
5659
+ const loading = DicDomainService.loadingCache.get(DomainCode);
5660
+ if (loading) {
5661
+ return loading;
5662
+ }
5663
+ // 3. Nếu chưa load thì bắt đầu load và lưu Promise
5664
+ const loadPromise = this.loadDomainFromServer(DomainCode);
5665
+ DicDomainService.loadingCache.set(DomainCode, loadPromise);
5666
+ try {
5667
+ const result = await loadPromise;
5668
+ DicDomainService.dataCache.set(DomainCode, result);
5669
+ DicDomainService.loadingCache.delete(DomainCode);
5670
+ return result;
5671
+ }
5672
+ catch (err) {
5673
+ // Nếu lỗi → xoá promise để lần sau gọi lại
5674
+ DicDomainService.loadingCache.delete(DomainCode);
5675
+ throw err;
5676
+ }
5677
+ }
5678
+ clearCache() {
5679
+ DicDomainService.dataCache = new Map();
5680
+ DicDomainService.loadingCache = new Map();
5681
+ }
5682
+ // Map cache: DomainCode → dữ liệu
5683
+ static dataCache = new Map();
5684
+ // Map load state: DomainCode → Promise đang tải
5685
+ static loadingCache = new Map();
5686
+ async loadDomainFromServer(DomainCode) {
5687
+ const ret = await this.cms.ESP({
5688
+ SPN: 'App_Dic_Domain_getByDomain',
5689
+ Params: [DomainCode],
5690
+ });
5691
+ return ret.Data || [];
5692
+ }
5693
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
5694
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, providedIn: 'root' });
5695
+ }
5696
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, decorators: [{
5697
+ type: Injectable,
5698
+ args: [{
5699
+ providedIn: 'root',
5700
+ }]
5701
+ }] });
5702
+
5703
+ class DicDomainPipe {
5704
+ service = inject(DicDomainService);
5705
+ async transform(value, domainCode) {
5706
+ if (!value)
5707
+ return '';
5708
+ const lstDD = await this.service.getByDomain(domainCode);
5709
+ return lstDD.find((x) => x.ItemCode == value)?.ItemValue || value;
5710
+ }
5711
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
5712
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: DicDomainPipe, isStandalone: true, name: "dicDomain" });
5713
+ }
5714
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainPipe, decorators: [{
5715
+ type: Pipe,
5716
+ args: [{
5717
+ name: 'dicDomain',
5718
+ }]
5719
+ }] });
5720
+
5721
+ class HighlightPipe {
5722
+ transform(value, search) {
5723
+ // if (!search || search.length < 3 || !value) return value;
5724
+ if (!search || !value)
5725
+ return value;
5726
+ const pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
5727
+ const regex = new RegExp(pattern, 'gi');
5728
+ return value.replace(regex, (match) => `<span class="highlight">${match}</span>`);
5729
+ }
5730
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
5731
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: HighlightPipe, isStandalone: true, name: "highlight" });
5732
+ }
5733
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HighlightPipe, decorators: [{
5734
+ type: Pipe,
5735
+ args: [{
5736
+ name: 'highlight',
5737
+ }]
5738
+ }] });
5739
+
5740
+ class HideIfErrorDirective {
5741
+ onError(e) {
5742
+ e.target.remove(); // xóa luôn khỏi DOM
5743
+ }
5744
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HideIfErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
5745
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: HideIfErrorDirective, isStandalone: true, selector: "img[hideIfError]", host: { listeners: { "error": "onError($event)" } }, ngImport: i0 });
5746
+ }
5747
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: HideIfErrorDirective, decorators: [{
5748
+ type: Directive,
5749
+ args: [{
5750
+ selector: 'img[hideIfError]',
5751
+ }]
5752
+ }], propDecorators: { onError: [{
5753
+ type: HostListener,
5754
+ args: ['error', ['$event']]
5755
+ }] } });
5756
+
5311
5757
  /**
5312
5758
  * Generated bundle index. Do not edit.
5313
5759
  */
5314
5760
 
5315
- 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 };
5761
+ export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainPipe, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, Height, HideIfErrorDirective, HighlightPipe, IconAdd, IconDelete, IconEdit, IconSave, IconSearch, IconView, 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 };
5316
5762
  //# sourceMappingURL=brggroup-share-lib.mjs.map