@ng-nest/ui 18.0.13 → 19.0.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, model, output, Component, inject, Renderer2, ViewContainerRef, viewChild, signal, computed, DestroyRef, effect, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, contentChildren, EventEmitter, HostListener, Directive, ElementRef, NgModule, RendererFactory2, TemplateRef, Injectable } from '@angular/core';
+import { InjectionToken, input, model, output, Component, inject, ViewContainerRef, viewChild, signal, computed, DestroyRef, effect, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Renderer2, ChangeDetectorRef, contentChildren, EventEmitter, HostListener, Directive, NgModule, RendererFactory2, TemplateRef, Injectable } from '@angular/core';
 import { XPropertyFunction, XToCssPixelValue, XToBoolean, XToNumber, XProperty, XConfigService, XIsFunction, XMoveBoxAnimation, XOpacityAnimation, XFillDefault } from '@ng-nest/ui/core';
 import { XPortalService, XPortalResizablePrefix } from '@ng-nest/ui/portal';
 import { Subject, filter, take } from 'rxjs';
@@ -15,7 +15,6 @@ import * as i2 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
-import { XResizableDirective } from '@ng-nest/ui/resizable';
 
 /**
  * Dialog
@@ -68,18 +67,21 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          */
         this.closeText = input();
         /**
-         * @zh_CN 调整弹框的大小
-         * @en_US Adjust the size of the box
+         * @zh_CN 调整弹框的大小(弃用)
+         * @en_US Adjust the size of the box, Abandoned
+         * @deprecated abandoned
          */
         this.resizable = input(this.config?.resizable ?? false, { transform: XToBoolean });
         /**
-         * @zh_CN 开启 resizable 调整大小，偏移屏幕左边
-         * @en_US Open the resizable resize, offset screen left
+         * @zh_CN 开启 resizable 调整大小，偏移屏幕左边(弃用)
+         * @en_US Open the resizable resize, offset screen left, Abandoned
+         * @deprecated abandoned
          */
         this.offsetLeft = input(0, { transform: XToNumber });
         /**
-         * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部
-         * @en_US Open the resizable resize, offset screen top
+         * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部(弃用)
+         * @en_US Open the resizable resize, offset screen top, Abandoned
+         * @deprecated abandoned
          */
         this.offsetTop = input(0, { transform: XToNumber });
         /**
@@ -195,10 +197,10 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          */
         this.closeDone = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: XDialogProperty, selector: "x-dialog-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, offsetLeft: { classPropertyName: "offsetLeft", publicName: "offsetLeft", isSignal: true, isRequired: false, transformFunction: null }, offsetTop: { classPropertyName: "offsetTop", publicName: "offsetTop", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, showConfirm: { classPropertyName: "showConfirm", publicName: "showConfirm", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, buttonsCenter: { classPropertyName: "buttonsCenter", publicName: "buttonsCenter", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, maximize: { classPropertyName: "maximize", publicName: "maximize", isSignal: true, isRequired: false, transformFunction: null }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", cancel: "cancel", confirm: "confirm", close: "close", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XDialogProperty, isStandalone: true, selector: "x-dialog-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, offsetLeft: { classPropertyName: "offsetLeft", publicName: "offsetLeft", isSignal: true, isRequired: false, transformFunction: null }, offsetTop: { classPropertyName: "offsetTop", publicName: "offsetTop", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, showConfirm: { classPropertyName: "showConfirm", publicName: "showConfirm", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, buttonsCenter: { classPropertyName: "buttonsCenter", publicName: "buttonsCenter", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, maximize: { classPropertyName: "maximize", publicName: "maximize", isSignal: true, isRequired: false, transformFunction: null }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", cancel: "cancel", confirm: "confirm", close: "close", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogPrefix}-property`, template: '' }]
         }] });
@@ -213,10 +215,10 @@ const X_DIALOG_CONTAINER = new InjectionToken('X_DIALOG_CONTAINER');
  * Dialog Container Property
  */
 class XDialogContainerProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: XDialogContainerProperty, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: XDialogContainerProperty, isStandalone: true, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogContainerPrefix}-property`, template: '' }]
         }] });
@@ -227,7 +229,6 @@ class XDialogComponent extends XDialogProperty {
     }
     constructor() {
         super();
-        this.renderer = inject(Renderer2);
         this.viewContainerRef = inject(ViewContainerRef);
         this.protalService = inject(XPortalService);
         this.overlay = inject(Overlay);
@@ -242,12 +243,10 @@ class XDialogComponent extends XDialogProperty {
         this.isMaximize = signal(false);
         this.isDefaultMaximize = signal(false);
         this.dialogBox = {};
-        this.contentBox = {};
         this.distance = { x: 0, y: 0 };
         this.viewInit = signal(false);
         this.action = null;
         this.containerInit = false;
-        this.resizableSignal = signal(false);
         this.draggableSignal = signal(false);
         this.maximizeSignal = signal(false);
         this.getCancelText = computed(() => {
@@ -280,11 +279,9 @@ class XDialogComponent extends XDialogProperty {
         });
         effect(() => {
             this.draggableSignal.set(this.draggable());
-            this.resizableSignal.set(this.resizable());
             this.maximizeSignal.set(this.maximize());
             this.dialogBox['draggable'] = this.draggableSignal();
-            this.dialogBox['resizable'] = this.resizableSignal();
-        }, { allowSignalWrites: true });
+        });
     }
     ngOnInit() {
         this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
@@ -327,7 +324,7 @@ class XDialogComponent extends XDialogProperty {
                 positionStrategy: this.protalService.setPlace(this.placement(), this.offset())
             }
         });
-        const { hostElement, overlayElement } = this.dialogRef.overlayRef;
+        const { overlayElement } = this.dialogRef.overlayRef;
         this.overlayElement.set(overlayElement);
         this.setWidthHeight();
         Object.assign(this.dialogBox, {
@@ -336,18 +333,6 @@ class XDialogComponent extends XDialogProperty {
             minWidth: this.minWidth(),
             minHeight: this.minHeight()
         });
-        if (this.resizableSignal() && !this.isDefaultMaximize()) {
-            this.renderer.addClass(hostElement, XPortalResizablePrefix);
-            setTimeout(() => {
-                Object.assign(this.dialogBox, this.protalService.setResizable(this.overlayElement(), this.placement()));
-                this.styleOffsetLeft.set(this.overlayElement()?.offsetLeft);
-                this.styleOffsetTop.set(this.overlayElement()?.offsetTop);
-                const dialog = this.overlayElement()?.querySelector('.x-alert');
-                this.initHeight = dialog.clientHeight;
-                this.dialogContent = this.overlayElement()?.querySelector('.x-dialog-content');
-                this.initContentHeight = this.dialogContent.clientHeight;
-            });
-        }
         if (this.hasBackdrop() && this.backdropClose() && this.dialogRef?.overlayRef) {
             this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose('close'));
         }
@@ -357,7 +342,6 @@ class XDialogComponent extends XDialogProperty {
         const hs = ['100%', '100vh'];
         if (ws.includes(this.width()) && hs.includes(this.height())) {
             this.isDefaultMaximize.set(true);
-            this.resizableSignal.set(false);
             this.draggableSignal.set(false);
             this.maximizeSignal.set(false);
         }
@@ -416,9 +400,6 @@ class XDialogComponent extends XDialogProperty {
         this.dialogBox['minHeight'] = '100%';
         this.dialogBox['draggable'] = false;
         this.dialogBox['resizable'] = false;
-        if (this.resizableSignal()) {
-            this.renderer.setStyle(this.overlayElement(), 'margin', '0 0 0 0');
-        }
         if (this.draggableSignal()) {
             this.dialogBox['distance'] = { x: 0, y: 0 };
         }
@@ -427,7 +408,6 @@ class XDialogComponent extends XDialogProperty {
         this.dialogBox['minWidth'] = this.minWidth();
         this.dialogBox['minHeight'] = this.minHeight();
         this.dialogBox['draggable'] = this.draggableSignal();
-        this.dialogBox['resizable'] = this.resizableSignal();
         this.dialogRef.overlayRef?.updateSize({
             width: this.dialogBox['width'],
             height: this.dialogBox['height'],
@@ -437,28 +417,13 @@ class XDialogComponent extends XDialogProperty {
         if (this.draggableSignal()) {
             this.dialogBox['distance'] = { ...this.distance };
         }
-        if (this.resizableSignal()) {
-            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']}`);
-            }
-        }
     }
     moveDone($event) {
         if ($event.toState === 'void') {
             !this.destroy() && this.closeDone.emit($event);
             this.isMaximize.set(false);
             this.dialogBox = {
-                draggable: this.draggableSignal(),
-                resizable: this.resizableSignal()
+                draggable: this.draggableSignal()
             };
             this.distance = { x: 0, y: 0 };
             this.dialogRef?.overlayRef?.dispose();
@@ -467,20 +432,12 @@ class XDialogComponent extends XDialogProperty {
             !this.destroy() && 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');
-        if (['top-start', 'top-end', 'bottom', 'top', 'bottom-start', 'bottom-end'].includes(event.direction)) {
-            this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: XDialogComponent, isStandalone: true, selector: "x-dialog", host: { properties: { "class.x-dialog-visible": "this.getVisible", "class": "this.clsName" } }, viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  @if (container && hasBackdrop()) {\r\n    <div class=\"x-dialog-backdrop\" [@x-opacity-animation]=\"visible()\" (click)=\"onClose('close')\"></div>\r\n  }\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]=\"resizableSignal()\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize()\"\r\n    [ngStyle]=\"getStyle()\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggableSignal() && dialogBox['draggable']\"\r\n      [resizable]=\"resizableSignal() && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"styleOffsetLeft()\"\r\n      [offsetTop]=\"styleOffsetTop()\"\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('close')\"\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        @if (showCancel() || showConfirm()) {\r\n          <x-buttons space=\"0.5rem\">\r\n            @if (showCancel()) {\r\n              <x-button class=\"x-dialog-cancel\" (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button class=\"x-dialog-confirm\" type=\"primary\" flat (click)=\"onClose('confirm')\">{{\r\n                getConfirmText()\r\n              }}</x-button>\r\n            }\r\n          </x-buttons>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  @if (maximizeSignal() || resizableSignal()) {\r\n    <x-button\r\n      size=\"small\"\r\n      flat\r\n      [icon]=\"isMaximize() ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\r\n      class=\"x-dialog-maximize\"\r\n    ></x-button>\r\n  }\r\n</ng-template>\r\n\r\n@if (container && visible()) {\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n}\r\n", styles: [".x-dialog{margin:0;padding:0}.x-dialog{width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;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;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important;flex:initial}.x-dialog-default-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XAlertComponent, selector: "x-alert" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XMoveBoxAnimation, XOpacityAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XDialogComponent, isStandalone: true, selector: "x-dialog", host: { properties: { "class.x-dialog-visible": "this.getVisible", "class": "this.clsName" } }, viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  @if (container && hasBackdrop()) {\r\n    <div class=\"x-dialog-backdrop\" [@x-opacity-animation]=\"visible()\" (click)=\"onClose('close')\"></div>\r\n  }\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-default-maximize]=\"isDefaultMaximize()\"\r\n    [ngStyle]=\"getStyle()\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggableSignal() && dialogBox['draggable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\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('close')\"\r\n      (dragEnded)=\"onDragEnded($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        @if (showCancel() || showConfirm()) {\r\n          <x-buttons space=\"0.5rem\">\r\n            @if (showCancel()) {\r\n              <x-button class=\"x-dialog-cancel\" (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button class=\"x-dialog-confirm\" type=\"primary\" flat (click)=\"onClose('confirm')\">{{\r\n                getConfirmText()\r\n              }}</x-button>\r\n            }\r\n          </x-buttons>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  @if (maximizeSignal()) {\r\n    <x-button\r\n      size=\"small\"\r\n      flat\r\n      [icon]=\"isMaximize() ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\r\n      class=\"x-dialog-maximize\"\r\n    ></x-button>\r\n  }\r\n</ng-template>\r\n\r\n@if (container && visible()) {\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n}\r\n", styles: [".x-dialog{margin:0;padding:0}.x-dialog{width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;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;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important;flex:initial}.x-dialog-default-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XAlertComponent, selector: "x-alert" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XMoveBoxAnimation, XOpacityAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDialogPrefix}`, standalone: true, imports: [NgStyle, NgTemplateOutlet, XAlertComponent, XButtonComponent, XButtonsComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation, XOpacityAnimation], template: "<ng-template #dialogTpl>\r\n  @if (container && hasBackdrop()) {\r\n    <div class=\"x-dialog-backdrop\" [@x-opacity-animation]=\"visible()\" (click)=\"onClose('close')\"></div>\r\n  }\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]=\"resizableSignal()\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize()\"\r\n    [ngStyle]=\"getStyle()\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggableSignal() && dialogBox['draggable']\"\r\n      [resizable]=\"resizableSignal() && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"styleOffsetLeft()\"\r\n      [offsetTop]=\"styleOffsetTop()\"\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('close')\"\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        @if (showCancel() || showConfirm()) {\r\n          <x-buttons space=\"0.5rem\">\r\n            @if (showCancel()) {\r\n              <x-button class=\"x-dialog-cancel\" (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button class=\"x-dialog-confirm\" type=\"primary\" flat (click)=\"onClose('confirm')\">{{\r\n                getConfirmText()\r\n              }}</x-button>\r\n            }\r\n          </x-buttons>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  @if (maximizeSignal() || resizableSignal()) {\r\n    <x-button\r\n      size=\"small\"\r\n      flat\r\n      [icon]=\"isMaximize() ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\r\n      class=\"x-dialog-maximize\"\r\n    ></x-button>\r\n  }\r\n</ng-template>\r\n\r\n@if (container && visible()) {\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n}\r\n", styles: [".x-dialog{margin:0;padding:0}.x-dialog{width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;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;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important;flex:initial}.x-dialog-default-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}\n"] }]
+            args: [{ selector: `${XDialogPrefix}`, imports: [NgStyle, NgTemplateOutlet, XAlertComponent, XButtonComponent, XButtonsComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation, XOpacityAnimation], template: "<ng-template #dialogTpl>\r\n  @if (container && hasBackdrop()) {\r\n    <div class=\"x-dialog-backdrop\" [@x-opacity-animation]=\"visible()\" (click)=\"onClose('close')\"></div>\r\n  }\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-default-maximize]=\"isDefaultMaximize()\"\r\n    [ngStyle]=\"getStyle()\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggableSignal() && dialogBox['draggable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\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('close')\"\r\n      (dragEnded)=\"onDragEnded($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        @if (showCancel() || showConfirm()) {\r\n          <x-buttons space=\"0.5rem\">\r\n            @if (showCancel()) {\r\n              <x-button class=\"x-dialog-cancel\" (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button class=\"x-dialog-confirm\" type=\"primary\" flat (click)=\"onClose('confirm')\">{{\r\n                getConfirmText()\r\n              }}</x-button>\r\n            }\r\n          </x-buttons>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  @if (maximizeSignal()) {\r\n    <x-button\r\n      size=\"small\"\r\n      flat\r\n      [icon]=\"isMaximize() ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\r\n      class=\"x-dialog-maximize\"\r\n    ></x-button>\r\n  }\r\n</ng-template>\r\n\r\n@if (container && visible()) {\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n}\r\n", styles: [".x-dialog{margin:0;padding:0}.x-dialog{width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;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;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7.875rem)!important;height:calc(100vh - 7.875rem)!important;flex:initial}.x-dialog-default-maximize>x-alert .x-alert{left:0!important;top:0!important;border-radius:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { getVisible: [{
                 type: HostBinding,
                 args: ['class.x-dialog-visible']
@@ -494,17 +451,17 @@ class XDialogContainerComponent extends XDialogContainerProperty {
         super(...arguments);
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: XDialogContainerComponent, isStandalone: true, selector: "x-dialog-container", host: { properties: { "class.x-dialog-container": "this._has" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: XDialogContainerComponent, isStandalone: true, selector: "x-dialog-container", host: { properties: { "class.x-dialog-container": "this._has" } }, providers: [
             {
                 provide: X_DIALOG_CONTAINER,
                 useExisting: XDialogContainerComponent
             }
         ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-dialog-container{margin:0;padding:0}.x-dialog-container{position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-dialog-container x-dialog{display:flex;position:absolute;width:100%;height:100%;z-index:-1;transition:z-index .4s;top:0;left:0}.x-dialog-container .x-dialog{position:absolute;display:block;outline:0;z-index:1001;width:initial;height:initial}.x-dialog-container .x-dialog-top,.x-dialog-container .x-dialog-bottom{justify-content:center}.x-dialog-container .x-dialog-center{justify-content:center;align-items:center}.x-dialog-container .x-dialog-left,.x-dialog-container .x-dialog-right{align-items:center}.x-dialog-container .x-dialog-visible{display:flex;z-index:1000}.x-dialog-container .x-dialog-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;background:#00000052}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-dialog-container', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'x-dialog-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: X_DIALOG_CONTAINER,
                             useExisting: XDialogContainerComponent
@@ -518,7 +475,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 class XDialogPortalComponent extends BasePortalOutlet {
     constructor() {
         super(...arguments);
+        // @HostBinding('class.x-dialog-portal') _has = true;
+        this.placement = model.required();
         this.renderer = inject(Renderer2);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.portalOutlet = viewChild.required(CdkPortalOutlet);
         this.dragRef = viewChild.required(CdkDrag);
         this.handles = contentChildren(CdkDragHandle, { descendants: true });
@@ -533,6 +493,9 @@ class XDialogPortalComponent extends BasePortalOutlet {
         this.distance = { x: 0, y: 0 };
         this.dialogBox = {};
     }
+    get getPlacement() {
+        return this.placement();
+    }
     done({ toState, totalTime }) {
         this.animationChanged.next({
             action: 'done',
@@ -549,7 +512,6 @@ class XDialogPortalComponent extends BasePortalOutlet {
     }
     ngOnInit() {
         this.dialogBox['draggable'] = this.defaultMaximize ? this.dialogBox['draggable'] : this.option.draggable;
-        this.dialogBox['resizable'] = this.defaultMaximize ? this.dialogBox['resizable'] : this.option.resizable;
     }
     ngAfterViewInit() {
         if (this.dialogRef.dragHandleRefs.length === 0) {
@@ -557,9 +519,6 @@ class XDialogPortalComponent extends BasePortalOutlet {
             this.option.draggable = false;
             return;
         }
-        for (let item of this.dialogRef.dragHandleRefs) {
-            this.dragRef()._addHandle(new CdkDragHandle(item, this.dragRef()));
-        }
     }
     attachComponentPortal(portal) {
         if (this.portalOutlet().hasAttached()) {
@@ -573,27 +532,19 @@ class XDialogPortalComponent extends BasePortalOutlet {
         }
         return this.portalOutlet().attachTemplatePortal(portal);
     }
-    resizing(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');
-        if (['top-start', 'top-end', 'bottom', 'top', 'bottom-start', 'bottom-end'].includes(event.direction)) {
-            this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
-        }
-    }
     onDragEnded(event) {
         this.distance = {
             x: this.distance.x + event.distance.x,
             y: this.distance.y + event.distance.y
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: XDialogPortalComponent, isStandalone: true, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "@x-move-box-animation": "this.placement" } }, queries: [{ propertyName: "handles", predicate: CdkDragHandle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dragRef", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-dialog-portal\"\r\n  #dragRef\r\n  cdkDrag\r\n  [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n  [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n  [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n  [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n  (resizing)=\"resizing($event)\"\r\n  (cdkDragEnded)=\"onDragEnded($event)\"\r\n  [offsetLeft]=\"offsetLeft\"\r\n  [offsetTop]=\"offsetTop\"\r\n  [style.minWidth]=\"dialogBox['minWidth']\"\r\n  [style.minHeight]=\"dialogBox['minHeight']\"\r\n  [style.maxWidth]=\"dialogBox['maxWidth']\"\r\n  [style.maxHeight]=\"dialogBox['maxHeight']\"\r\n>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0}.x-dialog-portal{width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background-100);box-shadow:var(--x-box-shadow);border-radius:var(--x-border-small-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);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:0 -1rem -1rem;padding:0 1rem;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}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important;border-radius:0}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: XResizableDirective, selector: "[xResizable]" }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: XDialogPortalComponent, isStandalone: true, selector: "x-dialog-portal", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { placement: "placementChange" }, host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "@x-move-box-animation": "this.getPlacement" } }, queries: [{ propertyName: "handles", predicate: CdkDragHandle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dragRef", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-dialog-portal\"\r\n  #dragRef\r\n  cdkDrag\r\n  [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n  [cdkDragRootElement]=\"'.cdk-overlay-pane'\"\r\n  [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n  (cdkDragEnded)=\"onDragEnded($event)\"\r\n  [style.minWidth]=\"dialogBox['minWidth']\"\r\n  [style.minHeight]=\"dialogBox['minHeight']\"\r\n  [style.maxWidth]=\"dialogBox['maxWidth']\"\r\n  [style.maxHeight]=\"dialogBox['maxHeight']\"\r\n>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0}.x-dialog-portal{width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background-100);box-shadow:var(--x-box-shadow);border-radius:var(--x-border-small-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);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:0 -1rem -1rem;padding:0 1rem;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}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important;border-radius:0}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.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: "18.2.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-dialog-portal', standalone: true, imports: [DragDropModule, PortalModule, XResizableDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<div\r\n  class=\"x-dialog-portal\"\r\n  #dragRef\r\n  cdkDrag\r\n  [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n  [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n  [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n  [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n  (resizing)=\"resizing($event)\"\r\n  (cdkDragEnded)=\"onDragEnded($event)\"\r\n  [offsetLeft]=\"offsetLeft\"\r\n  [offsetTop]=\"offsetTop\"\r\n  [style.minWidth]=\"dialogBox['minWidth']\"\r\n  [style.minHeight]=\"dialogBox['minHeight']\"\r\n  [style.maxWidth]=\"dialogBox['maxWidth']\"\r\n  [style.maxHeight]=\"dialogBox['maxHeight']\"\r\n>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0}.x-dialog-portal{width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background-100);box-shadow:var(--x-box-shadow);border-radius:var(--x-border-small-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);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:0 -1rem -1rem;padding:0 1rem;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}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important;border-radius:0}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"] }]
-        }], propDecorators: { placement: [{
+            args: [{ selector: 'x-dialog-portal', imports: [DragDropModule, PortalModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<div\r\n  class=\"x-dialog-portal\"\r\n  #dragRef\r\n  cdkDrag\r\n  [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n  [cdkDragRootElement]=\"'.cdk-overlay-pane'\"\r\n  [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n  (cdkDragEnded)=\"onDragEnded($event)\"\r\n  [style.minWidth]=\"dialogBox['minWidth']\"\r\n  [style.minHeight]=\"dialogBox['minHeight']\"\r\n  [style.maxWidth]=\"dialogBox['maxWidth']\"\r\n  [style.maxHeight]=\"dialogBox['maxHeight']\"\r\n>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0}.x-dialog-portal{width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background-100);box-shadow:var(--x-box-shadow);border-radius:var(--x-border-small-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);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:0 -1rem -1rem;padding:0 1rem;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}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important;border-radius:0}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"] }]
+        }], propDecorators: { getPlacement: [{
                 type: HostBinding,
                 args: ['@x-move-box-animation']
             }], done: [{
@@ -620,10 +571,10 @@ class XDialogRef {
         this.containerInstance.animationChanged
             .pipe(filter((event) => event.state === 'void' && event.action === 'done'), take(1))
             .subscribe(() => {
-            this.overlayRef.detach();
+            this.overlayRef.dispose();
             this.afterClose.next(result);
         });
-        this.containerInstance.placement = 'void';
+        this.containerInstance.placement.set('void');
     }
     onFullscreen() {
         let { dialogBox, dialogRef, overlayElement, distance, hostElement, defaultMaximize } = this.containerInstance;
@@ -709,14 +660,13 @@ class XDialogCloseDirective {
     onCloseClick() {
         this.dialogRef && this.dialogRef.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-close]`,
-                    standalone: true
+                    selector: `[x-dialog-close]`
                 }]
         }], propDecorators: { onCloseClick: [{
                 type: HostListener,
@@ -726,14 +676,13 @@ class XDialogTitleDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogTitleDirective, isStandalone: true, selector: "[x-dialog-title], x-dialog-title", host: { properties: { "class.x-dialog-portal-title": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogTitleDirective, isStandalone: true, selector: "[x-dialog-title], x-dialog-title", host: { properties: { "class.x-dialog-portal-title": "this._has" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-title], x-dialog-title`,
-                    standalone: true
+                    selector: `[x-dialog-title], x-dialog-title`
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -743,14 +692,13 @@ class XDialogContentDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogContentDirective, isStandalone: true, selector: "[x-dialog-content], x-dialog-content", host: { properties: { "class.x-dialog-portal-content": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogContentDirective, isStandalone: true, 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: "18.2.2", ngImport: i0, type: XDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-content], x-dialog-content`,
-                    standalone: true
+                    selector: `[x-dialog-content], x-dialog-content`
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -760,14 +708,13 @@ class XDialogActionsDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogActionsDirective, isStandalone: true, selector: "[x-dialog-actions], x-dialog-actions", host: { properties: { "class.x-dialog-portal-actions": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogActionsDirective, isStandalone: true, 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: "18.2.2", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-actions], x-dialog-actions`,
-                    standalone: true
+                    selector: `[x-dialog-actions], x-dialog-actions`
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -776,22 +723,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 class XDialogDragHandleDirective {
     constructor() {
         this.dialogRef = inject((XDialogRef), { optional: true });
-        this.elementRef = inject(ElementRef);
     }
     get getDraggable() {
         return !this.dialogRef?.fullscreen && this.dialogRef?.option.draggable;
     }
-    ngOnInit() {
-        this.dialogRef?.dragHandleRefs.push(this.elementRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogDragHandleDirective, isStandalone: true, selector: "[x-dialog-drag-handle], x-dialog-drag-handle", host: { properties: { "class.x-dialog-portal-drag-handle": "this.getDraggable" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogDragHandleDirective, isStandalone: true, selector: "[x-dialog-drag-handle], x-dialog-drag-handle", host: { properties: { "class.x-dialog-portal-drag-handle": "this.getDraggable" } }, hostDirectives: [{ directive: i1.CdkDragHandle, inputs: ["cdkDragHandleDisabled", "xDialogDragHandleDisabled"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-drag-handle], x-dialog-drag-handle`,
-                    standalone: true
+                    hostDirectives: [
+                        {
+                            directive: CdkDragHandle,
+                            inputs: ['cdkDragHandleDisabled: xDialogDragHandleDisabled']
+                        }
+                    ]
                 }]
         }], propDecorators: { getDraggable: [{
                 type: HostBinding,
@@ -804,14 +752,13 @@ class XDialogFullscreenDirective {
     onFullscreenClick() {
         this.dialogRef && this.dialogRef.onFullscreen();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: XDialogFullscreenDirective, isStandalone: true, selector: "[x-dialog-fullscreen], x-dialog-fullscreen", host: { listeners: { "click": "onFullscreenClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: XDialogFullscreenDirective, isStandalone: true, selector: "[x-dialog-fullscreen], x-dialog-fullscreen", host: { listeners: { "click": "onFullscreenClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-fullscreen], x-dialog-fullscreen`,
-                    standalone: true
+                    selector: `[x-dialog-fullscreen], x-dialog-fullscreen`
                 }]
         }], propDecorators: { onFullscreenClick: [{
                 type: HostListener,
@@ -819,8 +766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }] } });
 
 class XDialogModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
             XDialogContainerComponent,
             XDialogCloseDirective,
             XDialogTitleDirective,
@@ -835,9 +782,9 @@ class XDialogModule {
             XDialogActionsDirective,
             XDialogDragHandleDirective,
             XDialogFullscreenDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -873,8 +820,7 @@ class XDialogService {
             minHeight: '8rem',
             backdropClose: true,
             hasBackdrop: true,
-            draggable: false,
-            resizable: false
+            draggable: false
         };
         this.portalService = inject(XPortalService);
         this.configService = inject(XConfigService);
@@ -905,8 +851,7 @@ class XDialogService {
         const { hostElement, overlayElement } = overlayRef || {};
         const dialogRef = new XDialogRef(overlayRef, instance, this.renderer, this.portalService);
         let dialogBox = {
-            draggable: option.draggable,
-            resizable: option.resizable
+            draggable: option.draggable
         };
         let defaultMaximize = this.setMaximize(option);
         Object.assign(dialogBox, {
@@ -915,7 +860,7 @@ class XDialogService {
             minWidth: option.minWidth,
             minHeight: option.minHeight
         });
-        instance.placement = option.placement;
+        componentRef?.setInput('placement', option.placement);
         instance.option = option;
         instance.dialogRef = dialogRef;
         instance.defaultMaximize = defaultMaximize;
@@ -924,19 +869,6 @@ class XDialogService {
         instance.overlayElement = overlayElement;
         dialogRef.option = option;
         dialogRef.fullscreen = defaultMaximize;
-        if (option.resizable && !defaultMaximize) {
-            this.renderer.addClass(hostElement, XPortalResizablePrefix);
-            setTimeout(() => {
-                Object.assign(dialogBox, this.portalService.setResizable(overlayElement, option.placement));
-                instance.offsetLeft = overlayElement.offsetLeft;
-                instance.offsetTop = overlayElement.offsetTop;
-                const dialogDraggable = overlayElement?.querySelector('.x-dialog-portal');
-                instance.initHeight = dialogDraggable.clientHeight;
-                instance.dialogContent = overlayElement?.querySelector('.x-dialog-portal-content');
-                instance.initContentHeight = instance.dialogContent?.clientHeight;
-                instance.dialogBox = dialogBox;
-            });
-        }
         if (defaultMaximize) {
             this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
         }
@@ -968,10 +900,10 @@ class XDialogService {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: XDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });