@ng-nest/ui 17.0.1 → 17.0.3

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

@@ -1,32 +1,21 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Optional, Inject, ViewChild, QueryList, HostListener, ContentChildren, Directive, TemplateRef, Injectable, NgModule } from '@angular/core';
-import * as i4 from '@ng-nest/ui/core';
-import { XInputBoolean, XWithConfig, XProperty, XIsChange, XClearClass, XIsEmpty, XIsFunction, XMoveBoxAnimation, XOpacityAnimation, fillDefault } from '@ng-nest/ui/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, Renderer2, inject, ElementRef, ChangeDetectorRef, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, QueryList, 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 * as i7 from '@ng-nest/ui/alert';
-import { XAlertProperty, XAlertModule } from '@ng-nest/ui/alert';
-import * as i1 from '@ng-nest/ui/portal';
-import { PortalResizablePrefix, XPortalModule } from '@ng-nest/ui/portal';
+import { XAlertProperty, XAlertComponent } from '@ng-nest/ui/alert';
+import { XPortalService, PortalResizablePrefix } 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 { map, takeUntil } from 'rxjs/operators';
-import * as i2 from '@angular/cdk/overlay';
-import * as i3 from '@ng-nest/ui/i18n';
-import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@ng-nest/ui/button';
-import { XButtonModule } from '@ng-nest/ui/button';
-import * as i8 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i2$1 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
-import * as i1$1 from '@angular/cdk/drag-drop';
+import { XButtonComponent, XButtonsComponent } from '@ng-nest/ui/button';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
+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 * as i3$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 { XResizableDirective } from '@ng-nest/ui/resizable';
 
 /**
  * Dialog
@@ -80,8 +69,8 @@ class XDialogProperty extends XAlertProperty {
          */
         this.closeDone = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: "17.0.7", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", 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 }); }
 }
 __decorate([
     XInputBoolean()
@@ -141,7 +130,7 @@ __decorate([
     XWithConfig(X_DIALOG_CONFIG_NAME, false),
     XInputBoolean()
 ], XDialogProperty.prototype, "maximize", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogPrefix}-property`, template: '' }]
         }], propDecorators: { visible: [{
@@ -212,41 +201,39 @@ 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.0.2", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDialogContainerProperty, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: XDialogContainerProperty, selector: "x-dialog-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDialogContainerPrefix}-property`, template: '' }]
         }] });
 
-class XDialogContainerComponent extends XDialogContainerProperty {
+class XDialogComponent extends XDialogProperty {
     constructor() {
-        super();
-        this._has = true;
+        super(...arguments);
+        this.locale = {};
+        this.initHeight = 0;
+        this.initContentHeight = 0;
+        this.isMaximize = false;
+        this.isDefaultMaximize = false;
+        this.dialogBox = {};
+        this.contentBox = {};
+        this.distance = { x: 0, y: 0 };
+        this.viewInit = false;
+        this.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.container = inject(X_DIALOG_CONTAINER, { optional: true });
+        this.configService = inject(XConfigService);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDialogContainerComponent, 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:rgba(0,0,0,.32)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'x-dialog-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: X_DIALOG_CONTAINER,
-                            useExisting: XDialogContainerComponent
-                        }
-                    ], 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:rgba(0,0,0,.32)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _has: [{
-                type: HostBinding,
-                args: ['class.x-dialog-container']
-            }] } });
-
-class XDialogComponent extends XDialogProperty {
     get getVisible() {
         return this.visible;
     }
@@ -267,32 +254,8 @@ class XDialogComponent extends XDialogProperty {
             }
             : {};
     }
-    constructor(renderer, elementRef, cdr, viewContainerRef, protalService, overlay, i18n, configService, container) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.viewContainerRef = viewContainerRef;
-        this.protalService = protalService;
-        this.overlay = overlay;
-        this.i18n = i18n;
-        this.configService = configService;
-        this.container = container;
-        this.locale = {};
-        this.initHeight = 0;
-        this.initContentHeight = 0;
-        this.isMaximize = false;
-        this.isDefaultMaximize = false;
-        this.dialogBox = {};
-        this.contentBox = {};
-        this.distance = { x: 0, y: 0 };
-        this.viewInit = false;
-        this.action = null;
-        this.containerInit = false;
-        this._unSubject = new Subject();
-        this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
-    }
     ngOnInit() {
+        this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
         this.i18n.localeChange
             .pipe(map((x) => x.dialog), takeUntil(this._unSubject))
             .subscribe((x) => {
@@ -512,18 +475,13 @@ class XDialogComponent extends XDialogProperty {
             this.renderer.setStyle(this.dialogContent, 'height', `${contentHeight}px`);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.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 }, { token: i4.XConfigService }, { token: X_DIALOG_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDialogComponent, 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  <div class=\"x-dialog-backdrop\" *ngIf=\"container && hasBackdrop\" [@x-opacity-animation]=\"visible\" (click)=\"onClose('close')\"></div>\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        <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\r\n<ng-container *ngIf=\"container && visible\">\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n</ng-container>\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}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.XButtonComponent, selector: "x-button" }, { kind: "component", type: i6.XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: i7.XAlertComponent, selector: "x-alert" }, { kind: "directive", type: i8.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: "17.0.7", ngImport: i0, type: XDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", 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:-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}\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.0.2", ngImport: i0, type: XDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation, XOpacityAnimation], template: "<ng-template #dialogTpl>\r\n  <div class=\"x-dialog-backdrop\" *ngIf=\"container && hasBackdrop\" [@x-opacity-animation]=\"visible\" (click)=\"onClose('close')\"></div>\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        <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\r\n<ng-container *ngIf=\"container && visible\">\r\n  <ng-container *ngTemplateOutlet=\"dialogTpl\"></ng-container>\r\n</ng-container>\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}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1.XPortalService }, { type: i2.Overlay }, { type: i3.XI18nService }, { type: i4.XConfigService }, { type: XDialogContainerComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [X_DIALOG_CONTAINER]
-                }] }], 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]=\"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:-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}\n"] }]
+        }], propDecorators: { getVisible: [{
                 type: HostBinding,
                 args: ['class.x-dialog-visible']
             }], dialogTpl: [{
@@ -531,12 +489,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                 args: ['dialogTpl']
             }] } });
 
+class XDialogContainerComponent extends XDialogContainerProperty {
+    constructor() {
+        super(...arguments);
+        this._has = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", 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:rgba(0,0,0,.32)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-dialog-container', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: X_DIALOG_CONTAINER,
+                            useExisting: XDialogContainerComponent
+                        }
+                    ], 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:rgba(0,0,0,.32)}\n"] }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-dialog-container']
+            }] } });
+
 class XDialogPortalComponent extends BasePortalOutlet {
     done({ toState, totalTime }) {
-        this.animationChanged.next({ action: 'done', state: toState, totalTime });
+        this.animationChanged.next({
+            action: 'done',
+            state: toState,
+            totalTime
+        });
     }
     start({ toState, totalTime }) {
-        this.animationChanged.next({ action: 'start', state: toState, totalTime });
+        this.animationChanged.next({
+            action: 'start',
+            state: toState,
+            totalTime
+        });
     }
     constructor(renderer) {
         super();
@@ -589,14 +581,17 @@ class XDialogPortalComponent extends BasePortalOutlet {
         }
     }
     onDragEnded(event) {
-        this.distance = { x: this.distance.x + event.distance.x, y: this.distance.y + event.distance.y };
+        this.distance = {
+            x: this.distance.x + event.distance.x,
+            y: this.distance.y + event.distance.y
+        };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogPortalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.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"], dependencies: [{ kind: "directive", 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"] }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i3$1.XResizableDirective, selector: "[xResizable]" }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogPortalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogPortalComponent, decorators: [{
             type: Component,
-            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"] }]
+            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: [{
                 type: HostBinding,
                 args: ['@x-move-box-animation']
@@ -716,23 +711,22 @@ class XDialogRef {
 }
 
 class XDialogCloseDirective {
+    constructor() {
+        this.dialogRef = inject((XDialogRef), { optional: true });
+    }
     onCloseClick() {
         this.dialogRef && this.dialogRef.close();
     }
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogCloseDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogCloseDirective, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: XDialogCloseDirective, isStandalone: true, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogCloseDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-close]`
+                    selector: `[x-dialog-close]`,
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: XDialogRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { onCloseClick: [{
+        }], propDecorators: { onCloseClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -740,13 +734,14 @@ class XDialogTitleDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogTitleDirective, 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: "17.0.7", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: XDialogTitleDirective, isStandalone: true, selector: "[x-dialog-title]", host: { properties: { "class.x-dialog-portal-title": "this._has" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-title]`
+                    selector: `[x-dialog-title]`,
+                    standalone: true
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -756,13 +751,14 @@ class XDialogContentDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogContentDirective, 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: "17.0.7", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", 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.0.2", ngImport: i0, type: XDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-content], x-dialog-content`
+                    selector: `[x-dialog-content], x-dialog-content`,
+                    standalone: true
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -772,71 +768,111 @@ class XDialogActionsDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogActionsDirective, 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: "17.0.7", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", 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.0.2", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-actions], x-dialog-actions`
+                    selector: `[x-dialog-actions], x-dialog-actions`,
+                    standalone: true
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
                 args: ['class.x-dialog-portal-actions']
             }] } });
 class XDialogDragHandleDirective {
-    get getDraggable() {
-        return !this.dialogRef.fullscreen && this.dialogRef.option.draggable;
+    constructor() {
+        this.dialogRef = inject((XDialogRef), { optional: true });
+        this.elementRef = inject(ElementRef);
     }
-    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);
+        this.dialogRef?.dragHandleRefs.push(this.elementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogDragHandleDirective, deps: [{ token: XDialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogDragHandleDirective, 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: "17.0.7", ngImport: i0, type: XDialogDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", 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.0.2", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-drag-handle], x-dialog-drag-handle`
+                    selector: `[x-dialog-drag-handle], x-dialog-drag-handle`,
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: XDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }], propDecorators: { getDraggable: [{
+        }], propDecorators: { getDraggable: [{
                 type: HostBinding,
                 args: ['class.x-dialog-portal-drag-handle']
             }] } });
 class XDialogFullscreenDirective {
+    constructor() {
+        this.dialogRef = inject((XDialogRef), { optional: true });
+    }
     onFullscreenClick() {
         this.dialogRef && this.dialogRef.onFullscreen();
     }
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogFullscreenDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDialogFullscreenDirective, 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: "17.0.7", ngImport: i0, type: XDialogFullscreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", 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.0.2", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogFullscreenDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-dialog-fullscreen], x-dialog-fullscreen`
+                    selector: `[x-dialog-fullscreen], x-dialog-fullscreen`,
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: XDialogRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { onFullscreenClick: [{
+        }], propDecorators: { onFullscreenClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
 
+class XDialogModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: XDialogModule, imports: [XDialogComponent,
+            XDialogContainerComponent,
+            XDialogCloseDirective,
+            XDialogTitleDirective,
+            XDialogContentDirective,
+            XDialogActionsDirective,
+            XDialogDragHandleDirective,
+            XDialogFullscreenDirective], exports: [XDialogComponent,
+            XDialogContainerComponent,
+            XDialogCloseDirective,
+            XDialogTitleDirective,
+            XDialogContentDirective,
+            XDialogActionsDirective,
+            XDialogDragHandleDirective,
+            XDialogFullscreenDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogModule, imports: [XDialogComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        XDialogComponent,
+                        XDialogContainerComponent,
+                        XDialogCloseDirective,
+                        XDialogTitleDirective,
+                        XDialogContentDirective,
+                        XDialogActionsDirective,
+                        XDialogDragHandleDirective,
+                        XDialogFullscreenDirective
+                    ],
+                    imports: [
+                        XDialogComponent,
+                        XDialogContainerComponent,
+                        XDialogCloseDirective,
+                        XDialogTitleDirective,
+                        XDialogContentDirective,
+                        XDialogActionsDirective,
+                        XDialogDragHandleDirective,
+                        XDialogFullscreenDirective
+                    ]
+                }]
+        }] });
+
 class XDialogService {
-    constructor(portalService, configService, overlay, rendererFactory) {
-        this.portalService = portalService;
-        this.configService = configService;
-        this.overlay = overlay;
-        this.rendererFactory = rendererFactory;
+    constructor() {
         this.default = {
             placement: 'center',
             offset: '1rem',
@@ -848,6 +884,10 @@ class XDialogService {
             draggable: false,
             resizable: false
         };
+        this.portalService = inject(XPortalService);
+        this.configService = inject(XConfigService);
+        this.overlay = inject(Overlay);
+        this.rendererFactory = inject(RendererFactory2);
         this.renderer = this.rendererFactory.createRenderer(null, null);
         this.configDefault = this.configService.getConfigForComponent(X_DIALOG_CONFIG_NAME);
         Object.assign(this.default, this.configDefault);
@@ -936,102 +976,13 @@ class XDialogService {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i4.XConfigService }, { token: i2.Overlay }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.XPortalService }, { type: i4.XConfigService }, { type: i2.Overlay }, { type: i0.RendererFactory2 }] });
-
-class XDialogModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XDialogModule, declarations: [XDialogComponent,
-            XDialogContainerComponent,
-            XDialogCloseDirective,
-            XDialogTitleDirective,
-            XDialogContentDirective,
-            XDialogActionsDirective,
-            XDialogDragHandleDirective,
-            XDialogFullscreenDirective,
-            XDialogPortalComponent,
-            XDialogProperty,
-            XDialogContainerProperty], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DragDropModule,
-            XInputModule,
-            XButtonModule,
-            XIconModule,
-            XPortalModule,
-            XAlertModule,
-            XOutletModule,
-            XResizableModule,
-            XI18nModule], exports: [XDialogComponent,
-            XDialogContainerComponent,
-            XDialogCloseDirective,
-            XDialogTitleDirective,
-            XDialogContentDirective,
-            XDialogActionsDirective,
-            XDialogDragHandleDirective,
-            XDialogFullscreenDirective,
-            XDialogPortalComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogModule, providers: [XDialogService], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DragDropModule,
-            XInputModule,
-            XButtonModule,
-            XIconModule,
-            XPortalModule,
-            XAlertModule,
-            XOutletModule,
-            XResizableModule,
-            XI18nModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        XDialogComponent,
-                        XDialogContainerComponent,
-                        XDialogCloseDirective,
-                        XDialogTitleDirective,
-                        XDialogContentDirective,
-                        XDialogActionsDirective,
-                        XDialogDragHandleDirective,
-                        XDialogFullscreenDirective,
-                        XDialogPortalComponent,
-                        XDialogProperty,
-                        XDialogContainerProperty
-                    ],
-                    exports: [
-                        XDialogComponent,
-                        XDialogContainerComponent,
-                        XDialogCloseDirective,
-                        XDialogTitleDirective,
-                        XDialogContentDirective,
-                        XDialogActionsDirective,
-                        XDialogDragHandleDirective,
-                        XDialogFullscreenDirective,
-                        XDialogPortalComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DragDropModule,
-                        XInputModule,
-                        XButtonModule,
-                        XIconModule,
-                        XPortalModule,
-                        XAlertModule,
-                        XOutletModule,
-                        XResizableModule,
-                        XI18nModule
-                    ],
-                    providers: [XDialogService]
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.