@ng-nest/ui 13.1.2 → 13.1.5

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, Directive, Optional, TemplateRef, Injectable, NgModule } from '@angular/core';
-import * as i2$1 from '@ng-nest/ui/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, QueryList, HostBinding, HostListener, ContentChildren, Directive, Optional, TemplateRef, Injectable, NgModule } from '@angular/core';
+import * as i2$2 from '@ng-nest/ui/core';
 import { XInputBoolean, XWithConfig, XIsChange, XIsFunction, XMoveBoxAnimation, fillDefault } from '@ng-nest/ui/core';
 import { __decorate } from 'tslib';
 import * as i4 from '@ng-nest/ui/alert';
@@ -17,13 +17,15 @@ import * as i6 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/cdk/portal';
+import * as i3$1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { CdkDragHandle, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2$1 from '@ng-nest/ui/resizable';
+import { XResizableModule } from '@ng-nest/ui/resizable';
 import { XIconModule } from '@ng-nest/ui/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { XInputModule } from '@ng-nest/ui/input';
-import { XResizableModule } from '@ng-nest/ui/resizable';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 
 /**
  * Dialog
@@ -56,6 +58,11 @@ class XDialogProperty extends XAlertProperty {
          * @en_US Confirm button event
          */
         this.confirm = new EventEmitter();
+        /**
+         * @zh_CN 确认按钮的事件
+         * @en_US Confirm button event
+         */
+        this.close = new EventEmitter();
         /**
          * @zh_CN 显示/隐藏改变事件
          * @en_US Show/hide change events
@@ -74,7 +81,7 @@ class XDialogProperty extends XAlertProperty {
     }
 }
 /** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", close: "close", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputBoolean()
 ], XDialogProperty.prototype, "visible", void 0);
@@ -91,7 +98,7 @@ __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, '18rem')
 ], XDialogProperty.prototype, "minWidth", void 0);
 __decorate([
-    XWithConfig(X_DIALOG_CONFIG_NAME, '9rem')
+    XWithConfig(X_DIALOG_CONFIG_NAME, '8rem')
 ], XDialogProperty.prototype, "minHeight", void 0);
 __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
@@ -184,6 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Output
             }], confirm: [{
                 type: Output
+            }], close: [{
+                type: Output
             }], visibleChange: [{
                 type: Output
             }], showDone: [{
@@ -211,6 +220,7 @@ class XDialogComponent extends XDialogProperty {
         this.contentBox = {};
         this.distance = { x: 0, y: 0 };
         this.viewInit = false;
+        this.action = null;
         this._unSubject = new Subject();
         this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
     }
@@ -253,8 +263,7 @@ class XDialogComponent extends XDialogProperty {
             this.create();
         }
         else {
-            this.detach();
-            // this.visibleChange.emit(false);
+            this.onClose('close', false);
         }
     }
     create() {
@@ -294,7 +303,7 @@ class XDialogComponent extends XDialogProperty {
             });
         }
         if (this.hasBackdrop && this.backdropClose && this.dialogRef?.overlayRef) {
-            this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose());
+            this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose('close'));
         }
     }
     setWidthHeight() {
@@ -307,24 +316,29 @@ class XDialogComponent extends XDialogProperty {
             this.maximize = false;
         }
     }
-    detach() {
-        if (this.portalAttached()) {
-            this.visible = false;
-            this.visibleChange.emit(this.visible);
-            this.dialogRef?.overlayRef?.detach();
-            this.unsubscribe();
-            this.close.emit();
-        }
-    }
     portalAttached() {
         return this.dialogRef?.overlayRef?.hasAttached();
     }
-    onClose() {
-        if (XIsFunction(this.beforeClose)) {
-            this.beforeClose();
+    onClose(action, execFunction = true) {
+        if (!this.portalAttached())
+            return;
+        if (XIsFunction(this.beforeClose) && execFunction) {
+            this.beforeClose(action);
+            this.action = action;
         }
         else {
-            this.detach();
+            this.visible = false;
+            this.visibleChange.emit(this.visible);
+            this.dialogRef?.overlayRef?.detach();
+            this.unsubscribe();
+            if ([action, this.action].includes('confirm')) {
+                this.confirm.emit();
+            }
+            if ([action, this.action].includes('cancel')) {
+                this.cancel.emit();
+            }
+            this.action = null;
+            this.close.emit();
         }
     }
     onDragEnded($event) {
@@ -388,14 +402,6 @@ class XDialogComponent extends XDialogProperty {
             }
         }
     }
-    onCancel() {
-        this.onClose();
-        this.cancel.emit();
-    }
-    onConfirm() {
-        this.onClose();
-        this.confirm.emit();
-    }
     moveDone($event) {
         if ($event.toState === 'void') {
             this.closeDone.emit($event);
@@ -415,24 +421,35 @@ class XDialogComponent extends XDialogProperty {
         const contentHeight = Number(this.initContentHeight) + Number(event.clientHeight) - Number(this.initHeight);
         this.renderer.setStyle(this.dialogContent, 'max-height', 'initial');
         this.renderer.setStyle(this.dialogContent, 'flex', 'initial');
-        this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
+        if (['top-start', 'top-end', 'bottom', 'top', 'bottom-start', 'bottom-end'].includes(event.direction)) {
+            this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
+        }
     }
 }
 /** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.XPortalService }, { token: i2.Overlay }, { token: i3.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose()\"\r\n      (dragEnded)=\"onDragEnded($event)\"\r\n      (resizing)=\"onResizing($event)\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"], components: [{ type: i4.XAlertComponent, selector: "x-alert" }, { type: i5.XButtonsComponent, selector: "x-buttons" }, { type: i5.XButtonComponent, selector: "x-button" }], directives: [{ type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose('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        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto;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}.x-dialog-container x-dialog{width:100%}\n"], components: [{ type: i4.XAlertComponent, selector: "x-alert" }, { type: i5.XButtonsComponent, selector: "x-buttons" }, { type: i5.XButtonComponent, selector: "x-button" }], directives: [{ type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose()\"\r\n      (dragEnded)=\"onDragEnded($event)\"\r\n      (resizing)=\"onResizing($event)\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"] }]
+            args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n  <div\r\n    class=\"x-dialog\"\r\n    [@x-move-box-animation]=\"placement\"\r\n    (@x-move-box-animation.done)=\"moveDone($event)\"\r\n    [class.x-dialog-maximize]=\"isMaximize\"\r\n    [class.x-dialog-resizable]=\"resizable\"\r\n    [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n  >\r\n    <x-alert\r\n      [draggable]=\"draggable && dialogBox['draggable']\"\r\n      [resizable]=\"resizable && dialogBox['resizable']\"\r\n      [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n      [offsetLeft]=\"offsetLeft\"\r\n      [offsetTop]=\"offsetTop\"\r\n      [minWidth]=\"dialogBox['minWidth']\"\r\n      [minHeight]=\"dialogBox['minHeight']\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      [operationTpl]=\"operationTpl\"\r\n      (close)=\"onClose('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        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n  <ng-container *ngIf=\"maximize || resizable\">\r\n    <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto;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}.x-dialog-container x-dialog{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1.XPortalService }, { type: i2.Overlay }, { type: i3.XI18nService }]; }, propDecorators: { dialogTpl: [{
                 type: ViewChild,
                 args: ['dialogTpl', { static: false }]
             }] } });
 
 class XDialogPortalComponent extends BasePortalOutlet {
-    constructor() {
+    constructor(renderer) {
         super();
-        this._has = true;
+        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 = {};
     }
     done({ toState, totalTime }) {
         this.animationChanged.next({ action: 'done', state: toState, totalTime });
@@ -440,6 +457,17 @@ class XDialogPortalComponent extends BasePortalOutlet {
     start({ toState, totalTime }) {
         this.animationChanged.next({ action: 'start', state: toState, totalTime });
     }
+    ngOnInit() {
+        this.dialogBox['draggable'] = this.defaultMaximize ? this.dialogBox['draggable'] : this.option.draggable;
+        this.dialogBox['resizable'] = this.defaultMaximize ? this.dialogBox['resizable'] : this.option.resizable;
+    }
+    ngAfterViewInit() {
+        let list = new QueryList();
+        for (let item of this.dialogRef.dragHandleRefs) {
+            list.reset([...list.toArray(), new CdkDragHandle(item, this.dragRef)]);
+        }
+        this.dragRef._handles = list;
+    }
     attachComponentPortal(portal) {
         if (this.portalOutlet.hasAttached()) {
             throw Error('dialog portal has attached');
@@ -452,16 +480,24 @@ class XDialogPortalComponent extends BasePortalOutlet {
         }
         return this.portalOutlet.attachTemplatePortal(portal);
     }
+    resizing(event) {
+        const contentHeight = Number(this.initContentHeight) + Number(event.clientHeight) - Number(this.initHeight);
+        this.renderer.setStyle(this.dialogContent, 'max-height', 'initial');
+        this.renderer.setStyle(this.dialogContent, 'flex', 'initial');
+        if (['top-start', 'top-end', 'bottom', 'top', 'bottom-start', 'bottom-end'].includes(event.direction)) {
+            this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
+        }
+    }
+    onDragEnded(event) {
+        this.distance = { x: this.distance.x + event.distance.x, y: this.distance.y + event.distance.y };
+    }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "class.x-dialog-portal": "this._has", "@x-move-box-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "@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"], directives: [{ type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.XResizableDirective, selector: "[xResizable]" }, { type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-dialog-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
-                type: HostBinding,
-                args: ['class.x-dialog-portal']
-            }], placement: [{
+            args: [{ selector: 'x-dialog-portal', 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: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { placement: [{
                 type: HostBinding,
                 args: ['@x-move-box-animation']
             }], done: [{
@@ -473,13 +509,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }], 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
 class XDialogRef {
-    constructor(overlayRef, containerInstance) {
+    constructor(overlayRef, containerInstance, renderer, portalService) {
         this.overlayRef = overlayRef;
         this.containerInstance = containerInstance;
+        this.renderer = renderer;
+        this.portalService = portalService;
+        this.fullscreen = false;
+        this.dragHandleRefs = [];
+        this._isFristFullscreen = true;
     }
     close() {
         this.containerInstance.animationChanged
@@ -489,6 +536,81 @@ class XDialogRef {
         });
         this.containerInstance.placement = 'void';
     }
+    onFullscreen() {
+        let { dialogBox, dialogRef, overlayElement, distance, hostElement, defaultMaximize } = this.containerInstance;
+        if (!dialogRef.fullscreen) {
+            dialogRef.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;
+            if (this.option.resizable) {
+                this.renderer.setStyle(overlayElement, 'margin', '0 0 0 0');
+            }
+            if (this.option.draggable) {
+                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;
+            if (this._isFristFullscreen && defaultMaximize) {
+                this.option.draggable = dialogBox['draggable'];
+                this.option.resizable = dialogBox['resizable'];
+            }
+            else {
+                dialogBox['draggable'] = this.option.draggable;
+                dialogBox['resizable'] = this.option.resizable;
+            }
+            dialogRef.overlayRef?.updateSize({
+                width: dialogBox['width'],
+                height: dialogBox['height'],
+                minWidth: dialogBox['minWidth'],
+                minHeight: dialogBox['minHeight']
+            });
+            dialogRef.fullscreen = false;
+            if (this.option.draggable) {
+                dialogBox['distance'] = { ...distance };
+            }
+            if (this.option.resizable) {
+                if (dialogBox['marginTop']) {
+                    this.renderer.setStyle(overlayElement, 'margin-top', `${dialogBox['marginTop']}`);
+                }
+                if (dialogBox['marginLeft']) {
+                    this.renderer.setStyle(overlayElement, 'margin-left', `${dialogBox['marginLeft']}`);
+                }
+                if (dialogBox['marginRight']) {
+                    this.renderer.setStyle(overlayElement, 'margin-right', `${dialogBox['marginRight']}`);
+                }
+                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.renderer.addClass(hostElement, PortalResizablePrefix);
+                setTimeout(() => {
+                    Object.assign(dialogBox, this.portalService.setResizable(overlayElement, this.option.placement));
+                    this.containerInstance.offsetLeft = overlayElement.offsetLeft;
+                    this.containerInstance.offsetTop = overlayElement.offsetTop;
+                    const dialogDraggable = overlayElement?.querySelector('.x-dialog-portal');
+                    this.containerInstance.initHeight = dialogDraggable.clientHeight;
+                    this.containerInstance.dialogContent = overlayElement?.querySelector('.x-dialog-portal-content');
+                    this.containerInstance.initContentHeight = this.containerInstance.dialogContent?.clientHeight;
+                    this.containerInstance.dialogBox = dialogBox;
+                });
+            }
+        }
+        this._isFristFullscreen = false;
+    }
 }
 
 class XDialogCloseDirective {
@@ -559,6 +681,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }], propDecorators: { _has: [{
                 type: HostBinding,
                 args: ['class.x-dialog-portal-actions']
+            }] } });
+class XDialogDragHandleDirective {
+    constructor(dialogRef, elementRef) {
+        this.dialogRef = dialogRef;
+        this.elementRef = elementRef;
+    }
+    get getDraggable() {
+        return !this.dialogRef.fullscreen && this.dialogRef.option.draggable;
+    }
+    ngOnInit() {
+        this.dialogRef.dragHandleRefs.push(this.elementRef);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XDialogDragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogDragHandleDirective, deps: [{ token: XDialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogDragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogDragHandleDirective, 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: "13.3.2", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-drag-handle], x-dialog-drag-handle`
+                }]
+        }], ctorParameters: function () { return [{ type: XDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { getDraggable: [{
+                type: HostBinding,
+                args: ['class.x-dialog-portal-drag-handle']
+            }] } });
+class XDialogFullscreenDirective {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    onFullscreenClick() {
+        this.dialogRef && this.dialogRef.onFullscreen();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XDialogFullscreenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogFullscreenDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDialogFullscreenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDialogFullscreenDirective, selector: "[x-dialog-fullscreen], x-dialog-fullscreen", host: { listeners: { "click": "onFullscreenClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-fullscreen], x-dialog-fullscreen`
+                }]
+        }], ctorParameters: function () { return [{ type: XDialogRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { onFullscreenClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class XDialogService {
@@ -571,10 +739,12 @@ class XDialogService {
             placement: 'center',
             offset: '1rem',
             width: '32rem',
+            minWidth: '18rem',
+            minHeight: '8rem',
             backdropClose: true,
-            hasBackdrop: true
-            // draggable: false,
-            // resizable: false
+            hasBackdrop: true,
+            draggable: false,
+            resizable: false
         };
         this.renderer = this.rendererFactory.createRenderer(null, null);
         this.configDefault = this.configService.getConfigForComponent(X_DIALOG_CONFIG_NAME);
@@ -591,16 +761,51 @@ class XDialogService {
                 scrollStrategy: this.overlay.scrollStrategies.block(),
                 width: option.width,
                 height: option.height,
+                minWidth: option.minWidth,
+                minHeight: option.minHeight,
                 positionStrategy: this.portalService.setPlace(option.placement, option.offset)
             }
         });
-        // if (option.resizable) {
-        //   this.renderer.addClass(portal.overlayRef?.hostElement, PortalResizablePrefix);
-        // }
         const { overlayRef, componentRef } = portal || {};
         const { instance } = componentRef || {};
+        const { hostElement, overlayElement } = overlayRef || {};
+        const dialogRef = new XDialogRef(overlayRef, instance, this.renderer, this.portalService);
+        let dialogBox = {
+            draggable: option.draggable,
+            resizable: option.resizable
+        };
+        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
+        });
         instance.placement = option.placement;
-        const dialogRef = new XDialogRef(overlayRef, instance);
+        instance.option = option;
+        instance.dialogRef = dialogRef;
+        instance.defaultMaximize = defaultMaximize;
+        instance.dialogBox = dialogBox;
+        instance.hostElement = hostElement;
+        instance.overlayElement = overlayElement;
+        dialogRef.option = option;
+        dialogRef.fullscreen = defaultMaximize;
+        if (option.resizable && !defaultMaximize) {
+            this.renderer.addClass(hostElement, PortalResizablePrefix);
+            setTimeout(() => {
+                Object.assign(dialogBox, this.portalService.setResizable(overlayElement, option.placement));
+                instance.offsetLeft = overlayElement.offsetLeft;
+                instance.offsetTop = overlayElement.offsetTop;
+                const dialogDraggable = overlayElement?.querySelector('.x-dialog-portal');
+                instance.initHeight = dialogDraggable.clientHeight;
+                instance.dialogContent = overlayElement?.querySelector('.x-dialog-portal-content');
+                instance.initContentHeight = instance.dialogContent?.clientHeight;
+                instance.dialogBox = dialogBox;
+            });
+        }
+        if (defaultMaximize) {
+            this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
+        }
         if (content instanceof TemplateRef) {
             instance.attachTemplatePortal(new TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, dialogRef: dialogRef }));
         }
@@ -619,12 +824,22 @@ class XDialogService {
         }
         return dialogRef;
     }
+    setMaximize(option = {}) {
+        const ws = ['100%', '100vw'];
+        const hs = ['100%', '100vh'];
+        if (ws.includes(option.width) && hs.includes(option.height)) {
+            option.resizable = false;
+            option.draggable = false;
+            return true;
+        }
+        return false;
+    }
 }
-/** @nocollapse */ /** @nocollapse */ XDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i2$1.XConfigService }, { token: i2.Overlay }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ XDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i2$2.XConfigService }, { token: i2.Overlay }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 /** @nocollapse */ /** @nocollapse */ XDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.XPortalService }, { type: i2$1.XConfigService }, { type: i2.Overlay }, { type: i0.RendererFactory2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1.XPortalService }, { type: i2$2.XConfigService }, { type: i2.Overlay }, { type: i0.RendererFactory2 }]; } });
 
 class XDialogModule {
 }
@@ -634,6 +849,8 @@ class XDialogModule {
         XDialogTitleDirective,
         XDialogContentDirective,
         XDialogActionsDirective,
+        XDialogDragHandleDirective,
+        XDialogFullscreenDirective,
         XDialogPortalComponent,
         XDialogProperty], imports: [CommonModule,
         FormsModule,
@@ -650,6 +867,8 @@ class XDialogModule {
         XDialogTitleDirective,
         XDialogContentDirective,
         XDialogActionsDirective,
+        XDialogDragHandleDirective,
+        XDialogFullscreenDirective,
         XDialogPortalComponent] });
 /** @nocollapse */ /** @nocollapse */ XDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogModule, providers: [XDialogService], imports: [[
             CommonModule,
@@ -673,6 +892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         XDialogTitleDirective,
                         XDialogContentDirective,
                         XDialogActionsDirective,
+                        XDialogDragHandleDirective,
+                        XDialogFullscreenDirective,
                         XDialogPortalComponent,
                         XDialogProperty
                     ],
@@ -682,6 +903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         XDialogTitleDirective,
                         XDialogContentDirective,
                         XDialogActionsDirective,
+                        XDialogDragHandleDirective,
+                        XDialogFullscreenDirective,
                         XDialogPortalComponent
                     ],
                     imports: [
@@ -705,5 +928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XDialogActionsDirective, XDialogCloseDirective, XDialogComponent, XDialogContainer, XDialogContentDirective, XDialogModule, XDialogPortalComponent, XDialogPrefix, XDialogProperty, XDialogRef, XDialogService, XDialogTitleDirective, X_DIALOG_CONFIG_NAME, X_DIALOG_DATA };
+export { XDialogActionsDirective, XDialogCloseDirective, XDialogComponent, XDialogContainer, XDialogContentDirective, XDialogDragHandleDirective, XDialogFullscreenDirective, XDialogModule, XDialogPortalComponent, XDialogPrefix, XDialogProperty, XDialogRef, XDialogService, XDialogTitleDirective, X_DIALOG_CONFIG_NAME, X_DIALOG_DATA };
 //# sourceMappingURL=ng-nest-ui-dialog.mjs.map