ngx-rs-ant 1.6.2 → 1.6.4

package/fesm2020/ngx-rs-ant.mjs

@@ -9,7 +9,7 @@ import * as i2$1 from 'devextreme-angular/ui/draggable';
 import { DevExtremeModule, DxLoadPanelModule, DxValidationGroupComponent, DxDataGridComponent } from 'devextreme-angular';
 import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
 import { is } from 'bpmn-js/lib/util/ModelUtil';
-import { TextAreaEntry, isTextAreaEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { isLabel } from 'diagram-js/lib/util/ModelUtil';
 import * as i6 from 'devextreme-angular/ui/load-panel';
 import * as i6$1 from 'devextreme-angular/ui/nested';
 import { DxoPositionModule } from 'devextreme-angular/ui/nested';
@@ -25,6 +25,9 @@ import * as i3$2 from 'devextreme-angular/ui/accordion';
 import * as i7 from 'devextreme-angular/ui/text-box';
 import * as i8 from 'devextreme-angular/ui/validation-group';
 import * as i9 from 'devextreme-angular/ui/validator';
+import * as i5$2 from 'devextreme-angular/ui/drop-down-box';
+import * as i6$2 from 'devextreme-angular/ui/tag-box';
+import * as i8$1 from 'devextreme-angular/ui/tree-list';
 import * as i4 from 'devextreme-angular/ui/popover';
 import * as i2$3 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerComponent, PdfJsViewerModule } from 'ng2-pdfjs-viewer';
@@ -149,10 +152,10 @@ class PluginActiveComponent {
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
+PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{name}}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\">\r\n  <div class=\"active-bar\">\r\n    <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n    <span>{{ name }}</span>\r\n    <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n    <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n    <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n  </div>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n              (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n  <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n              (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--coast-default-color, #337ab7);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--coast-default-color, #337ab7);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--coast-danger-color, #d9534f)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -173,10 +176,10 @@ class PluginHoverComponent {
     }
 }
 PluginHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
+PluginHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginHoverComponent, selector: "rs-plugin-hover", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"hover-title\">{{ name }}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginHoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{name}}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
+            args: [{ selector: 'rs-plugin-hover', template: "<div class=\"hover-title\">{{ name }}</div>\n", styles: [":host{display:none;position:absolute;border:1px dashed var(--coast-default-color, #337ab7);pointer-events:none}:host .hover-title{color:var(--coast-default-color, #337ab7);position:absolute;top:-18px;left:0}.plugin-active>:host{display:none!important}.plugin-hover>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -253,6 +256,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             args: [{ selector: 'rs-style-blank', template: "<div>\n  <span>\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
         }] });
 
+class FormItemConfigBase {
+    constructor() {
+        this.configChange = new EventEmitter();
+    }
+}
+
+class FormItemConfigErrorComponent {
+}
+FormItemConfigErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormItemConfigErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormItemConfigErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormItemConfigErrorComponent, selector: "rs-form-item-config-error", ngImport: i0, template: "<div>\n  <span>\u8868\u5355\u7EC4\u4EF6\u914D\u7F6E\u5FC5\u9700\u7EE7\u627F\u81EAFormItemConfigBase</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormItemConfigErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-form-item-config-error', template: "<div>\n  <span>\u8868\u5355\u7EC4\u4EF6\u914D\u7F6E\u5FC5\u9700\u7EE7\u627F\u81EAFormItemConfigBase</span>\n</div>\n", styles: [":host{height:80px;margin:8px;display:flex;flex-flow:row nowrap;justify-content:center}:host div{flex:1;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div span{text-align:center;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
 class PluginManager {
     static createComponent(boxItem, index, style, config) {
         let plugin = PluginFactory.get(config.name);
@@ -397,6 +415,11 @@ class PluginManager {
             const instance = componentRef.instance;
             instance.config = item.config.pluginConfig;
             if (pluginType === 'form') {
+                if (!(instance instanceof FormItemConfigBase)) {
+                    itemConfigContainerRef.clear();
+                    itemConfigContainerRef.createComponent(FormItemConfigErrorComponent);
+                    return;
+                }
                 instance.fieldTree = fieldTree;
             }
             instance.configChange.subscribe((reload) => {
@@ -405,7 +428,9 @@ class PluginManager {
                     componentRef.location.nativeElement.click();
                 }
                 else {
-                    Object.assign(item.componentRef.instance, item.config.pluginConfig);
+                    setTimeout(() => {
+                        Object.assign(item.componentRef.instance, item.config.pluginConfig);
+                    });
                 }
             });
         }
@@ -860,6 +885,7 @@ BoxContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ItemStyleComponent,
         StyleBlankComponent,
         ItemBlankComponent,
+        FormItemConfigErrorComponent,
         StyleComponent,
         PluginNotFoundComponent,
         ConfigBlankComponent], imports: [CommonModule,
@@ -883,6 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         ItemStyleComponent,
                         StyleBlankComponent,
                         ItemBlankComponent,
+                        FormItemConfigErrorComponent,
                         StyleComponent,
                         PluginNotFoundComponent,
                         ConfigBlankComponent
@@ -901,302 +928,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 
 const translations = {
     // 调色板
-    'Activate the hand tool': '激活拖拽工具',
-    'Activate the lasso tool': '激活框选工具',
-    'Activate the create/remove space tool': '激活空间移动工具',
-    'Activate the global connect tool': '激活全局连接工具',
-    'Create StartEvent': '创建开始节点',
-    'Create EndEvent': '创建结束节点',
-    'Create UserTask': '创建用户任务',
-    'Create ServiceTask': '创建服务任务',
-    'Create Gateway': '创建网关节点',
+    'Activate hand tool': '激活拖拽工具',
+    'Activate lasso tool': '激活框选工具',
+    'Activate create/remove space tool': '激活空间移动工具',
+    'Activate global connect tool': '激活全局连接工具',
+    'Create start event': '创建开始节点',
+    'Create end event': '创建结束节点',
+    'Create user task': '创建用户任务',
+    'Create service task': '创建服务任务',
+    'Create gateway': '创建网关节点',
     // 面板
-    'Append EndEvent': '追加结束节点',
-    'Append UserTask': '追加用户任务',
-    'Append ServiceTask': '追加服务任务',
-    'Append Gateway': '追加网关节点',
-    'Connect using Sequence/MessageFlow or Association': '使用序列/消息流或关联连接',
-    'Remove': '删除',
-    'Set Color': '设置颜色',
+    'Append user task': '追加用户任务',
+    'Append service task': '追加服务任务',
+    'Append gateway': '追加网关节点',
+    'Append end event': '追加结束节点',
+    'Connect to other element': '连接其它节点',
+    'Delete': '删除',
     'Change type': '改变节点类型',
-    'Exclusive Gateway': '互斥网关',
-    'Parallel Gateway': '并行网关',
-    'Default Flow': '默认流向',
-    'Sequence Flow': '顺序流向',
+    'Exclusive gateway': '互斥网关',
+    'Parallel gateway': '并行网关',
+    'Default flow': '默认流向',
+    'Sequence flow': '顺序流向',
+    'Conditional flow': '条件流向',
     'Open minimap': '打开缩略图',
     'Close minimap': '关闭缩略图',
-    // 配置
-    'General': '参数配置',
-    'Name': '名称',
-    'Task description': '任务描述',
-    'Set assignment rule': '设置用户规则',
-    'dynamic user': '动态用户',
-    'static user': '静态用户',
-    'dynamic role': '动态角色',
-    'static role': '静态角色',
-    /*
-      'Create {type}': '创建{type}',
-      'Create Intermediate/Boundary Event': '创建中间/边界事件',
-      'Append {type}': '追加{type}', //'追加{type}',
-      'Add Lane above': '添加上面泳道',
-      'Divide into two Lanes': '拆分两个泳道',
-      'Divide into three Lanes': '拆分三个泳道',
-      'Add Lane below': '添下面泳道',
-      'Append compensation activity': '追加补偿活动',
-      'Change type': '改变节点类型', // 改变事情类型
-      'Connect using Association': '使用关联连接',
-      'Connect using Sequence/MessageFlow or Association': '使用序列/消息流或关联连接',
-      'Connect using DataInputAssociation': '使用数据输入关联连接',
-      'Remove': '删除',
-      'Create expanded SubProcess': '创建扩展子流程',
-      // 'Create Pool/Participant': '创建者或参与者',
-      'Create IntermediateThrowEvent/BoundaryEvent': '创建中间事件或边界事件',
-      'Parallel Multi Instance': '并行多实例',
-      'Sequential Multi Instance': '顺序多重实例',
-      'Loop': '循环',
-      'Ad-hoc': '特别指定',
-      'Task': '任务',
-      'Send Task': '发送任务', // 发送任务
-      'Receive Task': '接收任务',
-      'User Task': '用户任务',
-      'Manual Task': '手工任务',
-      'Business Rule Task': '作业规则任务',
-      'Service Task': '服务任务',
-      'Script Task': '脚本任务',
-      'Call Activity': '调用活动',
-      'Sub Process (collapsed)': '子过程（折叠）',
-      'Sub Process (expanded)': '子过程（展开）',
-      'Start Event': '开始事件',
-      'Intermediate Throw Event': '抛出事件',
-      'End Event': '结束事件',
-      'Message Start Event': '消息开始事件',
-      'Timer Start Event': '时间开始事件',
-      'Conditional Start Event': '条件开始事件',
-      'Signal Start Event': '信号开始事件',
-      'Error Start Event': '错误开始事件',
-      'Escalation Start Event': '升级开始事件',
-      'Compensation Start Event': '补偿开始事件',
-      'Message Start Event (non-interrupting)': '消息开始事件（不中断）',
-      'Timer Start Event (non-interrupting)': '定时开始事件（不中断）',
-      'Conditional Start Event (non-interrupting)': '条件开始事件（不中断）',
-      'Signal Start Event (non-interrupting)': '信号开始事件（不中断）',
-      'Escalation Start Event (non-interrupting)': '升级开始事件（不中断）',
-      'Message Intermediate Catch Event': '信息捕获事件',
-      'Message Intermediate Throw Event': '信息抛出事件',
-      'Timer Intermediate Catch Event': '定时器捕获事件',
-      'Escalation Intermediate Throw Event': '升级抛出事件',
-      'Conditional Intermediate Catch Event': '条件捕获事件',
-      'Link Intermediate Catch Event': '链接捕获事件',
-      'Link Intermediate Throw Event': '链接抛出事件',
-      'Compensation Intermediate Throw Event': '补偿抛出事件',
-      'Signal Intermediate Catch Event': '信号捕获事件',
-      'Signal Intermediate Throw Event': '信号抛出事件',
-      'Message End Event': '消息结束事件',
-      'Escalation End Event': '升级结束事件',
-      'Error End Event': '错误结束事件',
-      'Cancel End Event': '取消结束事件',
-      'Compensation End Event': '补偿结束事件',
-      'Signal End Event': '信号结束事件',
-      'Terminate End Event': '终止结束事件',
-      'Message Boundary Event': '消息边界事件',
-      'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
-      'Timer Boundary Event': '定时边界事件',
-      'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
-      'Escalation Boundary Event': '升级边界事件',
-      'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
-      'Conditional Boundary Event': '有条件的边界事件',
-      'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
-      'Error Boundary Event': '错误边界事件',
-      'Cancel Boundary Event': '取消边界事件',
-      'Signal Boundary Event': '信号边界事件',
-      'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
-      'Compensation Boundary Event': '补偿边界事件',
-      'Exclusive': '排他',
-      'Exclusive Gateway': '互斥网关',
-      'Parallel Gateway': '并行网关',
-      'Inclusive Gateway': '相容网关',
-      'Complex Gateway': '复杂网关',
-      'Event based Gateway': '事件网关',
-      'Transaction': '交换',
-      'Sub Process': '子流程',
-      'Event Sub Process': '事件子流程',
-      'Empty Pool (removes content)': '清空泳池（删除内容）',
-      'Collapsed Pool': '合并泳池',
-      'Expanded Pool': '扩展泳池',
-  
-      // flow
-      'Default Flow': '默认流向',
-      'Sequence Flow': '顺序流向',
-      'Conditional Flow': '条件流向',
-  
-      // Errors
-      'no parent for {element} in {parent}': '在{parent}中的{element}没有父元素',
-      'no shape type specified': '没有指定的形状类型',
-      'flow elements must be children of pools/participants': '流动元素必须是游泳池/参与者',
-      'out of bounds release': '跨界界释放',
-      'more than {count} child lanes': '超出{count}分支',
-      'element required': '被请求元素',
-      'diagram not part of bpmn': '图在bpmn中',
-      'no diagram to display': '没有图表来显示',
-      'no process or collaboration to display': '没有流程或协作显示',
-      'element {element} referenced by {referenced}#{property} not yet drawn':
-        '元素{element}在{referenced}＃{property}的引用还没有绘制',
-      'already rendered {element}': '已经提供{element}',
-      'failed to import {element}': '元素导入失败{element}',
-      'ID must not be empty.': 'ID不能为空！',
-      'ID must be a valid QName.': '无效的ID输入！',
-  
-      // message
-      'This maps to the process definition key.': '映射流程定义的Key。',
-      'This maps to the task definition key.': '映射任务定义的Key。',
-      'Specify more than one group as a comma separated list.': '多于一个组时为逗号分隔的列表。',
-      'Specify more than one user as a comma separated list.': '多于一个用户时为逗号分隔的列表。',
-      'Must provide either loop cardinality or collection': '必须提供循环基数或集合',
-      'Available process variables, identified in the diagram.': '可用的过程变量，如图中所示。',
-      'No variables found.': '未找到变量。',
-  
-      'General': '基本属性',
-      'Documentation': '备注',
-      'Element documentation': '元素备注',
-      'Executable': '可执行',
-      'Process Documentation': '过程说明',
-      '': '无',
-      'Listeners': '监听器',
-      'Execution Listener': '扩展监听器',
-      'Extensions': '扩展',
-      'Properties': '属性',
-      'Add Property': '添加属性',
-      'Process Id': '流程标识',
-      'Process Name': '流程名称',
-      'Participant Id': '参与者标识',
-      'Participant Name': '参与者名称',
-      'Name': '名称',
-      'Id': '标识',
-      'ID': '标识',
-      'Value': '值',
-      'Version Tag': '版本标记',
-      'External Task Configuration': '外部任务配置',
-      'Task Priority': '任务优先级',
-      'Job Configuration': '作业配置',
-      'Job Priority': '作业优先级',
-      'History Configuration': '历史配置',
-      'History Time To Live': '历史生存时间',
-      'Details': '详情',
-      'Initiator': '初始化',
-      'Asynchronous Continuations': '异步连续',
-      'Asynchronous Before': '异步之前',
-      'Asynchronous After': '异步之后',
-      'Forms': '表单',
-      'Form Key': '表单名',
-      'Form Fields': '表单字段',
-      'Form Buttons': '表单按钮',
-      'Form Field': '表单字段',
-      'Form Button': '表单按钮',
-      'Button Name': '按钮名称',
-      'Business Key': '业务键',
-      'Type': '类型',
-      'Label': '标签',
-      'Default Value': '默认值',
-      'Validation': '校验',
-      'Add Constraint': '添加约束',
-      'Config': '配置',
-      'Must provide a value': '必须提供一个值',
-      'Event Type': '事件类型',
-      'Listener Type': '监听器类型',
-      'Java Class': 'Java 类',
-      'Field Injection': '字段注入',
-      'Fields': '字段',
-      'Condition Type': '条件类型',
-      'Script Format': '脚本格式',
-      'Script Type': '脚本类型',
-      'Inline Script': '内联脚本',
-      'External Resource': '外部资源',
-      'Expression': '表达式',
-      'Delegate Expression': '委托表达式',
-      'Script': '脚本',
-      'Parameter must have a name': '参数必须有一个名称',
-      'String': '字符串',
-      'Implementation': '实现',
-      'External': '外部',
-      'Connector': '连接器',
-      'Must configure Connector': '必须配置连接器',
-      'Connector Id': '连接器ID',
-      'Input/Output': '输入/输出',
-      'Input Parameters': '输入参数',
-      'Input Parameter': '输入参数',
-      'Output Parameters': '输出参数',
-      'Output Parameter': '输出参数',
-      'Text': '文本',
-      'List': '列表',
-      'Add Entry': '增加条目',
-      'Field Injections': '字段注入',
-      'TextAnnotation': '文本注释',
-      'Variables': '变量',
-      'In Mapping': '输入映射',
-      'Out Mapping': '输出映射',
-      'Target': '目标',
-      'Source': '来源',
-      'Local': '本地',
-      'Candidate Starter Configuration': '候选人起动器配置',
-      'Candidate Starter Groups': '候选人起动器组',
-      'Candidate Starter Users': '候选人起动器用户',
-      'Configure Connector': '配置连接器',
-      'Assignee Type': '受理人类型',
-      'Assignee': '受理人',
-      'Dynamic': '动态',
-      'Static': '静态',
-      'User': '用户',
-      'Role': '角色',
-      'Candidate Users': '候选用户',
-      'Candidate Groups': '候选组',
-      'Due Date': '到期',
-      'Follow Up Date': '跟踪日期',
-      'Priority': '优先级',
-      'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
-        '可以使用EL表达式，（例如：${someDate} 或者ISO日期（例如：2015-06-26T09:54:00））',
-      'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
-        '可以使用EL表达式，（例如：${someDate} 或者ISO日期（例如：2015-06-26T09:54:00））',
-  
-      'Create Task': '创建任务',
-      'Create DataObjectReference': '创建数据对象引用',
-      'Create DataStoreReference': '创建数据存储引用',
-      'Create Group': '创建分组',
-      'Category Value': '类别值',
-  
-      //custom
-      'Create CallActivity': '创建调用任务',
-      'Append Gateway': '追加网关节点',
-      'Append Intermediate/Boundary Event': '追加中间/边界事件',
-      'StartEvent': '开始节点',
-      'EndEvent': '结束节点',
-      'DataObjectReference': '数据对象引用',
-      'DataStoreReference': '数据存储引用',
-      'Element must have an unique id.': '节点元素必须用于唯一编号',
-      'Create ExclusiveGateway': '创建排他网关',
-      'Create Pool/Participant': '创建泳道或参与者',
-      'Append ExclusiveGateway': '追加排他网关',
-      'Append Task': '追加任务',
-      'Append UserTask': '追加用户任务',
-      'Append Sequence': '追加连线',
-      'Append EndEvent': '追加结束节点',
-      'UserTask': '用户任务',
-      'ExclusiveGateway': '条件', //排他网关
-      'Element is not set findUserType': '员工节点未设置节点人员',
-      'Token Simulation ': '流程模拟',
-      'Tasklist Configuration': '任务列表配置',
-      'Startable': '可启动',
-      'Element Documentation': '元素描述',
-  
-      'Multi Instance': '多实例',
-      'Loop Cardinality': '循环基数',
-      'Collection': '集合',
-      'Element Variable': '元素变量',
-      'Completion Condition': '完成条件',
-      'Multi Instance Asynchronous Before': '多实例异步之前',
-      'Multi Instance Asynchronous After': '多实例异步之后',
-      'Multi Instance Exclusive': '多实例排他',
-      'Multi Instance Retry Time Cycle': '多实例重试时间',
-      */
 };
 
 function customTranslate(template, replacements) {
@@ -1227,7 +982,7 @@ class UserTaskPaletteProvider {
             'create.user-task': {
                 group: 'activity',
                 className: 'bpmn-icon-user-task',
-                title: this.translate('Create UserTask'),
+                title: this.translate('Create user task'),
                 action: {
                     dragstart: this.createUserTask,
                     click: this.createUserTask
@@ -1263,7 +1018,7 @@ class UserTaskContextPadProvider {
             'append.user-task': {
                 group: 'model',
                 className: 'bpmn-icon-user-task',
-                title: this.translate('Append UserTask'),
+                title: this.translate('Append user task'),
                 action: {
                     hover: this.appendUserTaskPreview,
                     click: this.appendUserTask,
@@ -1317,7 +1072,7 @@ class ServiceTaskPaletteProvider {
             'create.service-task': {
                 group: 'activity',
                 className: 'bpmn-icon-service-task',
-                title: this.translate('Create ServiceTask'),
+                title: this.translate('Create service task'),
                 action: {
                     dragstart: this.createServiceTask,
                     click: this.createServiceTask
@@ -1348,7 +1103,7 @@ class ServiceTaskContextPadProvider {
             'append.service-task': {
                 group: 'model',
                 className: 'bpmn-icon-service-task',
-                title: this.translate('Append ServiceTask'),
+                title: this.translate('Append service task'),
                 action: {
                     hover: this.appendServiceTaskPreview,
                     click: this.appendServiceTask,
@@ -1395,8 +1150,7 @@ class HideOtherPaletteProvider {
             'create.end-event',
             'create.user-task',
             'create.service-task',
-            'create.exclusive-gateway',
-            'xml'
+            // 'create.exclusive-gateway'
         ];
         palette.registerProvider(0, this);
     }
@@ -1422,23 +1176,23 @@ class HideOtherContextPadProvider {
     }
     getContextPadEntries(element) {
         return (entries) => {
+            if (isLabel(element)) {
+                return {};
+            }
             if (is(element, 'bpmn:EndEvent')) {
                 return {
-                    'delete': entries['delete'],
-                    'set-color': entries['set-color']
+                    'delete': entries['delete']
                 };
             }
             else if (is(element, 'bpmn:SequenceFlow')) {
                 if (entries['replace']) {
                     return {
                         'replace': this.createReplaceAction(element),
-                        'delete': entries['delete'],
-                        'set-color': entries['set-color']
+                        'delete': entries['delete']
                     };
                 }
                 return {
-                    'delete': entries['delete'],
-                    'set-color': entries['set-color']
+                    'delete': entries['delete']
                 };
             }
             else if (is(element, 'bpmn:Gateway')) {
@@ -1449,18 +1203,16 @@ class HideOtherContextPadProvider {
                     'append.end-event': entries['append.end-event'],
                     'connect': entries['connect'],
                     'replace': this.createReplaceAction(element),
-                    'delete': entries['delete'],
-                    'set-color': entries['set-color']
+                    'delete': entries['delete']
                 };
             }
             return {
                 'append.user-task': entries['append.user-task'],
                 'append.service-task': entries['append.service-task'],
-                'append.gateway': entries['append.gateway'],
+                // 'append.gateway': entries['append.gateway'],
                 'append.end-event': entries['append.end-event'],
                 'connect': entries['connect'],
-                'delete': entries['delete'],
-                'set-color': entries['set-color']
+                'delete': entries['delete']
             };
         };
     }
@@ -1523,149 +1275,6 @@ var customHideOtherModule = {
     gatewayReplaceMenuProvider: ['type', GatewayReplaceMenuProvider]
 };
 
-const util = {};
-function addExtensionProperty(element, key, value) {
-    let extensionElements = element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-        extensionElements = util.bpmnFactory.create('bpmn:ExtensionElements', { values: [] });
-        extensionElements.$parent = element.businessObject;
-        util.modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
-    }
-    let properties = null;
-    const extensionElementValues = extensionElements.get('values');
-    const existPropertiesElements = extensionElementValues.filter((value) => is(value, 'camunda:Properties'));
-    if (existPropertiesElements.length > 0) {
-        properties = existPropertiesElements[0];
-    }
-    if (!properties) {
-        properties = util.bpmnFactory.create('camunda:Properties', { values: [] });
-        properties.$parent = extensionElements;
-        util.modeling.updateModdleProperties(element, extensionElements, { values: [...extensionElements.get('values'), properties] });
-    }
-    const propertyValues = properties.get('values');
-    const existPropertyIndex = propertyValues.findIndex((value) => value.name === key);
-    if (existPropertyIndex > -1) {
-        util.modeling.updateModdleProperties(element, propertyValues[existPropertyIndex], { name: key, value });
-    }
-    else {
-        const property = util.bpmnFactory.create('camunda:Property', { name: key, value });
-        property.$parent = properties;
-        util.modeling.updateModdleProperties(element, properties, { values: [...properties.get('values'), property] });
-    }
-}
-function getExtensionPropertyValue(element, key) {
-    let extensionElements = element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-        return '';
-    }
-    let properties = null;
-    const extensionElementValues = extensionElements.get('values');
-    const existPropertiesElements = extensionElementValues.filter((value) => is(value, 'camunda:Properties'));
-    if (existPropertiesElements.length > 0) {
-        properties = existPropertiesElements[0];
-    }
-    if (!properties) {
-        return '';
-    }
-    const propertyValues = properties.get('values');
-    const existPropertyIndex = propertyValues.findIndex((value) => value.name === key);
-    if (existPropertyIndex > -1) {
-        return propertyValues[existPropertyIndex].value;
-    }
-}
-
-// @ts-ignore
-class TaskDescriptionProps {
-    constructor(props) {
-        this.id = 'Coast_taskDescription';
-        const { element } = props;
-        this.component = () => {
-            return TextAreaEntry({
-                element: element,
-                id: this.id,
-                label: util.translate('Task description'),
-                getValue: () => {
-                    return getExtensionPropertyValue(element, this.id);
-                },
-                setValue: (value) => {
-                    addExtensionProperty(element, this.id, value);
-                },
-                debounce: util.debounce,
-                autoResize: true
-            });
-        };
-        this.isEdited = isTextAreaEntryEdited;
-    }
-}
-
-// @ts-ignore
-class UserAssignmentStaticOrDynamicProps {
-    constructor(props) {
-        this.id = 'Coast_userAssignment_staticOrDynamic';
-        const { element } = props;
-        this.component = () => {
-            return SelectEntry({
-                element: element,
-                id: this.id,
-                label: util.translate('Set assignment rule'),
-                getValue: () => {
-                    return getExtensionPropertyValue(element, this.id);
-                },
-                setValue: (value) => {
-                    addExtensionProperty(element, this.id, value);
-                },
-                getOptions: () => {
-                    return [
-                        { value: '', label: util.translate('dynamic user') },
-                        { value: 'static_user', label: util.translate('static user') },
-                        { value: 'dynamic_role', label: util.translate('dynamic role') },
-                        { value: 'static_role', label: util.translate('static role') }
-                    ];
-                }
-            });
-        };
-        this.isEdited = isSelectEntryEdited;
-    }
-}
-
-function getUserAssignmentProps(element) {
-    return [new UserAssignmentStaticOrDynamicProps(element)];
-}
-
-class CustomPropertiesProvider {
-    constructor(propertiesPanel, translate, bpmnFactory, modeling, debounceInput) {
-        this.translate = translate;
-        util.translate = translate;
-        util.bpmnFactory = bpmnFactory;
-        util.modeling = modeling;
-        util.debounce = debounceInput;
-        propertiesPanel.registerProvider(0, this);
-    }
-    getGroups(element) {
-        return ((groups) => {
-            const generalGroup = groups.find((group) => group.id === 'general');
-            generalGroup.shouldOpen = true;
-            console.log(generalGroup);
-            if (is(element, 'bpmn:Process')) {
-                generalGroup.entries.splice(1, 3);
-            }
-            else if (is(element, 'bpmn:UserTask')) {
-                generalGroup.entries.splice(1, 1);
-                generalGroup.entries.push(...[
-                    new TaskDescriptionProps({ element }),
-                    ...getUserAssignmentProps({ element })
-                ]);
-            }
-            return [generalGroup];
-        });
-    }
-}
-
-var customPropertiesPanelModule = {
-    __init__: ['customPropertiesProvider'],
-    customPropertiesProvider: ['type', CustomPropertiesProvider]
-};
-
 class CodeEditorComponent {
     set code(code) {
         this._code = code || '';
@@ -1715,10 +1324,10 @@ class CodeEditorComponent {
     }
 }
 CodeEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
+CodeEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CodeEditorComponent, selector: "rs-code-editor", inputs: { code: "code", language: "language", readonly: "readonly", enableMinimap: "enableMinimap", consoleMessage: "consoleMessage" }, outputs: { codeChange: "codeChange", onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{ consoleMessage }}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxLoadPanelComponent, selector: "dx-load-panel", inputs: ["animation", "closeOnOutsideClick", "container", "copyRootClassesToWrapper", "deferRendering", "delay", "elementAttr", "focusStateEnabled", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "indicatorSrc", "maxHeight", "maxWidth", "message", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showIndicator", "showPane", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "animationChange", "closeOnOutsideClickChange", "containerChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "delayChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "indicatorSrcChange", "maxHeightChange", "maxWidthChange", "messageChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showIndicatorChange", "showPaneChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i6$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-code-editor', template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{consoleMessage}}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
+            args: [{ selector: 'rs-code-editor', template: "<dx-load-panel [container]=\"viewContainerRef.element.nativeElement\" [showPane]=\"false\"\n               [visible]=\"loading\">\n  <dxo-position [of]=\"viewContainerRef.element.nativeElement\"></dxo-position>\n</dx-load-panel>\n<div class=\"editor-container\" #editorContainer></div>\n<div *ngIf=\"consoleMessage\" class=\"editor-console\">{{ consoleMessage }}</div>\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .editor-container{flex:1}:host .editor-console{flex:0 0 30px;padding:4px;border:1px solid var(--coast-border-color, #dddddd);background-color:var(--coast-empty-color, #d4d4d4)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { code: [{
                 type: Input
             }], codeChange: [{
@@ -1740,7 +1349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 
 class CamundaBpmnEditorComponent {
     constructor() {
+        this.selectedNodeChanged = new EventEmitter();
         this.isShowXml = false;
+        this.isShowConfig = false;
         this.initialDiagram = '<?xml version="1.0" encoding="UTF-8"?>' +
             '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
             'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
@@ -1762,7 +1373,9 @@ class CamundaBpmnEditorComponent {
     }
     set xml(xml) {
         this._xml = xml;
-        this.loadXml();
+        setTimeout(() => {
+            this.loadXml();
+        });
     }
     get xml() {
         return this._xml;
@@ -1786,14 +1399,31 @@ class CamundaBpmnEditorComponent {
                 customUserTaskModule,
                 customServiceTaskModule,
                 customHideOtherModule,
-                customPropertiesPanelModule
+                // customPropertiesPanelModule
             ]
         });
         const logo = this.modeler._container.querySelector('.bjs-powered-by');
         if (logo) {
             this.modeler._container.removeChild(logo);
         }
+        this.modeler.get('palette')._toggleState({ twoColumn: false });
         this.canvas = this.modeler.get('canvas');
+        const eventBus = this.modeler.get('eventBus');
+        eventBus.on(['propertiesPanel.updated'], ($event) => {
+            if (Array.isArray($event.element)) {
+                this.selectedNodeChanged.emit();
+            }
+            else {
+                this.selectedNodeChanged.emit({
+                    element: $event.element,
+                    util: {
+                        bpmnFactory: this.modeler.get('bpmnFactory'),
+                        modeling: this.modeler.get('modeling'),
+                        elementRegistry: this.modeler.get('elementRegistry')
+                    }
+                });
+            }
+        });
         this.loadXml();
     }
     loadXml() {
@@ -1818,12 +1448,14 @@ class CamundaBpmnEditorComponent {
     }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml" }, outputs: { selectedNodeChanged: "selectedNodeChanged" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\n             style=\"float: right;\"\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CamundaBpmnEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\n  <div class=\"container\" #bpmnContainer></div>\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\n  </div>\n</div>\n<div class=\"footer\">\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\n             (onClick)=\"showXml()\"></dx-button>\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\n             style=\"float: right;\"\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\n</div>\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, #dddddd)}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], propDecorators: { xml: [{
                 type: Input
+            }], selectedNodeChanged: [{
+                type: Output
             }], bpmnContainer: [{
                 type: ViewChild,
                 args: ['bpmnContainer']
@@ -3404,12 +3036,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: [RowButtonsTemplateDirective]
             }] } });
 
+class FieldSelectorComponent {
+    constructor() {
+        this.fieldTree = [];
+        this.required = false;
+        this.label = '属性';
+        this.readonly = false;
+        this.multiple = false;
+        this.fieldChanged = new EventEmitter();
+        this.__fields = [];
+        this.suspendSelectionChanged = false;
+    }
+    set _fields(__fields) {
+        if (this.__fields !== __fields) {
+            this.__fields = __fields;
+            this.fieldChange(this.__fields);
+        }
+    }
+    get _fields() {
+        return this.__fields;
+    }
+    ngOnInit() {
+        if (this.config.field) {
+            if (Array.isArray(this.config.field)) {
+                this._fields = this.config.field;
+            }
+            else {
+                this._fields = [this.config.field];
+            }
+        }
+    }
+    fieldChange(value) {
+        if (value && value.length > 0) {
+            this.config.__formAttribute = value.join(';');
+            if (this.multiple) {
+                this.config.field = value;
+                const fields = [];
+                for (const fieldName of value) {
+                    fields.push(this.getField(this.fieldTree, fieldName));
+                }
+                this.fieldChanged.emit(fields);
+            }
+            else {
+                this.config.field = value[0];
+                this.fieldChanged.emit(this.getField(this.fieldTree, value[0]));
+            }
+        }
+        else {
+            this.config.field = '';
+            this.config.__formAttribute = '';
+            this.fieldChanged.emit();
+        }
+    }
+    getField(tree, field) {
+        for (const node of tree) {
+            if (node.innerName === field) {
+                return node;
+            }
+            if (node.children) {
+                const result = this.getField(node.children, field);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    onRowPrepared($event) {
+        if ($event.rowType === 'header') {
+            $event.rowElement.style.display = 'none';
+        }
+    }
+    onCellPrepared($event) {
+        if ($event.rowType === 'data') {
+            if (!this.multiple) {
+                $event.cellElement.style.cursor = 'pointer';
+            }
+            if (this.multiple && !$event.visible && $event.data.hasItems) {
+                const checkbox = $event.cellElement.querySelector('.dx-select-checkbox');
+                checkbox.style.display = 'none';
+            }
+        }
+    }
+    onSelectionChanged($event, dropDownBox) {
+        if (this.multiple) {
+            return;
+        }
+        if (this.suspendSelectionChanged) {
+            this.suspendSelectionChanged = false;
+            return;
+        }
+        if ($event.selectedRowsData.length === 0) {
+            return;
+        }
+        if (!$event.selectedRowsData[0].visible && $event.selectedRowsData[0].hasItems) {
+            if ($event.component.isRowExpanded($event.selectedRowKeys[0])) {
+                $event.component.collapseRow($event.selectedRowKeys[0]);
+            }
+            else {
+                $event.component.expandRow($event.selectedRowKeys[0]);
+            }
+            this.suspendSelectionChanged = true;
+            $event.component.selectRows($event.currentDeselectedRowKeys[0]);
+            return;
+        }
+        dropDownBox.instance.close();
+    }
+    removeItem($event, field) {
+        $event.stopPropagation();
+        const findIndex = this._fields.findIndex((innerName) => innerName === field.innerName);
+        this._fields.splice(findIndex, 1);
+    }
+}
+FieldSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FieldSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FieldSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FieldSelectorComponent, selector: "rs-field-selector", inputs: { fieldTree: "fieldTree", config: "config", required: "required", label: "label", readonly: "readonly", multiple: "multiple" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>\u5C5E\u6027</span>\n    <span class=\"required-mark\" *ngIf=\"required\">&nbsp;*</span>\n  </div>\n  <div class=\"dx-field-value\">\n    <dx-drop-down-box #fieldDropDownBox\n                      [dataSource]=\"fieldTree\"\n                      valueExpr=\"innerName\"\n                      fieldTemplate=\"fieldTemplate\"\n                      contentTemplate=\"contentTemplate\"\n                      [showClearButton]=\"true\"\n                      [dropDownOptions]=\"{maxHeight: 'none', deferRendering: false}\"\n                      [(value)]=\"_fields\"\n                      [readOnly]=\"readonly\">\n      <div *dxTemplate=\"let info of 'fieldTemplate'\">\n        <dx-text-box [visible]=\"false\"></dx-text-box>\n        <dx-tag-box [dataSource]=\"fieldTree\"\n                    valueExpr=\"innerName\"\n                    width=\"100%\"\n                    [openOnFieldClick]=\"false\"\n                    [(value)]=\"_fields\"\n                    [class.coast-tag-selector]=\"true\"\n                    [readOnly]=\"readonly\">\n          <div *dxTemplate=\"let field of 'tag'\">\n            <dx-button [elementAttr]=\"{ class: 'item'}\">\n              <span>{{ field.caption }}</span>\n              <i *ngIf=\"multiple && !readonly\" class=\"coast-icon-close\" (click)=\"removeItem($event, field)\"></i>\n            </dx-button>\n          </div>\n        </dx-tag-box>\n      </div>\n      <div *dxTemplate=\"let data of 'contentTemplate'\">\n        <dx-text-box mode=\"search\" placeholder=\"\u641C\u7D22...\" valueChangeEvent=\"keyup\"\n                     (onValueChanged)=\"dxTreeList.instance.searchByText($event.value)\"></dx-text-box>\n        <dx-tree-list #dxTreeList\n                      [dataSource]=\"fieldTree\"\n                      [filterValue]=\"['visible','=',true]\"\n                      keyExpr=\"innerName\"\n                      parentIdExpr=\"parentInnerName\"\n                      [(selectedRowKeys)]=\"_fields\"\n                      [height]=\"360\"\n                      [showRowLines]=\"true\"\n                      [showBorders]=\"true\"\n                      [hoverStateEnabled]=\"true\"\n                      [rowAlternationEnabled]=\"true\"\n                      [columnAutoWidth]=\"true\"\n                      (onRowPrepared)=\"onRowPrepared($event)\"\n                      (onCellPrepared)=\"onCellPrepared($event)\"\n                      (onSelectionChanged)=\"onSelectionChanged($event, fieldDropDownBox)\">\n          <dxi-column dataField=\"innerName\" dataType=\"string\" [visible]=\"false\"></dxi-column>\n          <dxi-column dataField=\"caption\" dataType=\"string\" caption=\"\u540D\u79F0\"></dxi-column>\n          <dxi-column dataField=\"visible\" dataType=\"boolean\" [visible]=\"false\"></dxi-column>\n          <dxo-selection [mode]=\"multiple ? 'multiple' : 'single'\" [allowSelectAll]=\"false\"></dxo-selection>\n          <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n        </dx-tree-list>\n      </div>\n      <dx-validator>\n        <dxi-validation-rule *ngIf=\"required\" type=\"required\" message=\"\u503C\u4E0D\u80FD\u4E3A\u7A7A\"></dxi-validation-rule>\n      </dx-validator>\n    </dx-drop-down-box>\n  </div>\n</div>\n", styles: [":host .dx-field{margin-bottom:8px;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-label{flex:0 0 80px}:host .dx-field .dx-field-value{flex:1}:host dx-tag-box{display:block}:host dx-tag-box .item{min-height:20px}:host dx-tag-box .item .coast-icon-close{padding-left:4px}:host dx-tag-box .item .coast-icon-close:hover{color:var(--coast-danger-color, #d9534f)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i6$1.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "recursive", "selectByClick", "deferred", "mode", "selectAllMode", "showCheckBoxesMode"] }, { kind: "component", type: i6$1.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6$1.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }, { kind: "component", type: i6$1.DxoScrollingComponent, selector: "dxo-scrolling", inputs: ["columnRenderingMode", "mode", "preloadEnabled", "renderAsync", "rowRenderingMode", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative"] }, { kind: "component", type: i5$2.DxDropDownBoxComponent, selector: "dx-drop-down-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "contentTemplate", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValueFormatter", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "label", "labelMode", "maxLength", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "contentTemplateChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueFormatterChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "labelChange", "labelModeChange", "maxLengthChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$1.DxTreeListComponent, selector: "dx-tree-list", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoExpandAll", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "dataSource", "dataStructure", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "expandedRowKeys", "expandNodesOnFiltering", "filterBuilder", "filterBuilderPopup", "filterMode", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "hasItemsExpr", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "itemsExpr", "keyboardNavigation", "keyExpr", "loadPanel", "noDataText", "pager", "paging", "parentIdExpr", "remoteOperations", "renderAsync", "repaintChangesOnly", "rootValue", "rowAlternationEnabled", "rowDragging", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sorting", "stateStoring", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onNodesInitialized", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoExpandAllChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "dataSourceChange", "dataStructureChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "expandedRowKeysChange", "expandNodesOnFilteringChange", "filterBuilderChange", "filterBuilderPopupChange", "filterModeChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "hasItemsExprChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "itemsExprChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "noDataTextChange", "pagerChange", "pagingChange", "parentIdExprChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rootValueChange", "rowAlternationEnabledChange", "rowDraggingChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortingChange", "stateStoringChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i9.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FieldSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-field-selector', template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>\u5C5E\u6027</span>\n    <span class=\"required-mark\" *ngIf=\"required\">&nbsp;*</span>\n  </div>\n  <div class=\"dx-field-value\">\n    <dx-drop-down-box #fieldDropDownBox\n                      [dataSource]=\"fieldTree\"\n                      valueExpr=\"innerName\"\n                      fieldTemplate=\"fieldTemplate\"\n                      contentTemplate=\"contentTemplate\"\n                      [showClearButton]=\"true\"\n                      [dropDownOptions]=\"{maxHeight: 'none', deferRendering: false}\"\n                      [(value)]=\"_fields\"\n                      [readOnly]=\"readonly\">\n      <div *dxTemplate=\"let info of 'fieldTemplate'\">\n        <dx-text-box [visible]=\"false\"></dx-text-box>\n        <dx-tag-box [dataSource]=\"fieldTree\"\n                    valueExpr=\"innerName\"\n                    width=\"100%\"\n                    [openOnFieldClick]=\"false\"\n                    [(value)]=\"_fields\"\n                    [class.coast-tag-selector]=\"true\"\n                    [readOnly]=\"readonly\">\n          <div *dxTemplate=\"let field of 'tag'\">\n            <dx-button [elementAttr]=\"{ class: 'item'}\">\n              <span>{{ field.caption }}</span>\n              <i *ngIf=\"multiple && !readonly\" class=\"coast-icon-close\" (click)=\"removeItem($event, field)\"></i>\n            </dx-button>\n          </div>\n        </dx-tag-box>\n      </div>\n      <div *dxTemplate=\"let data of 'contentTemplate'\">\n        <dx-text-box mode=\"search\" placeholder=\"\u641C\u7D22...\" valueChangeEvent=\"keyup\"\n                     (onValueChanged)=\"dxTreeList.instance.searchByText($event.value)\"></dx-text-box>\n        <dx-tree-list #dxTreeList\n                      [dataSource]=\"fieldTree\"\n                      [filterValue]=\"['visible','=',true]\"\n                      keyExpr=\"innerName\"\n                      parentIdExpr=\"parentInnerName\"\n                      [(selectedRowKeys)]=\"_fields\"\n                      [height]=\"360\"\n                      [showRowLines]=\"true\"\n                      [showBorders]=\"true\"\n                      [hoverStateEnabled]=\"true\"\n                      [rowAlternationEnabled]=\"true\"\n                      [columnAutoWidth]=\"true\"\n                      (onRowPrepared)=\"onRowPrepared($event)\"\n                      (onCellPrepared)=\"onCellPrepared($event)\"\n                      (onSelectionChanged)=\"onSelectionChanged($event, fieldDropDownBox)\">\n          <dxi-column dataField=\"innerName\" dataType=\"string\" [visible]=\"false\"></dxi-column>\n          <dxi-column dataField=\"caption\" dataType=\"string\" caption=\"\u540D\u79F0\"></dxi-column>\n          <dxi-column dataField=\"visible\" dataType=\"boolean\" [visible]=\"false\"></dxi-column>\n          <dxo-selection [mode]=\"multiple ? 'multiple' : 'single'\" [allowSelectAll]=\"false\"></dxo-selection>\n          <dxo-scrolling showScrollbar=\"always\"></dxo-scrolling>\n        </dx-tree-list>\n      </div>\n      <dx-validator>\n        <dxi-validation-rule *ngIf=\"required\" type=\"required\" message=\"\u503C\u4E0D\u80FD\u4E3A\u7A7A\"></dxi-validation-rule>\n      </dx-validator>\n    </dx-drop-down-box>\n  </div>\n</div>\n", styles: [":host .dx-field{margin-bottom:8px;display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-label{flex:0 0 80px}:host .dx-field .dx-field-value{flex:1}:host dx-tag-box{display:block}:host dx-tag-box .item{min-height:20px}:host dx-tag-box .item .coast-icon-close{padding-left:4px}:host dx-tag-box .item .coast-icon-close:hover{color:var(--coast-danger-color, #d9534f)}\n"] }]
+        }], propDecorators: { fieldTree: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
 class FormModule {
 }
 FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormModule, declarations: [FormComponent], imports: [CommonModule,
+FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: FormModule, declarations: [FormComponent,
+        FieldSelectorComponent], imports: [CommonModule,
         BoxContainerModule,
-        DevExtremeModule], exports: [FormComponent] });
+        DevExtremeModule], exports: [FormComponent,
+        FieldSelectorComponent] });
 FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, imports: [CommonModule,
         BoxContainerModule,
         DevExtremeModule] });
@@ -3417,7 +3184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        FormComponent
+                        FormComponent,
+                        FieldSelectorComponent
                     ],
                     imports: [
                         CommonModule,
@@ -3425,7 +3193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         DevExtremeModule
                     ],
                     exports: [
-                        FormComponent
+                        FormComponent,
+                        FieldSelectorComponent
                     ]
                 }]
         }] });
@@ -3707,10 +3476,10 @@ class IconSelectorComponent {
     }
 }
 IconSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{hoverIcon?.substring(11)}}</span>\n  </div>\n</dx-popover>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{ hoverIcon?.substring(11) }}</span>\n  </div>\n</dx-popover>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{hoverIcon?.substring(11)}}</span>\n  </div>\n</dx-popover>\n" }]
+            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n  <div *dxTemplate=\"let data of 'content'\">\n    <ng-container *ngFor=\"let icon of iconList; let index=index\">\n      <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                 (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n    </ng-container>\n  </div>\n</dx-popover>\n<dx-popover #iconZoomOut height=\"72px\" [enableBodyScroll]=\"false\">\n  <div *dxTemplate=\"let data of 'content'\"\n       style=\"display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;\">\n    <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    <span>{{ hoverIcon?.substring(11) }}</span>\n  </div>\n</dx-popover>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { target: [{
                 type: Input
             }], select: [{
@@ -3870,10 +3639,10 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{ title }}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{ title }}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { modalElementRef: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
@@ -4129,5 +3898,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, filename_from_disposition, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group };
+export { BoxContainerComponent, BoxContainerModule, CamundaBpmnEditorComponent, CamundaBpmnEditorModule, ChangeFilter, CodeEditorComponent, CodeEditorModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FieldSelectorComponent, FormComponent, FormItemConfigBase, FormModule, FormService, FullscreenDirective, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, ModalComponent, ModalModule, ModalService, PdfViewerComponent, PluginManager, RowButtonsTemplateDirective, TooltipContentTemplateDirective, WebsocketModule, WebsocketService, download_file, file_type_icon, filename_from_disposition, format_date, format_datetime, format_file_size, notify_error, notify_success, notify_warning, support_preview_ext, validate, validate_group };
 //# sourceMappingURL=ngx-rs-ant.mjs.map