ngx-rs-ant 1.1.9 → 1.2.1

package/fesm2020/ngx-rs-ant.mjs

@@ -3,13 +3,11 @@ import { Component, Input, HostBinding, EventEmitter, Output, HostListener, View
 import { PluginFactory } from 'coast-plugin-register';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, map, of, lastValueFrom, interval } from 'rxjs';
+import { Subject, ReplaySubject, Subscription, map, of, lastValueFrom, interval } from 'rxjs';
 import * as i2 from 'devextreme-angular/ui/number-box';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
-import * as i3$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DevExtremeModule, DxDataGridComponent, DxValidationGroupComponent, DxButtonModule } from 'devextreme-angular';
-import { HelperUtils, DevUIModule } from 'ng-devui';
+import { DevExtremeModule, DxDataGridComponent, DxValidationGroupComponent, DxLoadPanelModule } from 'devextreme-angular';
+import { HelperUtils } from 'ng-devui';
 import * as i1$1 from '@angular/common/http';
 import CustomStore from 'devextreme/data/custom_store';
 import * as i3 from 'devextreme-angular/core';
@@ -18,11 +16,11 @@ import * as i5$1 from 'devextreme-angular/ui/nested';
 import * as i5 from 'devextreme-angular/ui/tooltip';
 import * as i2$2 from '@angular/platform-browser';
 import * as i4 from 'devextreme-angular/ui/button';
-import * as i3$2 from 'devextreme-angular/ui/accordion';
+import * as i3$1 from 'devextreme-angular/ui/accordion';
 import * as i6 from 'devextreme-angular/ui/load-panel';
 import notify from 'devextreme/ui/notify';
 import * as i7 from 'devextreme-angular/ui/validation-group';
-import * as i3$3 from 'devextreme-angular/ui/text-box';
+import * as i3$2 from 'devextreme-angular/ui/text-box';
 import * as i4$2 from 'devextreme-angular/ui/popover';
 
 class DividerLineComponent {
@@ -669,6 +667,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: [BoxItemHostDirective]
             }] } });
 
+class ChangeFilter {
+    constructor() {
+        this.subject = new ReplaySubject(1);
+        this.subscriptions = new Subscription();
+    }
+    doFilter(changes) {
+        this.subject.next(changes);
+    }
+    dispose() {
+        this.subscriptions.unsubscribe();
+    }
+    notEmpty(key, handler) {
+        this.subscriptions.add(this.subject.subscribe(changes => {
+            if (changes[key]) {
+                const value = changes[key].currentValue;
+                if (value !== undefined && value !== null) {
+                    handler(value);
+                }
+            }
+        }));
+    }
+    has(key, handler) {
+        this.subscriptions.add(this.subject.subscribe(changes => {
+            if (changes[key]) {
+                const value = changes[key].currentValue;
+                handler(value);
+            }
+        }));
+    }
+    notFirst(key, handler) {
+        this.subscriptions.add(this.subject.subscribe(changes => {
+            if (changes[key] && !changes[key].isFirstChange()) {
+                const value = changes[key].currentValue;
+                handler(value);
+            }
+        }));
+    }
+    notFirstAndEmpty(key, handler) {
+        this.subscriptions.add(this.subject.subscribe(changes => {
+            if (changes[key] && !changes[key].isFirstChange()) {
+                const value = changes[key].currentValue;
+                if (value !== undefined && value !== null) {
+                    handler(value);
+                }
+            }
+        }));
+    }
+    anyNotFirst(keys, handler) {
+        this.subscriptions.add(this.subject.subscribe(changes => {
+            let hasChange = false;
+            for (let key of keys) {
+                if (changes[key] && !changes[key].isFirstChange()) {
+                    hasChange = true;
+                }
+            }
+            if (hasChange) {
+                handler();
+            }
+        }));
+    }
+}
+
 class BoxContainerComponent {
     constructor() {
         this.editMode = false;
@@ -677,8 +737,22 @@ class BoxContainerComponent {
             list: [{ type: 'blank', style: {} }]
         };
         this.readonly = false;
+        this.changeFilter = new ChangeFilter();
     }
     ngOnInit() {
+        this.load();
+        this.changeFilter.anyNotFirst(['config', 'model', 'readonly'], () => {
+            this.load();
+        });
+    }
+    ngOnChanges(changes) {
+        this.changeFilter.doFilter(changes);
+    }
+    ngOnDestroy() {
+        this.changeFilter.dispose();
+    }
+    load() {
+        this.boxContainerContent.clear();
         const boxItemComponentRef = this.boxContainerContent.createComponent(BoxItemComponent);
         const instance = boxItemComponentRef.instance;
         instance.boxContainer = this;
@@ -698,7 +772,7 @@ class BoxContainerComponent {
     }
 }
 BoxContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", readonly: "readonly" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
+BoxContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BoxContainerComponent, selector: "rs-box-container", inputs: { config: "config", model: "model", readonly: "readonly" }, viewQueries: [{ propertyName: "boxContainerContent", first: true, predicate: ["boxContainerContent"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-box-container', template: "<ng-container #boxContainerContent></ng-container>\n", styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap}\n"] }]
@@ -730,12 +804,10 @@ BoxContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         StyleComponent,
         PluginNotFoundComponent,
         ConfigBlankComponent], imports: [CommonModule,
-        FormsModule,
         DevExtremeModule], exports: [BoxContainerComponent,
         ItemConfigComponent,
         ItemStyleComponent] });
 BoxContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, imports: [CommonModule,
-        FormsModule,
         DevExtremeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxContainerModule, decorators: [{
             type: NgModule,
@@ -758,7 +830,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule,
                         DevExtremeModule
                     ],
                     exports: [
@@ -1878,14 +1949,27 @@ async function validate_group(validationGroup) {
 }
 
 class FormComponent {
-    constructor(service) {
+    constructor(viewContainerRef, service) {
+        this.viewContainerRef = viewContainerRef;
         this.service = service;
         this.readonly = false;
         this.submitCallback = new EventEmitter();
         this.loading = false;
-        this.window = window;
+        this.changeFilter = new ChangeFilter();
     }
     ngOnInit() {
+        this.load();
+        this.changeFilter.anyNotFirst(['tenant', 'className', 'oid', 'copyOid', 'template'], () => {
+            this.load();
+        });
+    }
+    ngOnChanges(changes) {
+        this.changeFilter.doFilter(changes);
+    }
+    ngOnDestroy() {
+        this.changeFilter.dispose();
+    }
+    load() {
         this.loading = true;
         this.service.getFormTemplateConfig(this.tenant, this.className, this.template).subscribe(response => {
             this.config = response.data.template;
@@ -1926,12 +2010,12 @@ class FormComponent {
         this.formSubmitter.instance.element().click();
     }
 }
-FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], ngImport: i0, template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["config", "model", "readonly"] }, { kind: "component", type: i4.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.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: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
+FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, deps: [{ token: i0.ViewContainerRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: FormComponent, selector: "rs-form", inputs: { tenant: "tenant", className: "className", oid: "oid", copyOid: "copyOid", template: "template", readonly: "readonly" }, outputs: { submitCallback: "submitCallback" }, providers: [FormService], viewQueries: [{ propertyName: "validator", first: true, predicate: DxValidationGroupComponent, descendants: true }, { propertyName: "formSubmitter", first: true, predicate: ["formSubmitter"], descendants: true }], usesOnChanges: 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<dx-validation-group *ngIf=\"!loading\">\n  <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n</dx-validation-group>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxContainerComponent, selector: "rs-box-container", inputs: ["config", "model", "readonly"] }, { kind: "component", type: i5$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.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.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: i7.DxValidationGroupComponent, selector: "dx-validation-group", inputs: ["elementAttr", "height", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "elementAttrChange", "heightChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-form', providers: [FormService], template: "<dx-load-panel [position]=\"{my: 'center', at: 'center', of: form.parentElement?.parentElement || window}\"\n               [showPane]=\"false\"\n               [visible]=\"!model\"></dx-load-panel>\n<form #form>\n  <dx-validation-group *ngIf=\"model\">\n    <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n    <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n  </dx-validation-group>\n</form>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { tenant: [{
+            args: [{ selector: 'rs-form', providers: [FormService], 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<dx-validation-group *ngIf=\"!loading\">\n  <rs-box-container [config]=\"config\" [model]=\"model\" [readonly]=\"readonly\"></rs-box-container>\n  <dx-button #formSubmitter [visible]=\"false\" (onClick)=\"submitForm()\"></dx-button>\n</dx-validation-group>\n", styles: [":host{padding:12px 24px 20px}:host form{display:flex;flex-flow:row nowrap}:host form dx-validation-group{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: FormService }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -1954,11 +2038,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }] } });
 
 class DataDetailComponent {
-    constructor(service) {
+    constructor(viewContainerRef, service) {
+        this.viewContainerRef = viewContainerRef;
         this.service = service;
         this.sections = [];
         this.loading = false;
-        this.window = window;
     }
     ngOnInit() {
         this.loading = true;
@@ -1968,12 +2052,12 @@ class DataDetailComponent {
         });
     }
 }
-DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, deps: [{ token: DataDetailService }], target: i0.ɵɵFactoryTarget.Component });
-DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataDetailComponent, selector: "coast-data-detail", inputs: { tenant: "tenant", className: "className", oid: "oid" }, providers: [DataDetailService], ngImport: i0, template: "<dx-load-panel [showPane]=\"false\" [visible]=\"loading\"></dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{section.name}}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\"\n               [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { 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: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "readonly"], outputs: ["submitCallback"] }] });
+DataDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, deps: [{ token: i0.ViewContainerRef }, { token: DataDetailService }], target: i0.ɵɵFactoryTarget.Component });
+DataDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DataDetailComponent, selector: "coast-data-detail", inputs: { tenant: "tenant", className: "className", oid: "oid" }, providers: [DataDetailService], 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 *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{section.name}}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\"\n               [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DxAccordionComponent, selector: "dx-accordion", inputs: ["accessKey", "activeStateEnabled", "animationDuration", "collapsible", "dataSource", "deferRendering", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemTemplate", "itemTitleTemplate", "keyExpr", "multiple", "noDataText", "repaintChangesOnly", "rtlEnabled", "selectedIndex", "selectedItem", "selectedItemKeys", "selectedItems", "tabIndex", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemContextMenu", "onItemHold", "onItemRendered", "onItemTitleClick", "onOptionChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationDurationChange", "collapsibleChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemTemplateChange", "itemTitleTemplateChange", "keyExprChange", "multipleChange", "noDataTextChange", "repaintChangesOnlyChange", "rtlEnabledChange", "selectedIndexChange", "selectedItemChange", "selectedItemKeysChange", "selectedItemsChange", "tabIndexChange", "visibleChange", "widthChange"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { 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: FormComponent, selector: "rs-form", inputs: ["tenant", "className", "oid", "copyOid", "template", "readonly"], outputs: ["submitCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], template: "<dx-load-panel [showPane]=\"false\" [visible]=\"loading\"></dx-load-panel>\n<div *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{section.name}}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\"\n               [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataDetailService }]; }, propDecorators: { tenant: [{
+            args: [{ selector: 'coast-data-detail', providers: [DataDetailService], 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 *ngIf=\"!loading && sections.length === 0\" class=\"empty\">\n  <span>\u60A8\u65E0\u6743\u67E5\u770B\u8BE5\u6570\u636E\u5B9E\u4F8B\u4EFB\u4F55\u4FE1\u606F</span>\n</div>\n<ng-container *ngIf=\"sections.length > 0\">\n  <dx-accordion [collapsible]=\"true\" [multiple]=\"true\" [deferRendering]=\"false\" [dataSource]=\"sections\"\n                [selectedItems]=\"sections\">\n    <div *dxTemplate=\"let section of 'title'\" class=\"section-title\">\n      <div class=\"section-title-name\">{{section.name}}</div>\n    </div>\n    <div *dxTemplate=\"let section of 'item'\">\n      <rs-form [tenant]=\"tenant\" [className]=\"className\" [oid]=\"oid\" [template]=\"section.formTemplate\"\n               [readonly]=\"true\"></rs-form>\n    </div>\n  </dx-accordion>\n</ng-container>\n", styles: [":host{flex:1;padding:24px;display:flex;flex-flow:column nowrap}:host div.empty{flex:1;padding:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}:host div.empty span{text-align:center;-webkit-user-select:none;user-select:none}:host .section-title{border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .section-title .section-title-name{height:24px;font-size:14px;font-weight:700;padding:4px 8px;display:flex;flex-flow:column nowrap;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: DataDetailService }]; }, propDecorators: { tenant: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -1985,15 +2069,9 @@ 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,
-        DevUIModule,
-        FormsModule,
-        ReactiveFormsModule,
         BoxContainerModule,
         DevExtremeModule], exports: [FormComponent] });
 FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, imports: [CommonModule,
-        DevUIModule,
-        FormsModule,
-        ReactiveFormsModule,
         BoxContainerModule,
         DevExtremeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, decorators: [{
@@ -2004,9 +2082,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        DevUIModule,
-                        FormsModule,
-                        ReactiveFormsModule,
                         BoxContainerModule,
                         DevExtremeModule
                     ],
@@ -2089,9 +2164,9 @@ class DrawerModule {
 }
 DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, declarations: [DrawerComponent], imports: [CommonModule,
-        DxButtonModule] });
+        DevExtremeModule] });
 DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, imports: [CommonModule,
-        DxButtonModule] });
+        DevExtremeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2100,7 +2175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        DxButtonModule
+                        DevExtremeModule
                     ]
                 }]
         }] });
@@ -2143,7 +2218,7 @@ class DynamicParamsComponent {
     }
 }
 DynamicParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", params: "params" }, ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box placeholder=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.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: i3$3.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"] }] });
+DynamicParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DynamicParamsComponent, selector: "rs-dynamic-params", inputs: { label: "label", params: "params" }, ngImport: i0, template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box placeholder=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.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: i3$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rs-dynamic-params', template: "<div class=\"dx-field\">\n  <div class=\"dx-field-label\">\n    <span>{{label || '\u52A8\u6001\u53C2\u6570'}}</span>\n    <dx-button type=\"default\" stylingMode=\"text\" icon=\"coast-icon coast-icon-add\" (onClick)=\"add()\"></dx-button>\n  </div>\n  <div class=\"dx-field-value\">\n    <div *ngFor=\"let param of params; let index = index\">\n      <dx-text-box placeholder=\"\u53C2\u6570\u540D\" [(value)]=\"param.name\"></dx-text-box>\n      <dx-text-box placeholder=\"\u53C2\u6570\u503C\" [(value)]=\"param.value\"></dx-text-box>\n      <dx-button type=\"danger\" stylingMode=\"text\" icon=\"coast-icon coast-icon-close\"\n                 (onClick)=\"delete(index)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .dx-field .dx-field-label{display:flex;align-items:center}:host .dx-field .dx-field-value div{display:flex;flex-flow:row nowrap}:host .dx-field .dx-field-value div dx-text-box{flex:1}\n"] }]
@@ -2157,10 +2232,8 @@ class DynamicParamsModule {
 }
 DynamicParamsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DynamicParamsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsModule, declarations: [DynamicParamsComponent], imports: [CommonModule,
-        FormsModule,
         DevExtremeModule], exports: [DynamicParamsComponent] });
 DynamicParamsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsModule, imports: [CommonModule,
-        FormsModule,
         DevExtremeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DynamicParamsModule, decorators: [{
             type: NgModule,
@@ -2170,7 +2243,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule,
                         DevExtremeModule
                     ],
                     exports: [
@@ -2243,6 +2315,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+class JavaEditorComponent {
+    set code(code) {
+        this._code = code || '';
+        this._editor?.setValue(this._code);
+    }
+    get code() {
+        return this._code;
+    }
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this._code = '';
+        this.codeChange = new EventEmitter();
+        this.onContentReady = new EventEmitter();
+        this.loading = true;
+    }
+    ngOnInit() {
+        const baseUrl = './assets/monaco-editor/min/vs';
+        const loaderScript = document.createElement('script');
+        loaderScript.type = 'text/javascript';
+        loaderScript.src = `${baseUrl}/loader.js`;
+        loaderScript.addEventListener('load', () => {
+            window.require.config({ paths: { 'vs': `${baseUrl}` } });
+            window.require([`vs/editor/editor.main`], () => {
+                this.initMonaco();
+            });
+        });
+        document.body.appendChild(loaderScript);
+    }
+    initMonaco() {
+        this._editor = monaco.editor.create(this.editorContainer.nativeElement, {
+            value: this.code,
+            language: 'java',
+            automaticLayout: true,
+            minimap: {
+                enabled: false
+            }
+        });
+        this._editor.onDidChangeModelContent((e) => {
+            this.codeChange.emit(this._editor.getValue());
+        });
+        this.onContentReady.emit(this._editor);
+        this.loading = false;
+    }
+}
+JavaEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: JavaEditorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+JavaEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: JavaEditorComponent, selector: "rs-java-editor", inputs: { code: "code", 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: i5$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: JavaEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-java-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: [{
+                type: Output
+            }], consoleMessage: [{
+                type: Input
+            }], onContentReady: [{
+                type: Output
+            }], editorContainer: [{
+                type: ViewChild,
+                args: ['editorContainer', { static: true }]
+            }] } });
+
+class JavaEditorModule {
+}
+JavaEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: JavaEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+JavaEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: JavaEditorModule, declarations: [JavaEditorComponent], imports: [CommonModule,
+        DxLoadPanelModule], exports: [JavaEditorComponent] });
+JavaEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: JavaEditorModule, imports: [CommonModule,
+        DxLoadPanelModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: JavaEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        JavaEditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DxLoadPanelModule
+                    ],
+                    exports: [
+                        JavaEditorComponent
+                    ]
+                }]
+        }] });
+
 class ModalComponent {
     constructor(elementRef, changeDetectorRef) {
         this.elementRef = elementRef;
@@ -2598,5 +2755,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, WebsocketModule, WebsocketService, notify_error, notify_success, notify_warning, validate, validate_group };
+export { BoxContainerComponent, BoxContainerModule, ChangeFilter, DataDetailComponent, DataDetailModule, DataGridComponent, DataGridFactory, DataGridModule, DataGridService, DrawerComponent, DrawerModule, DrawerService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, InstanceLinkTemplateDirective, ItemConfigComponent, ItemStyleComponent, JavaEditorComponent, JavaEditorModule, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective, WebsocketModule, WebsocketService, notify_error, notify_success, notify_warning, validate, validate_group };
 //# sourceMappingURL=ngx-rs-ant.mjs.map