ngx-rs-ant 1.9.4 → 1.9.6

package/fesm2020/ngx-rs-ant.mjs

@@ -2,11 +2,9 @@ import * as i0 from '@angular/core';
 import { Component, Input, HostBinding, EventEmitter, Output, HostListener, ViewContainerRef, ViewChild, Directive, ViewChildren, NgModule, Injectable, ContentChild } from '@angular/core';
 import { PluginFactory } from 'coast-plugin-register';
 import * as i1 from '@angular/common';
-import { formatDate, CommonModule } from '@angular/common';
-import { firstValueFrom, of, Subject, ReplaySubject, Subscription, map, lastValueFrom, debounceTime, interval } from 'rxjs';
+import { CommonModule, formatDate } from '@angular/common';
+import { Subject, ReplaySubject, Subscription, map, firstValueFrom, of, lastValueFrom, debounceTime, interval } from 'rxjs';
 import * as i2 from 'devextreme-angular/ui/number-box';
-import notify from 'devextreme/ui/notify';
-import validationEngine from 'devextreme/ui/validation_engine';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
 import { DevExtremeModule, DxValidationGroupComponent, DxDataGridComponent } from 'devextreme-angular';
 import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
@@ -15,6 +13,8 @@ import { isLabel } from 'diagram-js/lib/util/ModelUtil';
 import * as i3 from 'devextreme-angular/ui/button';
 import Viewer from 'camunda-bpmn-js/lib/camunda-platform/NavigatedViewer';
 import * as i1$1 from '@angular/common/http';
+import notify from 'devextreme/ui/notify';
+import validationEngine from 'devextreme/ui/validation_engine';
 import CustomStore from 'devextreme/data/custom_store';
 import * as i2$2 from 'devextreme-angular/core';
 import * as i5 from 'devextreme-angular/ui/data-grid';
@@ -149,10 +149,10 @@ class PluginActiveComponent {
     }
 }
 PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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, rgb(51, 122, 183));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, rgb(51, 122, 183));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, rgb(217, 83, 79))}: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.10", 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=\"coast-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=\"coast-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, rgb(51, 122, 183));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, rgb(51, 122, 183));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.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}: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.10", 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, rgb(51, 122, 183));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, rgb(51, 122, 183));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, rgb(217, 83, 79))}: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=\"coast-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=\"coast-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, rgb(51, 122, 183));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, rgb(51, 122, 183));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.coast-icon-drag{cursor:move}:host .active-item .active-bar i.coast-icon-close:hover{color:var(--coast-danger-color, rgb(217, 83, 79))}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
         }], propDecorators: { _style: [{
                 type: HostBinding,
                 args: ['style']
@@ -251,245 +251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             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 ConfigBase {
-}
-
-class FormItemConfigBase extends ConfigBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * 配置更新事件，emit()将更新配置到组件，emit(true)将更新配置到组件并重新加载组件
-         */
-        this.configChange = new EventEmitter();
-    }
-}
-
-class PageItemConfigBase extends ConfigBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * 配置更新事件，emit()将更新配置到组件，emit(true)将更新配置到组件并重新加载组件
-         */
-        this.configChange = new EventEmitter();
-    }
-}
-
-class ComponentBase {
-}
-
-class PageItemComponentBase extends ComponentBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * 编辑模式，在设计器中为true，用于区分组件设计和应用状态
-         */
-        this.editMode = false;
-    }
-}
-
-class FormItemComponentBase extends ComponentBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * 编辑模式，在设计器中为true，用于区分组件设计和应用状态
-         */
-        this.editMode = false;
-        /**
-         * 表单只读状态，用于区分组件只读状态
-         */
-        this.readonly = false;
-    }
-}
-
-class ModalComponentBase extends ComponentBase {
-}
-
-function notify_error(message) {
-    _notify(message, 12000, 'warning');
-}
-function notify_warning(message) {
-    _notify(message, 8000, 'warning');
-}
-function notify_success(message) {
-    _notify(message, 4000, 'success');
-}
-function _notify(message, time, type) {
-    notify({
-        displayTime: time,
-        message,
-        type: type,
-        closeOnSwipe: false,
-        minWidth: 200,
-        maxWidth: 500,
-        wrapperAttr: { class: 'global-toast-message' }
-    }, {
-        direction: 'up-push',
-        position: 'bottom right'
-    });
-}
-function format_date(date, locale) {
-    return formatDate(date, 'yyyy/MM/dd', locale, 'GMT+8');
-}
-function format_datetime(date, locale) {
-    return formatDate(date, 'yyyy/MM/dd HH:mm:ss', locale, 'GMT+8');
-}
-function localeSortMethod(value1, value2) {
-    return value1.localeCompare(value2);
-}
-function file_type_icon(name) {
-    const type = name.substring(name.lastIndexOf('.') + 1).toLocaleLowerCase();
-    switch (type) {
-        case 'doc':
-        case 'docx':
-            return 'word';
-        case 'xls':
-        case 'xlsx':
-        case 'csv':
-            return 'excel';
-        case 'ppt':
-        case 'pptx':
-            return 'ppt';
-        case 'pdf':
-            return 'pdf';
-        case 'txt':
-        case 'xml':
-        case 'json':
-        case 'js':
-            return 'text';
-        case 'png':
-        case 'jpg':
-        case 'jpeg':
-        case 'gif':
-        case 'bmp':
-            return 'image';
-        case 'zip':
-        case 'rar':
-        case '7z':
-        case 'jar':
-            return 'zip';
-        default:
-            return 'unknown';
-    }
-}
-function support_preview_ext() {
-    return ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'doc', 'docx', 'txt', 'xml', 'json', 'js', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'];
-}
-function format_file_size(size) {
-    const labels = ['b', 'Kb', 'Mb', 'Gb'];
-    const count = labels.length - 1;
-    let i = 0;
-    while (i < count && size >= 1024) {
-        size /= 1024;
-        i++;
-    }
-    return Math.round(size * 100) / 100 + " " + labels[i];
-}
-function filename_from_disposition(disposition) {
-    const filenamePair = disposition.split(';').filter(str => /^filename=/.test(str.trim())).pop();
-    if (filenamePair) {
-        let str = filenamePair.trim();
-        str = str.split('=')[1];
-        str = str.replace(/['"]/g, '');
-        return decodeURIComponent(str);
-    }
-    else {
-        return null;
-    }
-}
-function download_file(blob, filename, callback) {
-    const url = window.webkitURL.createObjectURL(blob);
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.setAttribute('style', 'display:none');
-    a.setAttribute('href', url);
-    a.setAttribute('download', decodeURIComponent(filename));
-    a.click();
-    setTimeout(() => {
-        if (callback) {
-            callback();
-        }
-        a.remove();
-    });
-}
-function validate(validator) {
-    return new Promise(resolve => {
-        if (!validator) {
-            resolve(true);
-        }
-        const validateResult = validator.instance.validate();
-        if (!validateResult.isValid) {
-            resolve(false);
-        }
-        if (validateResult.status === 'pending') {
-            validateResult.complete?.then((result) => {
-                if (result.isValid) {
-                    resolve(true);
-                }
-                else {
-                    resolve(false);
-                }
-            });
-        }
-        else {
-            resolve(true);
-        }
-    });
-}
-function validate_group(validationGroupComponent) {
-    if (!validationGroupComponent) {
-        return firstValueFrom(of(true));
-    }
-    return validateGroup(validationGroupComponent.instance, validationGroupComponent.element.nativeElement);
-}
-function validate_group_by_name(name, brokenElementParent) {
-    const validationGroup = validationEngine.getGroupConfig(name);
-    if (!validationGroup) {
-        return firstValueFrom(of(true));
-    }
-    return validateGroup(validationGroup, brokenElementParent);
-}
-function validateGroup(validationGroup, brokenElementParent) {
-    let sourceNode;
-    const targetClassName = 'dx-field';
-    const findTargetNode = (node) => {
-        sourceNode = node;
-        while (true) {
-            if (node.classList.contains(targetClassName)) {
-                return node;
-            }
-            else {
-                node = node.parentElement;
-                if (node === brokenElementParent) {
-                    return sourceNode;
-                }
-            }
-        }
-    };
-    return new Promise(resolve => {
-        const validateResult = validationGroup.validate();
-        if (!validateResult.isValid) {
-            const brokenElement = (validateResult.brokenRules?.[0]).validator.element();
-            findTargetNode(brokenElement).scrollIntoView();
-            resolve(false);
-        }
-        if (validateResult.status === 'pending') {
-            validateResult.complete?.then((result) => {
-                if (result.isValid) {
-                    resolve(true);
-                }
-                else {
-                    const brokenElement = (result.brokenRules?.[0]).validator.element();
-                    findTargetNode(brokenElement).scrollIntoView();
-                    resolve(false);
-                }
-            });
-        }
-        else {
-            resolve(true);
-        }
-    });
-}
-
 class PluginManager {
     static createComponent(boxItem, index, style, config) {
         let plugin = PluginFactory.get(config.name);
@@ -507,20 +268,10 @@ class PluginManager {
         const instance = componentRef.instance;
         Object.assign(instance, config.pluginConfig);
         if (PluginFactory.hasType(plugin, 'page')) {
-            if (!(instance instanceof PageItemComponentBase)) {
-                console.error('page item component need extending PageItemComponentBase, name: ' + config.name);
-                notify_error('加载页面组件失败：' + config.name);
-                return;
-            }
             instance.editMode = boxItem.boxContainer.editMode;
             instance.tabId = boxItem.boxContainer.context?.__tabId;
         }
         if (PluginFactory.hasType(plugin, 'form')) {
-            if (!(instance instanceof FormItemComponentBase)) {
-                console.error('form item component need extending FormItemComponentBase, name: ' + config.name);
-                notify_error('加载表单组件失败：' + config.name);
-                return;
-            }
             instance.editMode = boxItem.boxContainer.editMode;
             instance.validationGroupName = boxItem.boxContainer.context?.__form.uniqueId;
             instance.tenant = boxItem.boxContainer.context?.__form.tenant;
@@ -533,11 +284,6 @@ class PluginManager {
             }
         }
         if (PluginFactory.hasType(plugin, 'modal')) {
-            if (!(instance instanceof ModalComponentBase)) {
-                console.error('modal component need extending ModalComponentBase, name: ' + config.name);
-                notify_error('加载模窗组件失败：' + config.name);
-                return;
-            }
             instance.opener = boxItem.boxContainer.context?.__opener;
         }
         instance.params = boxItem.boxContainer.params;
@@ -663,18 +409,10 @@ class PluginManager {
             const componentRef = itemConfigContainerRef.createComponent(pluginConfig.component);
             const instance = componentRef.instance;
             if (PluginFactory.hasType(plugin, 'page')) {
-                if (!(instance instanceof PageItemConfigBase)) {
-                    console.error('page item component config need extending PageItemConfigBase, name: ' + plugin.name);
-                    notify_error('加载页面组件配置失败：' + plugin.name);
-                    return;
-                }
+                instance.configChange = new EventEmitter();
             }
             if (PluginFactory.hasType(plugin, 'form')) {
-                if (!(instance instanceof FormItemConfigBase)) {
-                    console.error('form item component config need extending FormItemConfigBase, name: ' + plugin.name);
-                    notify_error('加载表单组件配置失败：' + plugin.name);
-                    return;
-                }
+                instance.configChange = new EventEmitter();
                 instance.tenant = context?.tenant;
                 instance.className = context?.className;
                 instance.fieldTree = context?.fieldTree;
@@ -972,10 +710,10 @@ class BoxItemComponent {
     }
 }
 BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BoxItemComponent, selector: "rs-box-item", outputs: { leaveOneItem: "leaveOneItem" }, host: { properties: { "style.flex-direction": "this._direction", "style": "this._style" } }, viewQueries: [{ propertyName: "itemHosts", predicate: BoxItemHostDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".coast-icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.DxDraggableComponent, selector: "dx-draggable", inputs: ["autoScroll", "boundary", "clone", "container", "cursorOffset", "data", "dragDirection", "dragTemplate", "elementAttr", "group", "handle", "height", "rtlEnabled", "scrollSensitivity", "scrollSpeed", "width"], outputs: ["onDisposing", "onDragEnd", "onDragMove", "onDragStart", "onInitialized", "onOptionChanged", "autoScrollChange", "boundaryChange", "cloneChange", "containerChange", "cursorOffsetChange", "dataChange", "dragDirectionChange", "dragTemplateChange", "elementAttrChange", "groupChange", "handleChange", "heightChange", "rtlEnabledChange", "scrollSensitivityChange", "scrollSpeedChange", "widthChange"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <ng-container *ngIf=\"boxContainer.editMode\">\n    <ng-container *ngIf=\"item.type === 'plugin'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    handle=\".coast-icon-drag\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragMove)=\"onDragMove($event)\"\n                    (onDragEnd)=\"onDragEnd($event)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'item'\">\n      <div [ngStyle]=\"calcStyle(item)\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"item.type === 'blank'\">\n      <dx-draggable [ngStyle]=\"calcStyle(item)\"\n                    [data]=\"{boxItem: this, item, index}\"\n                    group=\"rsBoxContainerDragGroup\"\n                    (onDragStart)=\"$event.cancel = true\">\n        <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n      </dx-draggable>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!boxContainer.editMode\">\n    <div [ngStyle]=\"calcStyle(item)\">\n      <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap}:host dx-draggable,:host div{display:flex;flex-flow:row nowrap}:host dx-draggable.active,:host div.active{background-color:var(--coast-empty-color, rgb(229, 229, 229))}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -2074,6 +1812,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+function notify_error(message) {
+    _notify(message, 12000, 'warning');
+}
+function notify_warning(message) {
+    _notify(message, 8000, 'warning');
+}
+function notify_success(message) {
+    _notify(message, 4000, 'success');
+}
+function _notify(message, time, type) {
+    notify({
+        displayTime: time,
+        message,
+        type: type,
+        closeOnSwipe: false,
+        minWidth: 200,
+        maxWidth: 500,
+        wrapperAttr: { class: 'global-toast-message' }
+    }, {
+        direction: 'up-push',
+        position: 'bottom right'
+    });
+}
+function format_date(date, locale) {
+    return formatDate(date, 'yyyy/MM/dd', locale, 'GMT+8');
+}
+function format_datetime(date, locale) {
+    return formatDate(date, 'yyyy/MM/dd HH:mm:ss', locale, 'GMT+8');
+}
+function localeSortMethod(value1, value2) {
+    return value1.localeCompare(value2);
+}
+function file_type_icon(name) {
+    const type = name.substring(name.lastIndexOf('.') + 1).toLocaleLowerCase();
+    switch (type) {
+        case 'doc':
+        case 'docx':
+            return 'word';
+        case 'xls':
+        case 'xlsx':
+        case 'csv':
+            return 'excel';
+        case 'ppt':
+        case 'pptx':
+            return 'ppt';
+        case 'pdf':
+            return 'pdf';
+        case 'txt':
+        case 'xml':
+        case 'json':
+        case 'js':
+            return 'text';
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+        case 'bmp':
+            return 'image';
+        case 'zip':
+        case 'rar':
+        case '7z':
+        case 'jar':
+            return 'zip';
+        default:
+            return 'unknown';
+    }
+}
+function support_preview_ext() {
+    return ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'doc', 'docx', 'txt', 'xml', 'json', 'js', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'];
+}
+function format_file_size(size) {
+    const labels = ['b', 'Kb', 'Mb', 'Gb'];
+    const count = labels.length - 1;
+    let i = 0;
+    while (i < count && size >= 1024) {
+        size /= 1024;
+        i++;
+    }
+    return Math.round(size * 100) / 100 + " " + labels[i];
+}
+function filename_from_disposition(disposition) {
+    const filenamePair = disposition.split(';').filter(str => /^filename=/.test(str.trim())).pop();
+    if (filenamePair) {
+        let str = filenamePair.trim();
+        str = str.split('=')[1];
+        str = str.replace(/['"]/g, '');
+        return decodeURIComponent(str);
+    }
+    else {
+        return null;
+    }
+}
+function download_file(blob, filename, callback) {
+    const url = window.webkitURL.createObjectURL(blob);
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('style', 'display:none');
+    a.setAttribute('href', url);
+    a.setAttribute('download', decodeURIComponent(filename));
+    a.click();
+    setTimeout(() => {
+        if (callback) {
+            callback();
+        }
+        a.remove();
+    });
+}
+function validate(validator) {
+    return new Promise(resolve => {
+        if (!validator) {
+            resolve(true);
+        }
+        const validateResult = validator.instance.validate();
+        if (!validateResult.isValid) {
+            resolve(false);
+        }
+        if (validateResult.status === 'pending') {
+            validateResult.complete?.then((result) => {
+                if (result.isValid) {
+                    resolve(true);
+                }
+                else {
+                    resolve(false);
+                }
+            });
+        }
+        else {
+            resolve(true);
+        }
+    });
+}
+function validate_group(validationGroupComponent) {
+    if (!validationGroupComponent) {
+        return firstValueFrom(of(true));
+    }
+    return validateGroup(validationGroupComponent.instance, validationGroupComponent.element.nativeElement);
+}
+function validate_group_by_name(name, brokenElementParent) {
+    const validationGroup = validationEngine.getGroupConfig(name);
+    if (!validationGroup) {
+        return firstValueFrom(of(true));
+    }
+    return validateGroup(validationGroup, brokenElementParent);
+}
+function validateGroup(validationGroup, brokenElementParent) {
+    let sourceNode;
+    const targetClassName = 'dx-field';
+    const findTargetNode = (node) => {
+        sourceNode = node;
+        while (true) {
+            if (node.classList.contains(targetClassName)) {
+                return node;
+            }
+            else {
+                node = node.parentElement;
+                if (node === brokenElementParent) {
+                    return sourceNode;
+                }
+            }
+        }
+    };
+    return new Promise(resolve => {
+        const validateResult = validationGroup.validate();
+        if (!validateResult.isValid) {
+            const brokenElement = (validateResult.brokenRules?.[0]).validator.element();
+            findTargetNode(brokenElement).scrollIntoView();
+            resolve(false);
+        }
+        if (validateResult.status === 'pending') {
+            validateResult.complete?.then((result) => {
+                if (result.isValid) {
+                    resolve(true);
+                }
+                else {
+                    const brokenElement = (result.brokenRules?.[0]).validator.element();
+                    findTargetNode(brokenElement).scrollIntoView();
+                    resolve(false);
+                }
+            });
+        }
+        else {
+            resolve(true);
+        }
+    });
+}
+
 class CustomTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -2875,9 +2799,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['drawerFormContentTemplate', { static: true }]
             }] } });
 
-class CellComponentBase extends ComponentBase {
-}
-
 class CellComponentTemplateComponent {
     constructor(service) {
         this.service = service;
@@ -2894,11 +2815,6 @@ class CellComponentTemplateComponent {
         const componentRef = this.cellComponentRef.createComponent(plugin.component);
         const instance = componentRef.instance;
         Object.assign(instance, cellComponentConfig);
-        if (!(instance instanceof CellComponentBase)) {
-            console.error('cell component need extending CellComponentBase, name: ' + plugin.name);
-            notify_error('加载单元格组件失败：' + plugin.name);
-            return;
-        }
         instance.field = this.cellInfo.column.dataField;
         instance.fieldConfig = fieldConfig;
         instance.rowData = this.cellInfo.data;
@@ -3713,10 +3629,10 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalComponent, selector: "rs-modal", outputs: { onHide: "onHide" }, 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, rgb(255, 255, 255));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, rgb(221, 221, 221))}: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, rgb(217, 83, 79));background-color:var(--coast-global-bg-color, rgb(245, 245, 245))}: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, rgb(221, 221, 221))}\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.10", type: ModalComponent, selector: "rs-modal", outputs: { onHide: "onHide" }, 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=\"coast-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, rgb(255, 255, 255));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, rgb(221, 221, 221))}: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, rgb(217, 83, 79));background-color:var(--coast-global-bg-color, rgb(245, 245, 245))}: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, rgb(221, 221, 221))}\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.10", 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, rgb(255, 255, 255));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, rgb(221, 221, 221))}: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, rgb(217, 83, 79));background-color:var(--coast-global-bg-color, rgb(245, 245, 245))}: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, rgb(221, 221, 221))}\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=\"coast-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, rgb(255, 255, 255));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, rgb(221, 221, 221))}: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, rgb(217, 83, 79));background-color:var(--coast-global-bg-color, rgb(245, 245, 245))}: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, rgb(221, 221, 221))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { modalElementRef: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
@@ -3808,12 +3724,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [PdfJsViewerComponent, { static: true }]
             }] } });
 
+class ComponentBase {
+}
+
+class CellComponentBase extends ComponentBase {
+}
+
+class FormItemComponentBase extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 编辑模式，在设计器中为true，用于区分组件设计和应用状态
+         */
+        this.editMode = false;
+        /**
+         * 表单只读状态，用于区分组件只读状态
+         */
+        this.readonly = false;
+    }
+}
+
+class ModalComponentBase extends ComponentBase {
+}
+
+class PageItemComponentBase extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 编辑模式，在设计器中为true，用于区分组件设计和应用状态
+         */
+        this.editMode = false;
+    }
+}
+
+class ConfigBase {
+}
+
 class CellConfigBase extends ConfigBase {
 }
 
+class FormItemConfigBase extends ConfigBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 配置更新事件，emit()将更新配置到组件，emit(true)将更新配置到组件并重新加载组件
+         */
+        this.configChange = new EventEmitter();
+    }
+}
+
 class ModalConfigBase extends ConfigBase {
 }
 
+class PageItemConfigBase extends ConfigBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 配置更新事件，emit()将更新配置到组件，emit(true)将更新配置到组件并重新加载组件
+         */
+        this.configChange = new EventEmitter();
+    }
+}
+
 class WebsocketModule {
 }
 WebsocketModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WebsocketModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });