ngx-rs-ant 1.2.9 → 1.3.1

package/fesm2015/ngx-rs-ant.mjs

@@ -3,13 +3,13 @@ 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, ReplaySubject, Subscription, map, of, lastValueFrom, debounceTime, interval } from 'rxjs';
+import { Subject, ReplaySubject, Subscription, map, shareReplay, lastValueFrom, debounceTime, interval } from 'rxjs';
 import * as i2 from 'devextreme-angular/ui/number-box';
 import * as i2$1 from 'devextreme-angular/ui/draggable';
 import { DevExtremeModule, DxLoadPanelModule, DxDataGridComponent, DxValidationGroupComponent } from 'devextreme-angular';
 import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
 import { is } from 'bpmn-js/lib/util/ModelUtil';
-import { TextAreaEntry, isTextAreaEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 import * as i6 from 'devextreme-angular/ui/load-panel';
 import * as i6$1 from 'devextreme-angular/ui/nested';
 import { DxoPositionModule } from 'devextreme-angular/ui/nested';
@@ -856,40 +856,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }] });
 
 const translations = {
-    // 调色板
     'Activate the hand tool': '激活拖拽工具',
     'Activate the lasso tool': '激活框选工具',
     'Activate the create/remove space tool': '激活空间移动工具',
     'Activate the global connect tool': '激活全局连接工具',
     'Create StartEvent': '创建开始节点',
     'Create EndEvent': '创建结束节点',
-    'Create UserTask': '创建用户任务',
-    'Create ServiceTask': '创建服务任务',
     'Create Gateway': '创建网关节点',
-    // 面板
-    'Append EndEvent': '追加结束节点',
-    'Append UserTask': '追加用户任务',
-    'Append ServiceTask': '追加服务任务',
-    'Append Gateway': '追加网关节点',
-    'Connect using Sequence/MessageFlow or Association': '使用序列/消息流或关联连接',
-    'Remove': '删除',
-    'Set Color': '设置颜色',
-    'Change type': '改变节点类型',
-    'Exclusive Gateway': '互斥网关',
-    'Parallel Gateway': '并行网关',
-    'Default Flow': '默认流向',
-    'Sequence Flow': '顺序流向',
+    'Create UserTask': '创建用户任务',
     'Open minimap': '打开缩略图',
     'Close minimap': '关闭缩略图',
-    // 配置
-    'General': '参数配置',
-    'Name': '名称',
-    'Task description': '任务描述',
-    'Set assignment rule': '设置用户规则',
-    'dynamic user': '动态用户',
-    'static user': '静态用户',
-    'dynamic role': '动态角色',
-    'static role': '静态角色',
     /*
       'Create {type}': '创建{type}',
       'Create Intermediate/Boundary Event': '创建中间/边界事件',
@@ -1260,85 +1236,6 @@ var customUserTaskModule = {
     userTaskContextPadProvider: ['type', UserTaskContextPadProvider],
 };
 
-class ServiceTaskPaletteProvider {
-    constructor(palette, translate, elementFactory, create) {
-        this.translate = translate;
-        this.elementFactory = elementFactory;
-        this.create = create;
-        palette.registerProvider(this);
-        this.createServiceTask = this.createServiceTask.bind(this);
-    }
-    getPaletteEntries() {
-        return {
-            'create.service-task': {
-                group: 'activity',
-                className: 'bpmn-icon-service-task',
-                title: this.translate('Create ServiceTask'),
-                action: {
-                    dragstart: this.createServiceTask,
-                    click: this.createServiceTask
-                }
-            }
-        };
-    }
-    createServiceTask(event) {
-        const shape = this.elementFactory.createShape({ type: 'bpmn:ServiceTask' });
-        this.create.start(event, shape);
-    }
-}
-
-class ServiceTaskContextPadProvider {
-    constructor(contextPad, translate, appendPreview, elementFactory, autoPlace, create) {
-        this.translate = translate;
-        this.appendPreview = appendPreview;
-        this.elementFactory = elementFactory;
-        this.autoPlace = autoPlace;
-        this.create = create;
-        contextPad.registerProvider(this);
-        this.appendServiceTaskPreview = this.appendServiceTaskPreview.bind(this);
-        this.appendServiceTask = this.appendServiceTask.bind(this);
-        this.appendServiceTaskStart = this.appendServiceTaskStart.bind(this);
-    }
-    getContextPadEntries() {
-        return {
-            'append.service-task': {
-                group: 'model',
-                className: 'bpmn-icon-service-task',
-                title: this.translate('Append ServiceTask'),
-                action: {
-                    hover: this.appendServiceTaskPreview,
-                    click: this.appendServiceTask,
-                    dragstart: this.appendServiceTaskStart
-                }
-            }
-        };
-    }
-    appendServiceTaskPreview(event, source) {
-        this.appendPreview.create(source, 'bpmn:ServiceTask');
-        return () => {
-            this.appendPreview.cleanUp();
-        };
-    }
-    appendServiceTask(event, source) {
-        const shape = this.elementFactory.createShape({ type: 'bpmn:ServiceTask' });
-        this.autoPlace.append(source, shape);
-        this.appendPreview.cleanUp();
-    }
-    appendServiceTaskStart(event, source) {
-        const shape = this.elementFactory.createShape({ type: 'bpmn:ServiceTask' });
-        this.create.start(event, shape, {
-            source: source
-        });
-        this.appendPreview.cleanUp();
-    }
-}
-
-var customServiceTaskModule = {
-    __init__: ['serviceTaskPaletteProvider', 'serviceTaskContextPadProvider'],
-    serviceTaskPaletteProvider: ['type', ServiceTaskPaletteProvider],
-    serviceTaskContextPadProvider: ['type', ServiceTaskContextPadProvider],
-};
-
 class HideOtherPaletteProvider {
     constructor(palette) {
         this.visibleEntryKeys = [
@@ -1350,7 +1247,6 @@ class HideOtherPaletteProvider {
             'create.start-event',
             'create.end-event',
             'create.user-task',
-            'create.service-task',
             'create.exclusive-gateway',
             'xml'
         ];
@@ -1400,7 +1296,6 @@ class HideOtherContextPadProvider {
             else if (is(element, 'bpmn:Gateway')) {
                 return {
                     'append.user-task': entries['append.user-task'],
-                    'append.service-task': entries['append.service-task'],
                     'append.gateway': entries['append.gateway'],
                     'append.end-event': entries['append.end-event'],
                     'connect': entries['connect'],
@@ -1411,7 +1306,6 @@ class HideOtherContextPadProvider {
             }
             return {
                 'append.user-task': entries['append.user-task'],
-                'append.service-task': entries['append.service-task'],
                 'append.gateway': entries['append.gateway'],
                 'append.end-event': entries['append.end-event'],
                 'connect': entries['connect'],
@@ -1479,13 +1373,12 @@ var customHideOtherModule = {
     gatewayReplaceMenuProvider: ['type', GatewayReplaceMenuProvider]
 };
 
-const util = {};
-function addExtensionProperty(element, key, value) {
+function addExtensionProperty(element, key, value, bpmnFactory, modeling) {
     let extensionElements = element.businessObject.get('extensionElements');
     if (!extensionElements) {
-        extensionElements = util.bpmnFactory.create('bpmn:ExtensionElements', { values: [] });
+        extensionElements = bpmnFactory.create('bpmn:ExtensionElements', { values: [] });
         extensionElements.$parent = element.businessObject;
-        util.modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
+        modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
     }
     let properties = null;
     const extensionElementValues = extensionElements.get('values');
@@ -1494,125 +1387,73 @@ function addExtensionProperty(element, key, value) {
         properties = existPropertiesElements[0];
     }
     if (!properties) {
-        properties = util.bpmnFactory.create('camunda:Properties', { values: [] });
+        properties = bpmnFactory.create('camunda:Properties', { values: [] });
         properties.$parent = extensionElements;
-        util.modeling.updateModdleProperties(element, extensionElements, { values: [...extensionElements.get('values'), properties] });
+        modeling.updateModdleProperties(element, extensionElements, { values: [...extensionElements.get('values'), properties] });
     }
     const propertyValues = properties.get('values');
     const existPropertyIndex = propertyValues.findIndex((value) => value.name === key);
     if (existPropertyIndex > -1) {
-        util.modeling.updateModdleProperties(element, propertyValues[existPropertyIndex], { name: key, value });
+        modeling.updateModdleProperties(element, propertyValues[existPropertyIndex], { name: key, value });
     }
     else {
-        const property = util.bpmnFactory.create('camunda:Property', { name: key, value });
+        const property = bpmnFactory.create('camunda:Property', { name: key, value });
         property.$parent = properties;
-        util.modeling.updateModdleProperties(element, properties, { values: [...properties.get('values'), property] });
-    }
-}
-function getExtensionPropertyValue(element, key) {
-    let extensionElements = element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-        return '';
-    }
-    let properties = null;
-    const extensionElementValues = extensionElements.get('values');
-    const existPropertiesElements = extensionElementValues.filter((value) => is(value, 'camunda:Properties'));
-    if (existPropertiesElements.length > 0) {
-        properties = existPropertiesElements[0];
-    }
-    if (!properties) {
-        return '';
-    }
-    const propertyValues = properties.get('values');
-    const existPropertyIndex = propertyValues.findIndex((value) => value.name === key);
-    if (existPropertyIndex > -1) {
-        return propertyValues[existPropertyIndex].value;
+        modeling.updateModdleProperties(element, properties, { values: [...properties.get('values'), property] });
     }
 }
 
 // @ts-ignore
-class TaskDescriptionProps {
+class DescriptionProps {
     constructor(props) {
         this.id = 'Coast_taskDescription';
-        const { element } = props;
+        const { element, translate, bpmnFactory, modeling, debounce } = props;
         this.component = () => {
-            return TextAreaEntry({
-                element: element,
+            return TextFieldEntry({
                 id: this.id,
-                label: util.translate('Task description'),
-                getValue: () => {
-                    return getExtensionPropertyValue(element, this.id);
-                },
-                setValue: (value) => {
-                    addExtensionProperty(element, this.id, value);
-                },
-                debounce: util.debounce,
-                autoResize: true
-            });
-        };
-        this.isEdited = isTextAreaEntryEdited;
-    }
-}
-
-// @ts-ignore
-class UserAssignmentStaticOrDynamicProps {
-    constructor(props) {
-        this.id = 'Coast_userAssignment_staticOrDynamic';
-        const { element } = props;
-        this.component = () => {
-            return SelectEntry({
                 element: element,
-                id: this.id,
-                label: util.translate('Set assignment rule'),
+                label: translate('Task Description'),
                 getValue: () => {
-                    return getExtensionPropertyValue(element, this.id);
+                    return element.businessObject.get('taskDescription') || '';
                 },
                 setValue: (value) => {
-                    addExtensionProperty(element, this.id, value);
+                    modeling.updateModdleProperties(element, element.businessObject, {
+                        'taskDescription': value
+                    });
+                    addExtensionProperty(element, 'taskDescription', value, bpmnFactory, modeling);
                 },
-                getOptions: () => {
-                    return [
-                        { value: '', label: util.translate('dynamic user') },
-                        { value: 'static_user', label: util.translate('static user') },
-                        { value: 'dynamic_role', label: util.translate('dynamic role') },
-                        { value: 'static_role', label: util.translate('static role') }
-                    ];
-                }
+                debounce
             });
         };
-        this.isEdited = isSelectEntryEdited;
+        this.isEdited = isTextFieldEntryEdited;
     }
 }
 
-function getUserAssignmentProps(element) {
-    return [new UserAssignmentStaticOrDynamicProps(element)];
-}
-
 class CustomPropertiesProvider {
     constructor(propertiesPanel, translate, bpmnFactory, modeling, debounceInput) {
         this.translate = translate;
-        util.translate = translate;
-        util.bpmnFactory = bpmnFactory;
-        util.modeling = modeling;
-        util.debounce = debounceInput;
+        this.bpmnFactory = bpmnFactory;
+        this.modeling = modeling;
+        this.debounceInput = debounceInput;
         propertiesPanel.registerProvider(0, this);
     }
     getGroups(element) {
         return ((groups) => {
-            const generalGroup = groups.find((group) => group.id === 'general');
-            generalGroup.shouldOpen = true;
-            console.log(generalGroup);
-            if (is(element, 'bpmn:Process')) {
-                generalGroup.entries.splice(1, 3);
-            }
-            else if (is(element, 'bpmn:UserTask')) {
-                generalGroup.entries.splice(1, 1);
-                generalGroup.entries.push(...[
-                    new TaskDescriptionProps({ element }),
-                    ...getUserAssignmentProps({ element })
-                ]);
-            }
-            return [generalGroup];
+            if (is(element, 'bpmn:UserTask')) {
+                console.log(groups);
+                return [groups.find((group) => group.id === 'general'), {
+                        id: 'Coast_Implementation',
+                        label: this.translate('More config'),
+                        entries: [new DescriptionProps({
+                                element,
+                                translate: this.translate,
+                                bpmnFactory: this.bpmnFactory,
+                                modeling: this.modeling,
+                                debounce: this.debounceInput
+                            })]
+                    }];
+            }
+            return groups;
         });
     }
 }
@@ -1622,6 +1463,37 @@ var customPropertiesPanelModule = {
     customPropertiesProvider: ['type', CustomPropertiesProvider]
 };
 
+var name = "Coast Custom";
+var prefix = "coast";
+var uri = "https://c-standard.cn";
+var xml = {
+    tagAlias: "lowerCase"
+};
+var associations = [];
+var types = [
+    {
+        name: "CoastUserTask",
+        "extends": [
+            "bpmn:UserTask"
+        ],
+        properties: [
+            {
+                name: "taskDescription",
+                isAttr: true,
+                type: "String"
+            }
+        ]
+    }
+];
+var coastModdleDescriptor = {
+    name: name,
+    prefix: prefix,
+    uri: uri,
+    xml: xml,
+    associations: associations,
+    types: types
+};
+
 class CodeEditorComponent {
     set code(code) {
         var _a;
@@ -1698,24 +1570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class CamundaBpmnEditorComponent {
     constructor() {
         this.isShowXml = false;
-        this.initialDiagram = '<?xml version="1.0" encoding="UTF-8"?>' +
-            '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
-            'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
-            'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
-            'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
-            'targetNamespace="http://bpmn.io/schema/bpmn" ' +
-            'id="Definitions_1">' +
-            '<bpmn:process id="Process_1" isExecutable="true">' +
-            '<bpmn:startEvent id="StartEvent_1"/>' +
-            '</bpmn:process>' +
-            '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
-            '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
-            '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
-            '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
-            '</bpmndi:BPMNShape>' +
-            '</bpmndi:BPMNPlane>' +
-            '</bpmndi:BPMNDiagram>' +
-            '</bpmn:definitions>';
     }
     ngAfterViewInit() {
         var _a, _b;
@@ -1730,17 +1584,19 @@ class CamundaBpmnEditorComponent {
             additionalModules: [
                 customTranslateModule,
                 customUserTaskModule,
-                customServiceTaskModule,
                 customHideOtherModule,
                 customPropertiesPanelModule
-            ]
+            ],
+            moddleExtensions: {
+                coast: coastModdleDescriptor
+            }
         });
         const logo = this.modeler._container.querySelector('.bjs-powered-by');
         if (logo) {
             this.modeler._container.removeChild(logo);
         }
         this.canvas = this.modeler.get('canvas');
-        this.modeler.importXML(this.initialDiagram).then(() => {
+        this.modeler.createDiagram().then(() => {
             this.canvas.zoom('fit-viewport');
         });
     }
@@ -1947,32 +1803,30 @@ class DataGridService {
         }, undefined, onSuccess);
     }
     getUserInfo(uid) {
-        if (this.userInfoCache.hasOwnProperty(uid)) {
-            return of(this.userInfoCache[uid]);
+        if (!this.userInfoCache.hasOwnProperty(uid)) {
+            this.userInfoCache[uid] = this.http.get('api/data/custom', {
+                params: {
+                    executor: 'com.cs.system.user.GetUserInfo',
+                    uid
+                }
+            }).pipe(shareReplay(1), map(response => {
+                return response.data;
+            }));
         }
-        return this.http.get('api/data/custom', {
-            params: {
-                executor: 'com.cs.system.user.GetUserInfo',
-                uid
-            }
-        }).pipe(map(response => {
-            this.userInfoCache[uid] = response.data;
-            return response.data;
-        }));
+        return this.userInfoCache[uid];
     }
     getUnitInfo(uid) {
-        if (this.unitInfoCache.hasOwnProperty(uid)) {
-            return of(this.unitInfoCache[uid]);
+        if (!this.unitInfoCache.hasOwnProperty(uid)) {
+            this.unitInfoCache[uid] = this.http.get('api/data/custom', {
+                params: {
+                    executor: 'com.cs.system.user.GetUnitInfo',
+                    uid
+                }
+            }).pipe(shareReplay(1), map(response => {
+                return response.data;
+            }));
         }
-        return this.http.get('api/data/custom', {
-            params: {
-                executor: 'com.cs.system.user.GetUnitInfo',
-                uid
-            }
-        }).pipe(map(response => {
-            this.unitInfoCache[uid] = response.data;
-            return response.data;
-        }));
+        return this.unitInfoCache[uid];
     }
 }
 DataGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DataGridService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3158,10 +3012,10 @@ class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\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"] }, { 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"] }] });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: DrawerComponent, selector: "rs-drawer", ngImport: i0, template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\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"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
+            args: [{ selector: 'rs-drawer', template: "<div #drawerBackdrop class=\"drawer-backdrop\" (click)=\"hide($event, drawerBackdrop)\">\n  <div class=\"drawer\" [ngStyle]=\"{width: _width}\">\n    <div *ngIf=\"headerTemplate\" class=\"drawer-header\">\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: headerTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div class=\"drawer-close\">\n      <dx-button height=\"40px\" icon=\"coast-icon coast-icon-arrow-right-filling\" (onClick)=\"hide($event)\"></dx-button>\n    </div>\n  </div>\n</div>\n", styles: [":host .drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-drawer, 1040) - 1)}:host .drawer-backdrop .drawer{position:absolute;right:0;height:100%;z-index:var(--coast-z-index-drawer, 1040);background-color:var(--coast-base-bg-color, #fff);display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-header{flex:0 0 36px;padding:8px;border-bottom:1px solid var(--coast-border-color, #dddddd);display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}:host .drawer-backdrop .drawer .drawer-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .drawer-backdrop .drawer .drawer-close{position:absolute;height:100%;width:20px;top:0;left:-20px;display:flex;flex-flow:row nowrap;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class DrawerModule {
@@ -3379,14 +3233,6 @@ class ModalComponent {
             nextModal.querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
         }
     }
-    resolveModalBackdropPosition() {
-        return {
-            "width": this.elementRef.nativeElement.parentElement.offsetWidth + 'px',
-            "height": this.elementRef.nativeElement.parentElement.offsetHeight - 1 + 'px',
-            "top": this.elementRef.nativeElement.parentElement.offsetTop + 'px',
-            "left": this.elementRef.nativeElement.parentElement.offsetLeft + 'px',
-        };
-    }
     resolveModalPosition() {
         if (this.size === 'full') {
             return {};
@@ -3452,10 +3298,10 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
+            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\">\r\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n      <div class=\"modal-title\">{{title}}</div>\r\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n    </div>\r\n    <div class=\"modal-content\">\r\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n    </div>\r\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--coast-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--coast-z-index-modal, 1050);background-color:var(--coast-base-bg-color, #fff);border-radius:4px;box-shadow:0 10px 24px #252b3a3d;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--coast-border-color, #dddddd)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:14px;font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:14px}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--coast-danger-color, #d9534f);background-color:var(--coast-global-bg-color, #f6f6f8)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--coast-border-color, #dddddd)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modalElementRef: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]