@ng-nest/ui 17.0.12 → 18.0.1

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Input, Output, inject, Renderer2, ElementRef, ChangeDetectorRef, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, HostListener, ContentChildren, Directive, NgModule, RendererFactory2, TemplateRef, Injectable } from '@angular/core';
-import { XInputBoolean, XWithConfig, XProperty, XConfigService, XIsChange, XClearClass, XIsEmpty, XIsFunction, XMoveBoxAnimation, XOpacityAnimation, fillDefault } from '@ng-nest/ui/core';
-import { __decorate } from 'tslib';
-import { XAlertProperty, XAlertComponent } from '@ng-nest/ui/alert';
-import { XPortalService, PortalResizablePrefix } from '@ng-nest/ui/portal';
+import { InjectionToken, input, model, output, Component, inject, Renderer2, ViewContainerRef, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, contentChildren, EventEmitter, HostListener, Directive, ElementRef, 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';
 import { Overlay } from '@angular/cdk/overlay';
-import { XI18nService } from '@ng-nest/ui/i18n';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
 import { map, takeUntil } from 'rxjs/operators';
+import { XAlertComponent } from '@ng-nest/ui/alert';
 import { XButtonComponent, XButtonsComponent } from '@ng-nest/ui/button';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 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 { CdkDragHandle, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import { XResizableDirective } from '@ng-nest/ui/resizable';
 
 /**
@@ -29,167 +29,179 @@ const X_DIALOG_DATA = new InjectionToken('XDialogData');
 /**
  * Dialog Property
  */
-class XDialogProperty extends XAlertProperty {
+class XDialogProperty extends XPropertyFunction(X_DIALOG_CONFIG_NAME) {
     constructor() {
         super(...arguments);
-        this.visible = false;
+        /**
+         * @zh_CN 标题
+         * @en_US Title
+         */
+        this.title = input();
+        /**
+         * @zh_CN 显示/隐藏
+         * @en_US Show/hide
+         */
+        this.visible = model(false);
+        /**
+         * @zh_CN 方位，九宫格
+         * @en_US Direction, nine grid
+         */
+        this.placement = input(this.config?.placement ?? 'center');
+        /**
+         * @zh_CN 偏移距离
+         * @en_US Offset distance
+         */
+        this.offset = input(this.config?.offset ?? '1rem', { transform: XToCssPixelValue });
         /**
          * @zh_CN 类型
          * @en_US Types of
          */
-        this.type = 'info';
+        this.type = input('info');
+        /**
+         * @zh_CN 隐藏关闭按钮
+         * @en_US Hide close button
+         */
+        this.hideClose = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 使用文本关闭按钮
+         * @en_US Use the text to close button
+         */
+        this.closeText = input();
+        /**
+         * @zh_CN 调整弹框的大小
+         * @en_US Adjust the size of the box
+         */
+        this.resizable = input(this.config?.resizable ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 开启 resizable 调整大小，偏移屏幕左边
+         * @en_US Open the resizable resize, offset screen left
+         */
+        this.offsetLeft = input(0, { transform: XToNumber });
+        /**
+         * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部
+         * @en_US Open the resizable resize, offset screen top
+         */
+        this.offsetTop = input(0, { transform: XToNumber });
+        /**
+         * @zh_CN 宽度
+         * @en_US Width
+         */
+        this.width = input(this.config?.width ?? '32rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 高度
+         * @en_US Height
+         */
+        this.height = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 最小宽度
+         * @en_US Min width
+         */
+        this.minWidth = input(this.config?.minWidth ?? '18rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 最小高度
+         * @en_US Min height
+         */
+        this.minHeight = input(this.config?.minHeight ?? '8rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 样式主题
+         * @en_US Style theme
+         */
+        this.effect = input(this.config?.effect ?? 'white');
+        /**
+         * @zh_CN 底部自定义模板
+         * @en_US Custom template at the bottom
+         */
+        this.footer = input();
+        /**
+         * @zh_CN 显示取消按钮
+         * @en_US Show cancel button
+         */
+        this.showCancel = input(this.config?.showCancel ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 取消按钮文字
+         * @en_US Cancel button text
+         * @default '取消'
+         */
+        this.cancelText = input(this.config?.cancelText ?? '');
+        /**
+         * @zh_CN 显示确认按钮
+         * @en_US Show confirmation button
+         */
+        this.showConfirm = input(this.config?.showConfirm ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 确认按钮文字
+         * @en_US Confirm button text
+         * @default '确认'
+         */
+        this.confirmText = input(this.config?.confirmText ?? '');
+        /**
+         * @zh_CN 点击遮罩关闭
+         * @en_US Click the mask to close
+         */
+        this.backdropClose = input(this.config?.backdropClose ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 是否显示背景遮罩
+         * @en_US Whether to display the background mask
+         */
+        this.hasBackdrop = input(this.config?.hasBackdrop ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 自定义样式名
+         * @en_US Custom style name
+         */
+        this.className = input(this.config?.className ?? '');
+        /**
+         * @zh_CN 按钮居中
+         * @en_US Button center
+         */
+        this.buttonsCenter = input(this.config?.buttonsCenter ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 拖动对话框
+         * @en_US Drag dialog
+         */
+        this.draggable = input(this.config?.draggable ?? false, { 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, { transform: XToBoolean });
+        /**
+         * @zh_CN 关闭前处理函数
+         * @en_US Processing function before closing
+         */
+        this.beforeClose = input();
         /**
          * @zh_CN 取消按钮的事件
          * @en_US Cancel button event
          */
-        this.cancel = new EventEmitter();
+        this.cancel = output();
         /**
          * @zh_CN 确认按钮的事件
          * @en_US Confirm button event
          */
-        this.confirm = new EventEmitter();
+        this.confirm = output();
         /**
          * @zh_CN 确认按钮的事件
          * @en_US Confirm button event
          */
-        this.close = new EventEmitter();
-        /**
-         * @zh_CN 显示/隐藏改变事件
-         * @en_US Show/hide change events
-         */
-        this.visibleChange = new EventEmitter();
+        this.close = output();
         /**
          * @zh_CN 弹出完成动画加载
          * @en_US Pop up complete animation loading
          */
-        this.showDone = new EventEmitter();
+        this.showDone = output();
         /**
          * @zh_CN 关闭完成动画
          * @en_US Close complete animation
          */
-        this.closeDone = new EventEmitter();
+        this.closeDone = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XDialogProperty, selector: "x-dialog-property", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", close: "close", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", 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 }); }
 }
-__decorate([
-    XInputBoolean()
-], XDialogProperty.prototype, "visible", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, 'center')
-], XDialogProperty.prototype, "placement", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '1rem')
-], XDialogProperty.prototype, "offset", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '32rem')
-], XDialogProperty.prototype, "width", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '18rem')
-], XDialogProperty.prototype, "minWidth", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '8rem')
-], XDialogProperty.prototype, "minHeight", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
-], XDialogProperty.prototype, "effect", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, true)
-], XDialogProperty.prototype, "showCancel", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME)
-], XDialogProperty.prototype, "cancelText", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, true)
-], XDialogProperty.prototype, "showConfirm", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME)
-], XDialogProperty.prototype, "confirmText", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, true)
-], XDialogProperty.prototype, "backdropClose", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, true)
-], XDialogProperty.prototype, "hasBackdrop", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '')
-], XDialogProperty.prototype, "className", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME),
-    XInputBoolean()
-], XDialogProperty.prototype, "buttonsCenter", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, false),
-    XInputBoolean()
-], XDialogProperty.prototype, "draggable", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, false),
-    XInputBoolean()
-], XDialogProperty.prototype, "resizable", void 0);
-__decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, false),
-    XInputBoolean()
-], XDialogProperty.prototype, "maximize", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogPrefix}-property`, template: '' }]
-        }], propDecorators: { visible: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], minHeight: [{
-                type: Input
-            }], effect: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], showCancel: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], showConfirm: [{
-                type: Input
-            }], confirmText: [{
-                type: Input
-            }], backdropClose: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], buttonsCenter: [{
-                type: Input
-            }], draggable: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], maximize: [{
-                type: Input
-            }], beforeClose: [{
-                type: Input
-            }], cancel: [{
-                type: Output
-            }], confirm: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], visibleChange: [{
-                type: Output
-            }], showDone: [{
-                type: Output
-            }], closeDone: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Dialog Container
  * @selector x-dialog-container
@@ -201,106 +213,90 @@ 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: "17.3.10", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XDialogContainerProperty, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogContainerPrefix}-property`, template: '' }]
         }] });
 
 class XDialogComponent extends XDialogProperty {
+    get getVisible() {
+        return this.visible();
+    }
     constructor() {
-        super(...arguments);
-        this.locale = {};
+        super();
+        this.renderer = inject(Renderer2);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.protalService = inject(XPortalService);
+        this.overlay = inject(Overlay);
+        this.i18n = inject(XI18nService);
+        this.unSubject = new Subject();
+        this.clsName = `${XDialogPrefix}-${this.placement()}`;
+        this.dialogTpl = viewChild.required('dialogTpl');
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.dialog)), { initialValue: zh_CN.dialog });
+        this.overlayElement = signal(null);
         this.initHeight = 0;
         this.initContentHeight = 0;
-        this.isMaximize = false;
-        this.isDefaultMaximize = false;
+        this.isMaximize = signal(false);
+        this.isDefaultMaximize = signal(false);
         this.dialogBox = {};
         this.contentBox = {};
         this.distance = { x: 0, y: 0 };
-        this.viewInit = false;
+        this.viewInit = signal(false);
         this.action = null;
         this.containerInit = false;
-        this._unSubject = new Subject();
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.protalService = inject(XPortalService);
-        this.overlay = inject(Overlay);
-        this.i18n = inject(XI18nService);
+        this.resizableSignal = signal(false);
+        this.draggableSignal = signal(false);
+        this.maximizeSignal = signal(false);
+        this.getCancelText = computed(() => {
+            return this.cancelText() || this.locale().cancelText;
+        });
+        this.getConfirmText = computed(() => {
+            return this.confirmText() || this.locale().confirmText;
+        });
+        this.getStyle = computed(() => {
+            return this.container
+                ? {
+                    ...this.protalService.setContainerStyle(this.placement(), this.offset()),
+                    width: this.width(),
+                    height: this.height(),
+                    minWidth: this.minWidth(),
+                    minHeight: this.minHeight()
+                }
+                : {};
+        });
         this.container = inject(X_DIALOG_CONTAINER, { optional: true });
         this.configService = inject(XConfigService);
-    }
-    get getVisible() {
-        return this.visible;
-    }
-    get getCancelText() {
-        return this.cancelText || this.locale.cancelText;
-    }
-    get getConfirmText() {
-        return this.confirmText || this.locale.confirmText;
-    }
-    get getStyle() {
-        return this.container
-            ? {
-                ...this.protalService.setContainerStyle(this.placement, this.offset),
-                width: this.width,
-                height: this.height,
-                minWidth: this.minWidth,
-                minHeight: this.minHeight
-            }
-            : {};
+        this.styleOffsetLeft = signal(0);
+        this.styleOffsetTop = signal(0);
+        this.visibleChanged = toObservable(this.visible);
+        this.draggableChanged = toObservable(this.draggable);
+        this.visibleChanged.pipe(takeUntil(this.unSubject)).subscribe(() => {
+            this.setVisible();
+        });
     }
     ngOnInit() {
         this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
-        this.i18n.localeChange
-            .pipe(map((x) => x.dialog), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
-        });
-        this.dialogBox['draggable'] = this.draggable;
-        this.dialogBox['resizable'] = this.resizable;
-        this.setClassMap();
-    }
-    ngOnChanges(changes) {
-        const { visible, placement } = changes;
-        XIsChange(visible) && this.setVisible();
-        if (XIsChange(placement)) {
-            this.setClassMap();
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe();
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
+        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();
     }
     ngAfterViewInit() {
-        this.viewInit = true;
-        setTimeout(() => this.visible && this.create());
+        this.viewInit.set(true);
     }
-    unsubscribe() {
+    ngOnDestroy() {
         this.backdropClick$?.unsubscribe();
-    }
-    setClassMap() {
-        for (let key in this.classMap) {
-            this.renderer.removeClass(this.elementRef.nativeElement, key);
-        }
-        XClearClass(this.classMap);
-        this.classMap = {
-            [`${XDialogPrefix}-${this.placement}`]: !XIsEmpty(this.placement)
-        };
-        for (let key in this.classMap) {
-            this.renderer.addClass(this.elementRef.nativeElement, key);
-        }
+        this.unSubject.next();
+        this.unSubject.complete();
     }
     setVisible() {
-        if (!this.viewInit)
+        if (!this.viewInit())
             return;
-        if (this.visible) {
+        if (this.visible()) {
             this.create();
         }
         else {
@@ -313,52 +309,54 @@ class XDialogComponent extends XDialogProperty {
             return;
         }
         this.dialogRef = this.protalService.attach({
-            content: this.dialogTpl,
+            content: this.dialogTpl(),
             viewContainerRef: this.viewContainerRef,
             overlayConfig: {
-                panelClass: [XDialogContainer, this.className],
-                hasBackdrop: Boolean(this.hasBackdrop),
+                panelClass: [XDialogContainer, this.className()],
+                hasBackdrop: this.hasBackdrop(),
                 scrollStrategy: this.overlay.scrollStrategies.block(),
-                width: this.width,
-                height: this.height,
-                minWidth: this.minWidth,
-                minHeight: this.minHeight,
-                positionStrategy: this.protalService.setPlace(this.placement, this.offset)
+                width: this.width(),
+                height: this.height(),
+                minWidth: this.minWidth(),
+                minHeight: this.minHeight(),
+                positionStrategy: this.protalService.setPlace(this.placement(), this.offset())
             }
         });
         const { hostElement, overlayElement } = this.dialogRef.overlayRef;
-        this.overlayElement = overlayElement;
+        this.overlayElement.set(overlayElement);
         this.setWidthHeight();
         Object.assign(this.dialogBox, {
-            width: this.width,
-            height: this.height,
-            minWidth: this.minWidth,
-            minHeight: this.minHeight
+            width: this.width(),
+            height: this.height(),
+            minWidth: this.minWidth(),
+            minHeight: this.minHeight()
         });
-        if (this.resizable && !this.isDefaultMaximize) {
-            this.renderer.addClass(hostElement, PortalResizablePrefix);
+        if (this.resizableSignal() && !this.isDefaultMaximize()) {
+            this.renderer.addClass(hostElement, XPortalResizablePrefix);
             setTimeout(() => {
-                Object.assign(this.dialogBox, this.protalService.setResizable(this.overlayElement, this.placement));
-                this.offsetLeft = this.overlayElement.offsetLeft;
-                this.offsetTop = this.overlayElement.offsetTop;
-                const dialogDraggable = this.overlayElement?.querySelector('.x-alert-draggable');
+                Object.assign(this.dialogBox, this.protalService.setResizable(this.overlayElement(), this.placement()));
+                this.styleOffsetLeft.set(this.overlayElement()?.offsetLeft);
+                this.styleOffsetTop.set(this.overlayElement()?.offsetTop);
+                console.log(this.styleOffsetLeft());
+                console.log(this.styleOffsetTop());
+                const dialogDraggable = this.overlayElement()?.querySelector('.x-alert-draggable');
                 this.initHeight = dialogDraggable.clientHeight;
-                this.dialogContent = this.overlayElement?.querySelector('.x-dialog-content');
+                this.dialogContent = this.overlayElement()?.querySelector('.x-dialog-content');
                 this.initContentHeight = this.dialogContent.clientHeight;
             });
         }
-        if (this.hasBackdrop && this.backdropClose && this.dialogRef?.overlayRef) {
+        if (this.hasBackdrop() && this.backdropClose() && this.dialogRef?.overlayRef) {
             this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose('close'));
         }
     }
     setWidthHeight() {
         const ws = ['100%', '100vw'];
         const hs = ['100%', '100vh'];
-        if (ws.includes(this.width) && hs.includes(this.height)) {
-            this.isDefaultMaximize = true;
-            this.resizable = false;
-            this.draggable = false;
-            this.maximize = false;
+        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);
         }
     }
     portalAttached() {
@@ -369,16 +367,15 @@ class XDialogComponent extends XDialogProperty {
             return;
         if (this.container && !this.containerInit)
             return;
-        if (XIsFunction(this.beforeClose) && execFunction) {
-            this.beforeClose(action);
+        if (XIsFunction(this.beforeClose()) && execFunction) {
+            this.beforeClose()?.(action);
             this.action = action;
         }
         else {
-            this.visible = false;
-            this.visibleChange.emit(this.visible);
+            this.visible.set(false);
             if (this.portalAttached()) {
                 this.dialogRef?.overlayRef?.detach();
-                this.unsubscribe();
+                this.backdropClick$?.unsubscribe();
             }
             if ([action, this.action].includes('confirm')) {
                 this.confirm.emit();
@@ -397,8 +394,8 @@ class XDialogComponent extends XDialogProperty {
     onSize() {
         if (!this.dialogRef)
             return;
-        this.isMaximize = !this.isMaximize;
-        if (this.isMaximize) {
+        this.isMaximize.update((x) => !x);
+        if (this.isMaximize()) {
             this.onMaximize();
         }
         else {
@@ -416,49 +413,49 @@ class XDialogComponent extends XDialogProperty {
         this.dialogBox['minHeight'] = '100%';
         this.dialogBox['draggable'] = false;
         this.dialogBox['resizable'] = false;
-        if (this.resizable) {
-            this.renderer.setStyle(this.overlayElement, 'margin', '0 0 0 0');
+        if (this.resizableSignal()) {
+            this.renderer.setStyle(this.overlayElement(), 'margin', '0 0 0 0');
         }
-        if (this.draggable) {
+        if (this.draggableSignal()) {
             this.dialogBox['distance'] = { x: 0, y: 0 };
         }
     }
     onMinimize() {
-        this.dialogBox['minWidth'] = this.minWidth;
-        this.dialogBox['minHeight'] = this.minHeight;
-        this.dialogBox['draggable'] = this.draggable;
-        this.dialogBox['resizable'] = this.resizable;
+        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'],
             minWidth: this.dialogBox['minWidth'],
             minHeight: this.dialogBox['minHeight']
         });
-        if (this.draggable) {
+        if (this.draggableSignal()) {
             this.dialogBox['distance'] = { ...this.distance };
         }
-        if (this.resizable) {
+        if (this.resizableSignal()) {
             if (this.dialogBox['marginTop']) {
-                this.renderer.setStyle(this.overlayElement, 'margin-top', `${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']}`);
+                this.renderer.setStyle(this.overlayElement(), 'margin-left', `${this.dialogBox['marginLeft']}`);
             }
             if (this.dialogBox['marginRight']) {
-                this.renderer.setStyle(this.overlayElement, 'margin-right', `${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']}`);
+                this.renderer.setStyle(this.overlayElement(), 'margin-bottom', `${this.dialogBox['marginBottom']}`);
             }
         }
     }
     moveDone($event) {
         if ($event.toState === 'void') {
             this.closeDone.emit($event);
-            this.isMaximize = false;
+            this.isMaximize.set(false);
             this.dialogBox = {
-                draggable: this.draggable,
-                resizable: this.resizable
+                draggable: this.draggableSignal(),
+                resizable: this.resizableSignal()
             };
             this.distance = { x: 0, y: 0 };
             this.dialogRef?.overlayRef?.dispose();
@@ -475,18 +472,18 @@ class XDialogComponent extends XDialogProperty {
             this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XDialogComponent, isStandalone: true, selector: "x-dialog", host: { properties: { "class.x-dialog-visible": "this.getVisible" } }, viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: 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]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n    [ngStyle]=\"getStyle\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose('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=\"1\">\r\n            @if (showCancel) {\r\n              <x-button (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n            }\r\n            @if (showConfirm) {\r\n              <x-button type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</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 (maximize || resizable) {\r\n    <x-button\r\n      size=\"small\"\r\n      [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\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;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}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}\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: "18.0.1", ngImport: i0, type: XDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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-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 (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button type=\"primary\" flat (click)=\"onClose('confirm')\">{{ getConfirmText() }}</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    ></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;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: "17.3.10", ngImport: i0, type: XDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n    [ngStyle]=\"getStyle\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose('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=\"1\">\r\n            @if (showCancel) {\r\n              <x-button (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n            }\r\n            @if (showConfirm) {\r\n              <x-button type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</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 (maximize || resizable) {\r\n    <x-button\r\n      size=\"small\"\r\n      [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\"\r\n      [onlyIcon]=\"true\"\r\n      (click)=\"onSize()\"\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;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}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}\n"] }]
-        }], propDecorators: { getVisible: [{
+            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 (click)=\"onClose('cancel')\" flat plain>{{ getCancelText() }}</x-button>\r\n            }\r\n            @if (showConfirm()) {\r\n              <x-button type=\"primary\" flat (click)=\"onClose('confirm')\">{{ getConfirmText() }}</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    ></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;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']
-            }], dialogTpl: [{
-                type: ViewChild,
-                args: ['dialogTpl']
+            }], clsName: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class XDialogContainerComponent extends XDialogContainerProperty {
@@ -494,15 +491,15 @@ class XDialogContainerComponent extends XDialogContainerProperty {
         super(...arguments);
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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;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: "17.3.10", ngImport: i0, type: XDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-dialog-container', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -516,6 +513,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class XDialogPortalComponent extends BasePortalOutlet {
+    constructor() {
+        super(...arguments);
+        this.renderer = inject(Renderer2);
+        this.portalOutlet = viewChild.required(CdkPortalOutlet);
+        this.dragRef = viewChild.required(CdkDrag);
+        this.handles = contentChildren(CdkDragHandle, { descendants: true });
+        this.animationChanged = new EventEmitter();
+        this.offsetLeft = 0;
+        this.offsetTop = 0;
+        this.minWidth = '0rem';
+        this.minHeight = '0rem';
+        this.initHeight = 0;
+        this.initContentHeight = 0;
+        this.defaultMaximize = false;
+        this.distance = { x: 0, y: 0 };
+        this.dialogBox = {};
+    }
     done({ toState, totalTime }) {
         this.animationChanged.next({
             action: 'done',
@@ -530,20 +544,6 @@ class XDialogPortalComponent extends BasePortalOutlet {
             totalTime
         });
     }
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        this.animationChanged = new EventEmitter();
-        this.offsetLeft = 0;
-        this.offsetTop = 0;
-        this.minWidth = '0rem';
-        this.minHeight = '0rem';
-        this.initHeight = 0;
-        this.initContentHeight = 0;
-        this.defaultMaximize = false;
-        this.distance = { x: 0, y: 0 };
-        this.dialogBox = {};
-    }
     ngOnInit() {
         this.dialogBox['draggable'] = this.defaultMaximize ? this.dialogBox['draggable'] : this.option.draggable;
         this.dialogBox['resizable'] = this.defaultMaximize ? this.dialogBox['resizable'] : this.option.resizable;
@@ -555,20 +555,20 @@ class XDialogPortalComponent extends BasePortalOutlet {
             return;
         }
         for (let item of this.dialogRef.dragHandleRefs) {
-            this.dragRef._addHandle(new CdkDragHandle(item, this.dragRef));
+            this.dragRef()._addHandle(new CdkDragHandle(item, this.dragRef()));
         }
     }
     attachComponentPortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
+        if (this.portalOutlet().hasAttached()) {
             throw Error('dialog portal has attached');
         }
-        return this.portalOutlet.attachComponentPortal(portal);
+        return this.portalOutlet().attachComponentPortal(portal);
     }
     attachTemplatePortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
+        if (this.portalOutlet().hasAttached()) {
             throw Error('dialog portal has attached');
         }
-        return this.portalOutlet.attachTemplatePortal(portal);
+        return this.portalOutlet().attachTemplatePortal(portal);
     }
     resizing(event) {
         const contentHeight = Number(this.initContentHeight) + Number(event.clientHeight) - Number(this.initHeight);
@@ -584,13 +584,13 @@ class XDialogPortalComponent extends BasePortalOutlet {
             y: this.distance.y + event.distance.y
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogPortalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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 }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "dragRef", first: true, predicate: CdkDrag, descendants: true, static: 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>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{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);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin: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}.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"], 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: "18.0.1", ngImport: i0, type: XDialogPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", 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;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"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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>\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{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);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin: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}.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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { placement: [{
+            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;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: HostBinding,
                 args: ['@x-move-box-animation']
             }], done: [{
@@ -599,15 +599,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }], start: [{
                 type: HostListener,
                 args: ['@x-move-box-animation.start', ['$event']]
-            }], portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }], dragRef: [{
-                type: ViewChild,
-                args: [CdkDrag, { static: true }]
-            }], handles: [{
-                type: ContentChildren,
-                args: [CdkDragHandle, { descendants: true }]
             }] } });
 
 // TODO: add more function
@@ -691,7 +682,7 @@ class XDialogRef {
             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.renderer.addClass(hostElement, PortalResizablePrefix);
+                this.renderer.addClass(hostElement, XPortalResizablePrefix);
                 setTimeout(() => {
                     Object.assign(dialogBox, this.portalService.setResizable(overlayElement, this.option.placement));
                     this.containerInstance.offsetLeft = overlayElement.offsetLeft;
@@ -715,10 +706,10 @@ class XDialogCloseDirective {
     onCloseClick() {
         this.dialogRef && this.dialogRef.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-close]`,
@@ -732,13 +723,13 @@ class XDialogTitleDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: XDialogTitleDirective, isStandalone: true, selector: "[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: "18.0.1", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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: "17.3.10", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-title]`,
+                    selector: `[x-dialog-title], x-dialog-title`,
                     standalone: true
                 }]
         }], propDecorators: { _has: [{
@@ -749,10 +740,10 @@ class XDialogContentDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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: "17.3.10", ngImport: i0, type: XDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-content], x-dialog-content`,
@@ -766,10 +757,10 @@ class XDialogActionsDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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: "17.3.10", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-actions], x-dialog-actions`,
@@ -790,10 +781,10 @@ class XDialogDragHandleDirective {
     ngOnInit() {
         this.dialogRef?.dragHandleRefs.push(this.elementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-drag-handle], x-dialog-drag-handle`,
@@ -810,10 +801,10 @@ class XDialogFullscreenDirective {
     onFullscreenClick() {
         this.dialogRef && this.dialogRef.onFullscreen();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", 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: "18.0.1", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.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: "17.3.10", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-dialog-fullscreen], x-dialog-fullscreen`,
@@ -825,8 +816,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class XDialogModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
             XDialogContainerComponent,
             XDialogCloseDirective,
             XDialogTitleDirective,
@@ -841,9 +832,9 @@ class XDialogModule {
             XDialogActionsDirective,
             XDialogDragHandleDirective,
             XDialogFullscreenDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -891,7 +882,7 @@ class XDialogService {
         Object.assign(this.default, this.configDefault);
     }
     create(content, option = {}) {
-        fillDefault(option, this.default);
+        XFillDefault(option, this.default);
         const portal = this.portalService.attach({
             content: XDialogPortalComponent,
             viewContainerRef: option.viewContainerRef,
@@ -931,7 +922,7 @@ class XDialogService {
         dialogRef.option = option;
         dialogRef.fullscreen = defaultMaximize;
         if (option.resizable && !defaultMaximize) {
-            this.renderer.addClass(hostElement, PortalResizablePrefix);
+            this.renderer.addClass(hostElement, XPortalResizablePrefix);
             setTimeout(() => {
                 Object.assign(dialogBox, this.portalService.setResizable(overlayElement, option.placement));
                 instance.offsetLeft = overlayElement.offsetLeft;
@@ -974,10 +965,10 @@ class XDialogService {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });