@ng-nest/ui 13.0.9 → 13.1.2

package/fesm2015/ng-nest-ui-dialog.mjs

@@ -3,26 +3,27 @@ import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulati
 import * as i2$1 from '@ng-nest/ui/core';
 import { XInputBoolean, XWithConfig, XIsChange, XIsFunction, XMoveBoxAnimation, fillDefault } from '@ng-nest/ui/core';
 import { __decorate } from 'tslib';
-import * as i3 from '@ng-nest/ui/alert';
+import * as i4 from '@ng-nest/ui/alert';
 import { XAlertProperty, XAlertModule } from '@ng-nest/ui/alert';
+import * as i1 from '@ng-nest/ui/portal';
+import { PortalResizablePrefix, XPortalModule } from '@ng-nest/ui/portal';
 import { Subject, filter, take } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
-import * as i1 from '@ng-nest/ui/portal';
-import { XPortalModule } from '@ng-nest/ui/portal';
-import * as i2 from '@ng-nest/ui/i18n';
-import * as i4 from '@ng-nest/ui/button';
+import * as i2 from '@angular/cdk/overlay';
+import * as i3 from '@ng-nest/ui/i18n';
+import * as i5 from '@ng-nest/ui/button';
 import { XButtonModule } from '@ng-nest/ui/button';
-import * as i5 from '@ng-nest/ui/outlet';
+import * as i6 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i6 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { XIconModule } from '@ng-nest/ui/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { XInputModule } from '@ng-nest/ui/input';
+import { XResizableModule } from '@ng-nest/ui/resizable';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i3$1 from '@angular/cdk/overlay';
 
 /**
  * Dialog
@@ -72,8 +73,8 @@ class XDialogProperty extends XAlertProperty {
         this.closeDone = new EventEmitter();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputBoolean()
 ], XDialogProperty.prototype, "visible", void 0);
@@ -86,6 +87,12 @@ __decorate([
 __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, '32rem')
 ], XDialogProperty.prototype, "width", void 0);
+__decorate([
+    XWithConfig(X_DIALOG_CONFIG_NAME, '18rem')
+], XDialogProperty.prototype, "minWidth", void 0);
+__decorate([
+    XWithConfig(X_DIALOG_CONFIG_NAME, '9rem')
+], XDialogProperty.prototype, "minHeight", void 0);
 __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
 ], XDialogProperty.prototype, "effect", void 0);
@@ -118,7 +125,15 @@ __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, false),
     XInputBoolean()
 ], XDialogProperty.prototype, "draggable", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogProperty, decorators: [{
+__decorate([
+    XWithConfig(X_DIALOG_CONFIG_NAME, false),
+    XInputBoolean()
+], XDialogProperty.prototype, "resizable", void 0);
+__decorate([
+    XWithConfig(X_DIALOG_CONFIG_NAME, false),
+    XInputBoolean()
+], XDialogProperty.prototype, "maximize", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { visible: [{
@@ -133,6 +148,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], height: [{
                 type: Input
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
             }], effect: [{
                 type: Input
             }], footer: [{
@@ -155,6 +174,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], draggable: [{
                 type: Input
+            }], resizable: [{
+                type: Input
+            }], maximize: [{
+                type: Input
             }], beforeClose: [{
                 type: Input
             }], cancel: [{
@@ -170,15 +193,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }] } });
 
 class XDialogComponent extends XDialogProperty {
-    constructor(renderer, elementRef, cdr, viewContainerRef, protalService, i18n) {
+    constructor(renderer, elementRef, cdr, viewContainerRef, protalService, overlay, i18n) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.viewContainerRef = viewContainerRef;
         this.protalService = protalService;
+        this.overlay = overlay;
         this.i18n = i18n;
         this.locale = {};
+        this.initHeight = 0;
+        this.initContentHeight = 0;
+        this.isMaximize = false;
+        this.isDefaultMaximize = false;
+        this.dialogBox = {};
+        this.contentBox = {};
+        this.distance = { x: 0, y: 0 };
+        this.viewInit = false;
         this._unSubject = new Subject();
         this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
     }
@@ -195,6 +227,8 @@ class XDialogComponent extends XDialogProperty {
             this.locale = x;
             this.cdr.markForCheck();
         });
+        this.dialogBox['draggable'] = this.draggable;
+        this.dialogBox['resizable'] = this.resizable;
     }
     ngOnChanges(changes) {
         const { visible } = changes;
@@ -205,11 +239,17 @@ class XDialogComponent extends XDialogProperty {
         this._unSubject.next();
         this._unSubject.unsubscribe();
     }
+    ngAfterViewInit() {
+        this.viewInit = true;
+        setTimeout(() => this.visible && this.create());
+    }
     unsubscribe() {
         var _a;
         (_a = this.backdropClick$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     setVisible() {
+        if (!this.viewInit)
+            return;
         if (this.visible) {
             this.create();
         }
@@ -226,21 +266,56 @@ class XDialogComponent extends XDialogProperty {
             overlayConfig: {
                 panelClass: [XDialogContainer, this.className],
                 hasBackdrop: Boolean(this.hasBackdrop),
-                positionStrategy: this.protalService.setPlace(this.placement, this.width, this.height, this.offset)
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+                width: this.width,
+                height: this.height,
+                minWidth: this.minWidth,
+                minHeight: this.minHeight,
+                positionStrategy: this.protalService.setPlace(this.placement, this.offset)
             }
         });
-        // this.scrollStrategy.enable();
+        const { hostElement, overlayElement } = this.dialogRef.overlayRef;
+        this.overlayElement = overlayElement;
+        this.setWidthHeight();
+        Object.assign(this.dialogBox, {
+            width: this.width,
+            height: this.height,
+            minWidth: this.minWidth,
+            minHeight: this.minHeight
+        });
+        if (this.resizable && !this.isDefaultMaximize) {
+            this.renderer.addClass(hostElement, PortalResizablePrefix);
+            setTimeout(() => {
+                var _a, _b;
+                Object.assign(this.dialogBox, this.protalService.setResizable(this.overlayElement, this.placement));
+                this.offsetLeft = this.overlayElement.offsetLeft;
+                this.offsetTop = this.overlayElement.offsetTop;
+                const dialogDraggable = (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.querySelector('.x-alert-draggable');
+                this.initHeight = dialogDraggable.clientHeight;
+                this.dialogContent = (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.querySelector('.x-dialog-content');
+                this.initContentHeight = this.dialogContent.clientHeight;
+            });
+        }
         if (this.hasBackdrop && this.backdropClose && ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef)) {
             this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose());
         }
     }
+    setWidthHeight() {
+        const ws = ['100%', '100vw'];
+        const hs = ['100%', '100vh'];
+        if (ws.includes(this.width) && hs.includes(this.height)) {
+            this.isDefaultMaximize = true;
+            this.resizable = false;
+            this.draggable = false;
+            this.maximize = false;
+        }
+    }
     detach() {
         var _a, _b;
         if (this.portalAttached()) {
             this.visible = false;
             this.visibleChange.emit(this.visible);
             (_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
-            // this.scrollStrategy.disable();
             this.unsubscribe();
             this.close.emit();
         }
@@ -257,6 +332,69 @@ class XDialogComponent extends XDialogProperty {
             this.detach();
         }
     }
+    onDragEnded($event) {
+        this.distance = { x: this.distance.x + $event.distance.x, y: this.distance.y + $event.distance.y };
+    }
+    onSize() {
+        if (!this.dialogRef)
+            return;
+        this.isMaximize = !this.isMaximize;
+        if (this.isMaximize) {
+            this.onMaximize();
+        }
+        else {
+            this.onMinimize();
+        }
+    }
+    onMaximize() {
+        var _a;
+        (_a = this.dialogRef.overlayRef) === null || _a === void 0 ? void 0 : _a.updateSize({
+            width: '100%',
+            height: '100%',
+            minWidth: '100%',
+            minHeight: '100%'
+        });
+        this.dialogBox['minWidth'] = '100%';
+        this.dialogBox['minHeight'] = '100%';
+        this.dialogBox['draggable'] = false;
+        this.dialogBox['resizable'] = false;
+        if (this.resizable) {
+            this.renderer.setStyle(this.overlayElement, 'margin', '0 0 0 0');
+        }
+        if (this.draggable) {
+            this.dialogBox['distance'] = { x: 0, y: 0 };
+        }
+    }
+    onMinimize() {
+        var _a;
+        this.dialogBox['minWidth'] = this.minWidth;
+        this.dialogBox['minHeight'] = this.minHeight;
+        this.dialogBox['draggable'] = this.draggable;
+        this.dialogBox['resizable'] = this.resizable;
+        (_a = this.dialogRef.overlayRef) === null || _a === void 0 ? void 0 : _a.updateSize({
+            width: this.dialogBox['width'],
+            height: this.dialogBox['height'],
+            minWidth: this.dialogBox['minWidth'],
+            minHeight: this.dialogBox['minHeight']
+        });
+        if (this.draggable) {
+            this.dialogBox['distance'] = Object.assign({}, this.distance);
+        }
+        if (this.resizable) {
+            if (this.dialogBox['marginTop']) {
+                this.renderer.setStyle(this.overlayElement, 'margin-top', `${this.dialogBox['marginTop']}`);
+            }
+            if (this.dialogBox['marginLeft']) {
+                this.renderer.setStyle(this.overlayElement, 'margin-left', `${this.dialogBox['marginLeft']}`);
+            }
+            if (this.dialogBox['marginRight']) {
+                this.renderer.setStyle(this.overlayElement, 'margin-right', `${this.dialogBox['marginRight']}`);
+            }
+            if (this.dialogBox['marginBottom']) {
+                this.renderer.setStyle(this.overlayElement, 'margin-bottom', `${this.dialogBox['marginBottom']}`);
+            }
+        }
+    }
     onCancel() {
         this.onClose();
         this.cancel.emit();
@@ -269,19 +407,31 @@ class XDialogComponent extends XDialogProperty {
         var _a, _b;
         if ($event.toState === 'void') {
             this.closeDone.emit($event);
+            this.isMaximize = false;
+            this.dialogBox = {
+                draggable: this.draggable,
+                resizable: this.resizable
+            };
+            this.distance = { x: 0, y: 0 };
             (_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
         }
         else {
             this.showDone.emit($event);
         }
     }
+    onResizing(event) {
+        const contentHeight = Number(this.initContentHeight) + Number(event.clientHeight) - Number(this.initHeight);
+        this.renderer.setStyle(this.dialogContent, 'max-height', 'initial');
+        this.renderer.setStyle(this.dialogContent, 'flex', 'initial');
+        this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
+    }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.XPortalService }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div class=\"x-dialog\" [@x-move-box-animation]=\"placement\" (@x-move-box-animation.done)=\"moveDone($event)\">\r\n    <x-alert\r\n      [draggable]=\"draggable\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      (close)=\"onClose()\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog x-alert{height:100%}.x-dialog x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex:1}.x-dialog-container x-dialog{width:100%}\n"], components: [{ type: i3.XAlertComponent, selector: "x-alert" }, { type: i4.XButtonsComponent, selector: "x-buttons" }, { type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.XPortalService }, { token: i2.Overlay }, { token: i3.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose()\"\r\n      (dragEnded)=\"onDragEnded($event)\"\r\n      (resizing)=\"onResizing($event)\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"], components: [{ type: i4.XAlertComponent, selector: "x-alert" }, { type: i5.XButtonsComponent, selector: "x-buttons" }, { type: i5.XButtonComponent, selector: "x-button" }], directives: [{ type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n  <div class=\"x-dialog\" [@x-move-box-animation]=\"placement\" (@x-move-box-animation.done)=\"moveDone($event)\">\r\n    <x-alert\r\n      [draggable]=\"draggable\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      (close)=\"onClose()\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog x-alert{height:100%}.x-dialog x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex:1}.x-dialog-container x-dialog{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1.XPortalService }, { type: i2.XI18nService }]; }, propDecorators: { dialogTpl: [{
+            args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose()\"\r\n      (dragEnded)=\"onDragEnded($event)\"\r\n      (resizing)=\"onResizing($event)\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1.XPortalService }, { type: i2.Overlay }, { type: i3.XI18nService }]; }, propDecorators: { dialogTpl: [{
                 type: ViewChild,
                 args: ['dialogTpl', { static: false }]
             }] } });
@@ -311,9 +461,9 @@ class XDialogPortalComponent extends BasePortalOutlet {
         return this.portalOutlet.attachTemplatePortal(portal);
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "class.x-dialog-portal": "this._has", "@x-move-box-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogPortalComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "class.x-dialog-portal": "this._has", "@x-move-box-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-dialog-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
@@ -357,9 +507,9 @@ class XDialogCloseDirective {
         this.dialogRef && this.dialogRef.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogCloseDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDialogCloseDirective, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogCloseDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogCloseDirective, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-close]`
@@ -377,9 +527,9 @@ class XDialogTitleDirective {
         this._has = true;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDialogTitleDirective, selector: "[x-dialog-title]", host: { properties: { "class.x-dialog-portal-title": "this._has" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogTitleDirective, selector: "[x-dialog-title]", host: { properties: { "class.x-dialog-portal-title": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-title]`
@@ -393,9 +543,9 @@ class XDialogContentDirective {
         this._has = true;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDialogContentDirective, selector: "[x-dialog-content], x-dialog-content", host: { properties: { "class.x-dialog-portal-content": "this._has" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogContentDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogContentDirective, selector: "[x-dialog-content], x-dialog-content", host: { properties: { "class.x-dialog-portal-content": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-content], x-dialog-content`
@@ -409,9 +559,9 @@ class XDialogActionsDirective {
         this._has = true;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDialogActionsDirective, selector: "[x-dialog-actions], x-dialog-actions", host: { properties: { "class.x-dialog-portal-actions": "this._has" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogActionsDirective, selector: "[x-dialog-actions], x-dialog-actions", host: { properties: { "class.x-dialog-portal-actions": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-actions], x-dialog-actions`
@@ -422,18 +572,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }] } });
 
 class XDialogService {
-    constructor(portalService, configService, overlay) {
+    constructor(portalService, configService, overlay, rendererFactory) {
         this.portalService = portalService;
         this.configService = configService;
         this.overlay = overlay;
+        this.rendererFactory = rendererFactory;
         this.default = {
             placement: 'center',
             offset: '1rem',
             width: '32rem',
             backdropClose: true,
-            hasBackdrop: true,
-            draggable: false
+            hasBackdrop: true
+            // draggable: false,
+            // resizable: false
         };
+        this.renderer = this.rendererFactory.createRenderer(null, null);
         this.configDefault = this.configService.getConfigForComponent(X_DIALOG_CONFIG_NAME);
         Object.assign(this.default, this.configDefault);
     }
@@ -445,10 +598,15 @@ class XDialogService {
             overlayConfig: {
                 hasBackdrop: option.hasBackdrop,
                 panelClass: option.className,
-                scrollStrategy: this.overlay.scrollStrategies.reposition(),
-                positionStrategy: this.portalService.setPlace(option.placement, option.width, option.height, option.offset)
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+                width: option.width,
+                height: option.height,
+                positionStrategy: this.portalService.setPlace(option.placement, option.offset)
             }
         });
+        // if (option.resizable) {
+        //   this.renderer.addClass(portal.overlayRef?.hostElement, PortalResizablePrefix);
+        // }
         const { overlayRef, componentRef } = portal || {};
         const { instance } = componentRef || {};
         instance.placement = option.placement;
@@ -472,16 +630,16 @@ class XDialogService {
         return dialogRef;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i2$1.XConfigService }, { token: i3$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ XDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogService, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i2$1.XConfigService }, { token: i2.Overlay }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ XDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.XPortalService }, { type: i2$1.XConfigService }, { type: i3$1.Overlay }]; } });
+        }], ctorParameters: function () { return [{ type: i1.XPortalService }, { type: i2$1.XConfigService }, { type: i2.Overlay }, { type: i0.RendererFactory2 }]; } });
 
 class XDialogModule {
 }
-/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogModule, declarations: [XDialogComponent,
+/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogModule, declarations: [XDialogComponent,
         XDialogCloseDirective,
         XDialogTitleDirective,
         XDialogContentDirective,
@@ -496,13 +654,14 @@ class XDialogModule {
         XIconModule,
         XPortalModule,
         XAlertModule,
-        XOutletModule], exports: [XDialogComponent,
+        XOutletModule,
+        XResizableModule], exports: [XDialogComponent,
         XDialogCloseDirective,
         XDialogTitleDirective,
         XDialogContentDirective,
         XDialogActionsDirective,
         XDialogPortalComponent] });
-/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogModule, providers: [XDialogService], imports: [[
+/** @nocollapse */ /** @nocollapse */ XDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogModule, providers: [XDialogService], imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -512,9 +671,10 @@ class XDialogModule {
             XIconModule,
             XPortalModule,
             XAlertModule,
-            XOutletModule
+            XOutletModule,
+            XResizableModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -544,7 +704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         XIconModule,
                         XPortalModule,
                         XAlertModule,
-                        XOutletModule
+                        XOutletModule,
+                        XResizableModule
                     ],
                     providers: [XDialogService]
                 }]