ngx-rs-ant 0.11.2 → 0.11.6

package/fesm2020/ngx-rs-ant.mjs

@@ -10,7 +10,7 @@ import * as i5 from '@angular/forms';
 import { FormsModule, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import { DevUIModule, HelperUtils, FormLayout } from 'ng-devui';
 import * as i3$1 from 'devextreme-angular';
-import { DxDataGridComponent, DxDataGridModule } from 'devextreme-angular';
+import { DxDataGridComponent, DxDataGridModule, DevExtremeModule } from 'devextreme-angular';
 import * as i1$1 from '@angular/common/http';
 import CustomStore from 'devextreme/data/custom_store';
 import * as i4 from 'devextreme-angular/ui/nested';
@@ -21,6 +21,8 @@ import * as i2$3 from 'ng-devui/button';
 import * as i3$2 from 'ng-devui/form';
 import * as i4$1 from 'ng-devui/text-input';
 import * as i4$2 from 'ng-devui/loading';
+import * as i3$3 from 'devextreme-angular/ui/button';
+import * as i4$3 from 'devextreme-angular/ui/popover';
 
 class DividerLineComponent {
     get _style() {
@@ -512,6 +514,7 @@ class BoxItemComponent {
                         instance.config = item.config;
                         instance.pDirection = this.config.direction;
                         if (this.boxContainer.editMode) {
+                            boxItemComponentRef.location.nativeElement.style.margin = '8px';
                             instance.leaveOneItem.subscribe((item) => {
                                 if (item.type === 'item' && item.direction === this.config.direction) {
                                     this.config.list.splice(i, 1, ...item.list);
@@ -630,10 +633,10 @@ class BoxItemComponent {
     }
 }
 BoxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BoxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;margin:8px;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
+BoxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: BoxItemHostDirective, selector: "[rsBoxItemHost]", inputs: ["hostId"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", 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  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;margin:8px;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"] }]
+            args: [{ selector: 'rs-box-item', template: "<ng-container *ngFor=\"let item of config.list; index as index\">\n  <div [ngStyle]=\"calcStyle(item)\"\n       dDroppable\n       [dropScope]=\"item.type === 'plugin' && boxContainer.editMode ? ['plugin-item', 'page', 'form'] : ''\"\n       dragOverClass=\"active\"\n       (dropEvent)=\"dropEvent($event, index)\"\n  >\n    <ng-template rsBoxItemHost [hostId]=\"index\"></ng-template>\n  </div>\n</ng-container>\n", styles: [":host{flex:1;display:flex;flex-flow:row nowrap;pointer-events:all}:host div{display:flex;flex-flow:row nowrap}:host div.active{background-color:var(--devui-waiting, #beccfa)}\n"] }]
         }], propDecorators: { _direction: [{
                 type: HostBinding,
                 args: ['style.flex-direction']
@@ -660,6 +663,9 @@ class BoxContainerComponent {
         const instance = boxItemComponentRef.instance;
         instance.boxContainer = this;
         instance.config = this.config;
+        if (this.editMode) {
+            boxItemComponentRef.location.nativeElement.style.margin = '8px';
+        }
         instance.leaveOneItem?.subscribe((item) => {
             if (item.type === 'item') {
                 Object.assign(instance.config, item);
@@ -1641,6 +1647,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+class IconSelectorComponent {
+    constructor() {
+        this.select = new EventEmitter();
+        this.iconList = [];
+        const regex = /::before/;
+        const styles = document.styleSheets;
+        for (let i = 0; i < styles.length; i++) {
+            for (let j = 0; j < styles[i].cssRules.length; j++) {
+                let cssSelectorText = styles[i].cssRules[j].selectorText;
+                if (cssSelectorText && cssSelectorText.indexOf('.coast-icon-') === 0 && regex.test(cssSelectorText)) {
+                    this.iconList.push(cssSelectorText.substring(1, cssSelectorText.length - 8));
+                }
+            }
+        }
+    }
+    selectIcon(icon) {
+        this.select.emit(icon);
+        this.popover.instance.hide();
+    }
+    zoomOut($event, icon) {
+        this.hoverIcon = icon;
+        this.iconZoomOut.instance.show($event.target);
+    }
+}
+IconSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: IconSelectorComponent, selector: "rs-icon-selector", inputs: { target: "target" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["iconSelector"], descendants: true, static: true }, { propertyName: "iconZoomOut", first: true, predicate: ["iconZoomOut"], descendants: true, static: true }], ngImport: i0, template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <ng-container *ngFor=\"let icon of iconList; let index=index\">\n            <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                       (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n        </ng-container>\n    </div>\n</dx-popover>\n<dx-popover #iconZoomOut width=\"64px\" height=\"64px\" [enableBodyScroll]=\"false\">\n    <div *dxTemplate=\"let data of 'content'\" style=\"display: flex; align-items: center; justify-content: center;\">\n        <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    </div>\n</dx-popover>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i3$3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i4$3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-icon-selector', template: "<dx-popover #iconSelector\n            maxWidth=\"280\"\n            maxHeight=\"280\"\n            [target]=\"target\"\n            [showEvent]=\"{name: 'click'}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <ng-container *ngFor=\"let icon of iconList; let index=index\">\n            <dx-button [icon]=\"'coast-icon ' + icon\" (onClick)=\"selectIcon(icon)\"\n                       (mouseenter)=\"zoomOut($event, icon)\" (mouseleave)=\"iconZoomOut.instance.hide()\"></dx-button>\n        </ng-container>\n    </div>\n</dx-popover>\n<dx-popover #iconZoomOut width=\"64px\" height=\"64px\" [enableBodyScroll]=\"false\">\n    <div *dxTemplate=\"let data of 'content'\" style=\"display: flex; align-items: center; justify-content: center;\">\n        <i [class]=\"hoverIcon\" style=\"font-size: 36px;\"></i>\n    </div>\n</dx-popover>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { target: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], popover: [{
+                type: ViewChild,
+                args: ['iconSelector', { static: true }]
+            }], iconZoomOut: [{
+                type: ViewChild,
+                args: ['iconZoomOut', { static: true }]
+            }] } });
+
+class IconSelectorModule {
+}
+IconSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IconSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorModule, declarations: [IconSelectorComponent], imports: [CommonModule,
+        DevExtremeModule], exports: [IconSelectorComponent] });
+IconSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorModule, imports: [CommonModule,
+        DevExtremeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: IconSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        IconSelectorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DevExtremeModule
+                    ],
+                    exports: [
+                        IconSelectorComponent
+                    ]
+                }]
+        }] });
+
 class ModalComponent {
     constructor(elementRef, changeDetectorRef) {
         this.elementRef = elementRef;
@@ -1697,10 +1767,9 @@ class ModalComponent {
         }
     }
     resolveModalBackdropPosition() {
-        console.log(this.elementRef.nativeElement.parentElement);
         return {
             "width": this.elementRef.nativeElement.parentElement.offsetWidth + 'px',
-            "height": this.elementRef.nativeElement.parentElement.offsetHeight + 'px',
+            "height": this.elementRef.nativeElement.parentElement.offsetHeight - 1 + 'px',
             "top": this.elementRef.nativeElement.parentElement.offsetTop + 'px',
             "left": this.elementRef.nativeElement.parentElement.offsetLeft + 'px',
         };
@@ -1853,5 +1922,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridModule, DataGridService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective };
+export { BoxContainerComponent, BoxContainerModule, DataGridComponent, DataGridModule, DataGridService, DynamicParamsComponent, DynamicParamsModule, FormComponent, FormModule, FormService, IconSelectorComponent, IconSelectorModule, ItemConfigComponent, ItemStyleComponent, MasterDetailTemplateDirective, ModalComponent, ModalModule, ModalService, PluginManager, RowButtonsTemplateDirective };
 //# sourceMappingURL=ngx-rs-ant.mjs.map