ngx-rs-ant 0.6.6 → 0.6.10

package/fesm2020/ngx-rs-ant.mjs

@@ -1075,8 +1075,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }] });
 
 class ModalComponent {
-    constructor(elementRef) {
+    constructor(elementRef, changeDetectorRef) {
         this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.size = 'default';
         this._width = 480;
         this.movable = false;
@@ -1097,12 +1098,17 @@ class ModalComponent {
                 this._width = 960;
             }
             this.modalElementRef.nativeElement.style.width = this._width + 'px';
-            this.modalElementRef.nativeElement.style.top = '40px';
+            this.modalElementRef.nativeElement.style.top = '24px';
             this.modalElementRef.nativeElement.style.left =
                 (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
             this.moveHandleEl = this.elementRef.nativeElement.querySelector('.modal-header');
             this.moveHandleEl.style.cursor = 'move';
         }
+        setTimeout(() => {
+            if (this.modalElementRef.nativeElement.offsetHeight > this.elementRef.nativeElement.parentElement.offsetHeight - 48) {
+                this.modalElementRef.nativeElement.style.height = this.elementRef.nativeElement.parentElement.offsetHeight - 48 + 'px';
+            }
+        });
     }
     show() {
         // 若存在多层模态框，仅保留最上层遮罩颜色，下层遮罩设置为透明
@@ -1138,6 +1144,12 @@ class ModalComponent {
             "left": this.elementRef.nativeElement.parentElement.offsetLeft + 'px',
         };
     }
+    resolveModalPosition() {
+        return {
+            "top": '24px',
+            "left": (this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px',
+        };
+    }
     onMousedown($event) {
         if ($event.button === 2 || !this.checkHandleTarget($event.target, this.moveHandleEl)) {
             return;
@@ -1183,13 +1195,16 @@ class ModalComponent {
         element.style.top = currentTop + 'px';
         element.style.left = currentLeft + 'px';
     }
+    onWindowResize() {
+        this.changeDetectorRef.detectChanges();
+    }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;padding:24px;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+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", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext", footerTemplate: "footerTemplate", footerTemplateContext: "footerTemplateContext" }, 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()\">\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;padding:24px;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}:host .modal-backdrop .modal .modal-footer{flex:none}\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()\">\n  <div #modal class=\"modal\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;padding:24px;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
+            args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n  <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\n    <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n      <div class=\"modal-title\">{{title}}</div>\n      <i class=\"icon-close\" (click)=\"hide()\"></i>\n    </div>\n    <div class=\"modal-content\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n    </div>\n    <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"\n                   [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;top:0;left:0;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;padding:24px;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}:host .modal-backdrop .modal .modal-footer{flex:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -1200,12 +1215,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], contentTemplateContext: [{
                 type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], footerTemplateContext: [{
+                type: Input
             }], onMouseup: [{
                 type: HostListener,
                 args: ['document:mouseup', ['$event']]
             }], onMousemove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class ModalModule {
@@ -1231,15 +1253,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class ModalService {
     constructor() {
     }
-    open(viewContainerRef, title, size = 'default', contentTemplate, contentTemplateContext) {
+    open(viewContainerRef, title, size = 'default', contentTemplate, contentTemplateContext, footerTemplate, footerTemplateContext) {
         const modalRef = viewContainerRef.createComponent(ModalComponent);
         modalRef.instance.hide = () => {
             modalRef.hostView.destroy();
         };
         modalRef.instance.title = title;
-        modalRef.instance.contentTemplate = contentTemplate;
         modalRef.instance.size = size;
+        modalRef.instance.contentTemplate = contentTemplate;
         modalRef.instance.contentTemplateContext = contentTemplateContext;
+        modalRef.instance.footerTemplate = footerTemplate;
+        modalRef.instance.footerTemplateContext = footerTemplateContext;
         modalRef.instance.show();
         return modalRef.instance;
     }