@ng-nest/ui 21.0.3 → 21.0.5

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

@@ -50,7 +50,7 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 偏移距离
          * @en_US Offset distance
          */
-        this.offset = input(this.config?.offset ?? '1rem', ...(ngDevMode ? [{ debugName: "offset", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        this.offset = input(this.config?.offset ?? '1rem', { ...(ngDevMode ? { debugName: "offset" } : {}), transform: XToCssPixelValue });
         /**
          * @zh_CN 类型
          * @en_US Types of
@@ -60,7 +60,7 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 隐藏关闭按钮
          * @en_US Hide close button
          */
-        this.hideClose = input(false, ...(ngDevMode ? [{ debugName: "hideClose", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 使用文本关闭按钮
          * @en_US Use the text to close button
@@ -71,39 +71,39 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @en_US Adjust the size of the box, Abandoned
          * @deprecated abandoned
          */
-        this.resizable = input(this.config?.resizable ?? false, ...(ngDevMode ? [{ debugName: "resizable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.resizable = input(this.config?.resizable ?? false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 开启 resizable 调整大小，偏移屏幕左边(弃用)
          * @en_US Open the resizable resize, offset screen left, Abandoned
          * @deprecated abandoned
          */
-        this.offsetLeft = input(0, ...(ngDevMode ? [{ debugName: "offsetLeft", transform: XToNumber }] : [{ transform: XToNumber }]));
+        this.offsetLeft = input(0, { ...(ngDevMode ? { debugName: "offsetLeft" } : {}), transform: XToNumber });
         /**
          * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部(弃用)
          * @en_US Open the resizable resize, offset screen top, Abandoned
          * @deprecated abandoned
          */
-        this.offsetTop = input(0, ...(ngDevMode ? [{ debugName: "offsetTop", transform: XToNumber }] : [{ transform: XToNumber }]));
+        this.offsetTop = input(0, { ...(ngDevMode ? { debugName: "offsetTop" } : {}), transform: XToNumber });
         /**
          * @zh_CN 宽度
          * @en_US Width
          */
-        this.width = input(this.config?.width ?? '32rem', ...(ngDevMode ? [{ debugName: "width", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        this.width = input(this.config?.width ?? '32rem', { ...(ngDevMode ? { debugName: "width" } : {}), transform: XToCssPixelValue });
         /**
          * @zh_CN 高度
          * @en_US Height
          */
-        this.height = input('', ...(ngDevMode ? [{ debugName: "height", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        this.height = input('', { ...(ngDevMode ? { debugName: "height" } : {}), transform: XToCssPixelValue });
         /**
          * @zh_CN 最小宽度
          * @en_US Min width
          */
-        this.minWidth = input(this.config?.minWidth ?? '18rem', ...(ngDevMode ? [{ debugName: "minWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        this.minWidth = input(this.config?.minWidth ?? '18rem', { ...(ngDevMode ? { debugName: "minWidth" } : {}), transform: XToCssPixelValue });
         /**
          * @zh_CN 最小高度
          * @en_US Min height
          */
-        this.minHeight = input(this.config?.minHeight ?? '8rem', ...(ngDevMode ? [{ debugName: "minHeight", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        this.minHeight = input(this.config?.minHeight ?? '8rem', { ...(ngDevMode ? { debugName: "minHeight" } : {}), transform: XToCssPixelValue });
         /**
          * @zh_CN 样式主题
          * @en_US Style theme
@@ -118,7 +118,7 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 显示取消按钮
          * @en_US Show cancel button
          */
-        this.showCancel = input(this.config?.showCancel ?? true, ...(ngDevMode ? [{ debugName: "showCancel", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.showCancel = input(this.config?.showCancel ?? true, { ...(ngDevMode ? { debugName: "showCancel" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 取消按钮文字
          * @en_US Cancel button text
@@ -129,7 +129,7 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 显示确认按钮
          * @en_US Show confirmation button
          */
-        this.showConfirm = input(this.config?.showConfirm ?? true, ...(ngDevMode ? [{ debugName: "showConfirm", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.showConfirm = input(this.config?.showConfirm ?? true, { ...(ngDevMode ? { debugName: "showConfirm" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 确认按钮文字
          * @en_US Confirm button text
@@ -140,17 +140,17 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 点击遮罩关闭
          * @en_US Click the mask to close
          */
-        this.backdropClose = input(this.config?.backdropClose ?? true, ...(ngDevMode ? [{ debugName: "backdropClose", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.backdropClose = input(this.config?.backdropClose ?? true, { ...(ngDevMode ? { debugName: "backdropClose" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 是否显示背景遮罩
          * @en_US Whether to display the background mask
          */
-        this.hasBackdrop = input(this.config?.hasBackdrop ?? true, ...(ngDevMode ? [{ debugName: "hasBackdrop", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.hasBackdrop = input(this.config?.hasBackdrop ?? true, { ...(ngDevMode ? { debugName: "hasBackdrop" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 是否支持键盘 esc 关闭
          * @en_US Whether to support keyboard esc to close
          */
-        this.keyboard = input(this.config?.keyboard ?? true, ...(ngDevMode ? [{ debugName: "keyboard", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.keyboard = input(this.config?.keyboard ?? true, { ...(ngDevMode ? { debugName: "keyboard" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 自定义样式名
          * @en_US Custom style name
@@ -160,17 +160,17 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          * @zh_CN 按钮居中
          * @en_US Button center
          */
-        this.buttonsCenter = input(this.config?.buttonsCenter ?? false, ...(ngDevMode ? [{ debugName: "buttonsCenter", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.buttonsCenter = input(this.config?.buttonsCenter ?? false, { ...(ngDevMode ? { debugName: "buttonsCenter" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 拖动对话框
          * @en_US Drag dialog
          */
-        this.draggable = input(this.config?.draggable ?? false, ...(ngDevMode ? [{ debugName: "draggable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.draggable = input(this.config?.draggable ?? false, { ...(ngDevMode ? { debugName: "draggable" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 最大化弹出框按钮，当启用 resizable 时也会显示
          * @en_US Maximize the bullet box button, Will also display when resizable is enabled
          */
-        this.maximize = input(this.config?.maximize ?? false, ...(ngDevMode ? [{ debugName: "maximize", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        this.maximize = input(this.config?.maximize ?? false, { ...(ngDevMode ? { debugName: "maximize" } : {}), transform: XToBoolean });
         /**
          * @zh_CN 关闭前处理函数
          * @en_US Processing function before closing
@@ -202,10 +202,10 @@ class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
          */
         this.closeDone = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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 }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", 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: "21.0.6", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", 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: "21.0.0", ngImport: i0, type: XDialogProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogPrefix}-property`, template: '' }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], offsetLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetLeft", required: false }] }], offsetTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetTop", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], showConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConfirm", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], backdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClose", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], buttonsCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonsCenter", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], maximize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximize", required: false }] }], beforeClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeClose", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], confirm: [{ type: i0.Output, args: ["confirm"] }], close: [{ type: i0.Output, args: ["close"] }], showDone: [{ type: i0.Output, args: ["showDone"] }], closeDone: [{ type: i0.Output, args: ["closeDone"] }] } });
@@ -220,10 +220,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: "21.0.0", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XDialogContainerProperty, isStandalone: true, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: XDialogContainerProperty, isStandalone: true, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogContainerPrefix}-property`, template: '' }]
         }] });
@@ -370,7 +370,7 @@ class XDialogComponent extends XDialogProperty {
         }
     }
     portalAttached() {
-        return this.dialogRef?.overlayRef?.hasAttached();
+        return !!this.dialogRef?.overlayRef?.hasAttached();
     }
     onClose(action, execFunction = true) {
         if (!this.portalAttached() && !this.container)
@@ -455,10 +455,10 @@ class XDialogComponent extends XDialogProperty {
             !this.destroy() && this.showDone.emit($event);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 (visible()) {\r\n    @if (container && hasBackdrop()) {\r\n      <div\r\n        class=\"x-dialog-backdrop\"\r\n        animate.enter=\"x-opacity-enter\"\r\n        animate.leave=\"x-opacity-leave\"\r\n        (click)=\"onClose('close')\"\r\n      ></div>\r\n    }\r\n    <div\r\n      class=\"x-dialog\"\r\n      [animate.enter]=\"`x-move-${placement()}-enter`\"\r\n      [animate.leave]=\"`x-move-${placement()}-leave`\"\r\n      (animationend)=\"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  }\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) {\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 (visible()) {\r\n    @if (container && hasBackdrop()) {\r\n      <div\r\n        class=\"x-dialog-backdrop\"\r\n        animate.enter=\"x-opacity-enter\"\r\n        animate.leave=\"x-opacity-leave\"\r\n        (click)=\"onClose('close')\"\r\n      ></div>\r\n    }\r\n    <div\r\n      class=\"x-dialog\"\r\n      [animate.enter]=\"`x-move-${placement()}-enter`\"\r\n      [animate.leave]=\"`x-move-${placement()}-leave`\"\r\n      (animationend)=\"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  }\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) {\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogPrefix}`, imports: [NgStyle, NgTemplateOutlet, XAlertComponent, XButtonComponent, XButtonsComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #dialogTpl>\r\n  @if (visible()) {\r\n    @if (container && hasBackdrop()) {\r\n      <div\r\n        class=\"x-dialog-backdrop\"\r\n        animate.enter=\"x-opacity-enter\"\r\n        animate.leave=\"x-opacity-leave\"\r\n        (click)=\"onClose('close')\"\r\n      ></div>\r\n    }\r\n    <div\r\n      class=\"x-dialog\"\r\n      [animate.enter]=\"`x-move-${placement()}-enter`\"\r\n      [animate.leave]=\"`x-move-${placement()}-leave`\"\r\n      (animationend)=\"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  }\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) {\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: [{
@@ -474,15 +474,15 @@ class XDialogContainerComponent extends XDialogContainerProperty {
         super(...arguments);
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", 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: "21.0.6", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.0", ngImport: i0, type: XDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-dialog-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -497,16 +497,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 // TODO: add more function
 class XDialogRef {
-    constructor(overlayRef, containerInstance, renderer, portalService) {
-        this.overlayRef = overlayRef;
-        this.containerInstance = containerInstance;
-        this.renderer = renderer;
-        this.portalService = portalService;
+    constructor(params) {
         this.fullscreen = false;
-        this.dragHandleRefs = [];
         this.afterClose = new Subject();
         this.unsubject = new Subject();
         this._isFristFullscreen = true;
+        this.overlayRef = params.overlayRef;
+        this.containerInstance = params.containerInstance;
+        this.renderer = params.renderer;
+        this.option = params.option;
+        this.fullscreen = params.fullscreen;
+        this.portalService = params.portalService;
     }
     close(result) {
         this.containerInstance.animationChanged
@@ -522,65 +523,65 @@ class XDialogRef {
         });
     }
     onFullscreen() {
-        let { dialogBox, dialogRef, overlayElement, distance, hostElement, defaultMaximize } = this.containerInstance;
-        if (!dialogRef.fullscreen) {
-            dialogRef.overlayRef.updateSize({
+        let { dialogBox, overlayElement, distance, hostElement, defaultMaximize } = this.containerInstance;
+        if (!this.fullscreen) {
+            this.overlayRef.updateSize({
                 width: '100%',
                 height: '100%',
                 minWidth: '100%',
                 minHeight: '100%'
             });
-            dialogRef.fullscreen = true;
-            dialogBox['minWidth'] = '100%';
-            dialogBox['minHeight'] = '100%';
-            dialogBox['draggable'] = false;
-            dialogBox['resizable'] = false;
+            this.fullscreen = true;
+            dialogBox.minWidth = '100%';
+            dialogBox.minHeight = '100%';
+            dialogBox.draggable = false;
+            dialogBox.resizable = false;
             if (this.option.resizable) {
                 this.renderer.setStyle(overlayElement, 'margin', '0 0 0 0');
             }
             if (this.option.draggable) {
-                dialogBox['distance'] = { x: 0, y: 0 };
+                dialogBox.distance = { x: 0, y: 0 };
             }
             this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
         }
         else {
-            dialogBox['minWidth'] = this.option.minWidth;
-            dialogBox['minHeight'] = this.option.minHeight;
+            dialogBox.minWidth = this.option.minWidth;
+            dialogBox.minHeight = this.option.minHeight;
             if (this._isFristFullscreen && defaultMaximize) {
-                this.option.draggable = dialogBox['draggable'];
-                this.option.resizable = dialogBox['resizable'];
+                this.option.draggable = dialogBox.draggable;
+                this.option.resizable = dialogBox.resizable;
             }
             else {
-                dialogBox['draggable'] = this.option.draggable;
-                dialogBox['resizable'] = this.option.resizable;
+                dialogBox.draggable = this.option.draggable;
+                dialogBox.resizable = this.option.resizable;
             }
-            dialogRef.overlayRef?.updateSize({
+            this.overlayRef.updateSize({
                 width: dialogBox['width'],
                 height: dialogBox['height'],
                 minWidth: dialogBox['minWidth'],
                 minHeight: dialogBox['minHeight']
             });
-            dialogRef.fullscreen = false;
+            this.fullscreen = false;
             if (this.option.draggable) {
-                dialogBox['distance'] = { ...distance };
+                dialogBox.distance = { ...distance };
             }
             if (this.option.resizable) {
-                if (dialogBox['marginTop']) {
-                    this.renderer.setStyle(overlayElement, 'margin-top', `${dialogBox['marginTop']}`);
+                if (dialogBox.marginTop) {
+                    this.renderer.setStyle(overlayElement, 'margin-top', `${dialogBox.marginTop}`);
                 }
-                if (dialogBox['marginLeft']) {
-                    this.renderer.setStyle(overlayElement, 'margin-left', `${dialogBox['marginLeft']}`);
+                if (dialogBox.marginLeft) {
+                    this.renderer.setStyle(overlayElement, 'margin-left', `${dialogBox.marginLeft}`);
                 }
-                if (dialogBox['marginRight']) {
-                    this.renderer.setStyle(overlayElement, 'margin-right', `${dialogBox['marginRight']}`);
+                if (dialogBox.marginRight) {
+                    this.renderer.setStyle(overlayElement, 'margin-right', `${dialogBox.marginRight}`);
                 }
-                if (dialogBox['marginBottom']) {
-                    this.renderer.setStyle(overlayElement, 'margin-bottom', `${dialogBox['marginBottom']}`);
+                if (dialogBox.marginBottom) {
+                    this.renderer.setStyle(overlayElement, 'margin-bottom', `${dialogBox.marginBottom}`);
                 }
             }
             this.renderer.removeClass(overlayElement, 'x-dialog-portal-fullscreen');
             if (this._isFristFullscreen && defaultMaximize) {
-                dialogRef.overlayRef?.updatePositionStrategy(this.portalService.setPlace(this.option.placement, this.option.offset));
+                this.overlayRef.updatePositionStrategy(this.portalService.setPlace(this.option.placement, this.option.offset));
                 this.renderer.addClass(hostElement, XPortalResizablePrefix);
                 setTimeout(() => {
                     Object.assign(dialogBox, this.portalService.setResizable(overlayElement, this.option.placement));
@@ -600,15 +601,15 @@ class XDialogRef {
 
 class XDialogCloseDirective {
     constructor() {
-        this.dialogRef = inject((XDialogRef), { optional: true });
+        this.dialogRef = inject(XDialogRef, { optional: true });
     }
     onCloseClick() {
-        this.dialogRef && this.dialogRef.close();
+        this.dialogRef?.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-close]`
@@ -621,10 +622,10 @@ class XDialogTitleDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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: "21.0.6", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.0", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-title], x-dialog-title`
@@ -637,10 +638,10 @@ class XDialogContentDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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: "21.0.6", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.0", ngImport: i0, type: XDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-content], x-dialog-content`
@@ -653,10 +654,10 @@ class XDialogActionsDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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: "21.0.6", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.0", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-actions], x-dialog-actions`
@@ -667,15 +668,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }] } });
 class XDialogDragHandleDirective {
     constructor() {
-        this.dialogRef = inject((XDialogRef), { optional: true });
+        this.dialogRef = inject(XDialogRef, { optional: true });
     }
     get getDraggable() {
         return !this.dialogRef?.fullscreen && this.dialogRef?.option.draggable;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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: "21.0.0", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-drag-handle], x-dialog-drag-handle`,
@@ -692,15 +693,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }] } });
 class XDialogFullscreenDirective {
     constructor() {
-        this.dialogRef = inject((XDialogRef), { optional: true });
+        this.dialogRef = inject(XDialogRef, { optional: true });
     }
     onFullscreenClick() {
-        this.dialogRef && this.dialogRef.onFullscreen();
+        this.dialogRef?.onFullscreen();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: XDialogFullscreenDirective, isStandalone: true, selector: "[x-dialog-fullscreen], x-dialog-fullscreen", host: { listeners: { "click": "onFullscreenClick()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: XDialogFullscreenDirective, isStandalone: true, selector: "[x-dialog-fullscreen], x-dialog-fullscreen", host: { listeners: { "click": "onFullscreenClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-fullscreen], x-dialog-fullscreen`
@@ -718,7 +719,7 @@ class XDialogPortalComponent extends BasePortalOutlet {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.portalOutlet = viewChild.required(CdkPortalOutlet);
         this.dragRef = viewChild.required(CdkDrag);
-        this.handles = contentChildren(XDialogDragHandleDirective, ...(ngDevMode ? [{ debugName: "handles", descendants: true }] : [{ descendants: true }]));
+        this.handles = contentChildren(XDialogDragHandleDirective, { ...(ngDevMode ? { debugName: "handles" } : {}), descendants: true });
         this.animationChanged = new EventEmitter();
         this.offsetLeft = 0;
         this.offsetTop = 0;
@@ -766,10 +767,10 @@ class XDialogPortalComponent extends BasePortalOutlet {
             y: this.distance.y + event.distance.y
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", 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: { "animationend": "done($event)", "animationstart": "start($event)" }, properties: { "animate.enter": "this.enimateEnter", "animate.leave": "this.enimateLeave" } }, queries: [{ propertyName: "handles", predicate: XDialogDragHandleDirective, 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  [cdkDragBoundary]=\"'.cdk-overlay-container'\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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: { "animationend": "done($event)", "animationstart": "start($event)" }, properties: { "animate.enter": "this.enimateEnter", "animate.leave": "this.enimateLeave" } }, queries: [{ propertyName: "handles", predicate: XDialogDragHandleDirective, 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  [cdkDragBoundary]=\"'.cdk-overlay-container'\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-dialog-portal', imports: [DragDropModule, PortalModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-dialog-portal\"\r\n  #dragRef\r\n  cdkDrag\r\n  [cdkDragBoundary]=\"'.cdk-overlay-container'\"\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: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: true }] }, { type: i0.Output, args: ["placementChange"] }], enimateEnter: [{
@@ -787,8 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dragRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkDrag), { isSignal: true }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XDialogDragHandleDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class XDialogModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
             XDialogContainerComponent,
             XDialogCloseDirective,
             XDialogTitleDirective,
@@ -803,9 +804,9 @@ class XDialogModule {
             XDialogActionsDirective,
             XDialogDragHandleDirective,
             XDialogFullscreenDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -873,27 +874,30 @@ class XDialogService {
         const { overlayRef, componentRef } = portal || {};
         const { instance } = componentRef || {};
         const { hostElement, overlayElement } = overlayRef || {};
-        const dialogRef = new XDialogRef(overlayRef, instance, this.renderer, this.portalService);
+        let defaultMaximize = this.setMaximize(option);
         let dialogBox = {
             draggable: option.draggable
         };
-        let defaultMaximize = this.setMaximize(option);
         Object.assign(dialogBox, {
             width: defaultMaximize ? this.default.width : option.width,
             height: defaultMaximize ? null : option.height,
             minWidth: option.minWidth,
             minHeight: option.minHeight
         });
+        const dialogRef = new XDialogRef({
+            overlayRef: overlayRef,
+            containerInstance: instance,
+            renderer: this.renderer,
+            option,
+            fullscreen: defaultMaximize,
+            portalService: this.portalService
+        });
         componentRef?.setInput('placement', option.placement);
         instance.option = option;
-        instance.dialogRef = dialogRef;
         instance.defaultMaximize = defaultMaximize;
         instance.dialogBox = dialogBox;
         instance.hostElement = hostElement;
         instance.overlayElement = overlayElement;
-        dialogRef.option = option;
-        dialogRef.fullscreen = defaultMaximize;
-        dialogRef.unsubject = new Subject();
         if (defaultMaximize) {
             this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
         }
@@ -944,10 +948,10 @@ class XDialogService {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });