@ng-nest/ui 17.0.0 → 17.0.2

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Output, inject, NgModule } from '@angular/core';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { EventEmitter, Directive, Output, inject, ElementRef, Renderer2, NgModule } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -34,12 +34,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XDragDirective extends XDragProperty {
-    constructor(elementRef, renderer) {
-        super();
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+    constructor() {
+        super(...arguments);
         this._unSubject = new Subject();
         this.doc = inject(DOCUMENT);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     ngOnInit() {
         const mouseDown = fromEvent(this.elementRef.nativeElement, 'mousedown');
@@ -89,25 +89,24 @@ class XDragDirective extends XDragProperty {
         this._unSubject.next();
         this._unSubject.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDragDirective, selector: "[x-drag]", usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDragDirective, isStandalone: true, selector: "[x-drag]", usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[x-drag]' }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+            args: [{ selector: '[x-drag]', standalone: true }]
+        }] });
 
 class XDragModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XDragModule, declarations: [XDragDirective], imports: [CommonModule], exports: [XDragDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XDragModule, imports: [XDragDirective], exports: [XDragDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDragModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XDragDirective],
                     exports: [XDragDirective],
-                    imports: [CommonModule]
+                    imports: [XDragDirective]
                 }]
         }] });
 

package/fesm2022/ng-nest-ui-drag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-drag.mjs","sources":["../../../../lib/ng-nest/ui/drag/drag.property.ts","../../../../lib/ng-nest/ui/drag/drag.directive.ts","../../../../lib/ng-nest/ui/drag/drag.module.ts","../../../../lib/ng-nest/ui/drag/ng-nest-ui-drag.ts"],"sourcesContent":["import { Directive, EventEmitter, Output } from '@angular/core';\r\n\r\n/**\r\n * Drag 指令名称\r\n * @selector x-drag\r\n * @decorator Directive\r\n */\r\nexport const XDragPrefix = 'x-drag';\r\n\r\n/**\r\n * Resizable Property\r\n */\r\n@Directive({ selector: '[x-drag]' })\r\nexport class XDragProperty {\r\n  @Output() dragStarted = new EventEmitter<XDragDistance>();\r\n  @Output() dragMoved = new EventEmitter<XDragDistanceOffset>();\r\n  @Output() dragEnded = new EventEmitter<XDragDistance>();\r\n}\r\n\r\nexport interface XDragDistance {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\nexport interface XDragDistanceOffset extends XDragDistance {\r\n  offsetX: number;\r\n  offsetY: number;\r\n}\r\n","import { DOCUMENT } from '@angular/common';\r\nimport { Directive, ElementRef, Renderer2, inject } from '@angular/core';\r\nimport { fromEvent, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { XDragProperty } from './drag.property';\r\n\r\n@Directive({ selector: '[x-drag]' })\r\nexport class XDragDirective extends XDragProperty {\r\n  private _unSubject = new Subject<void>();\r\n  doc = inject(DOCUMENT);\r\n\r\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    const mouseDown = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown');\r\n\r\n    mouseDown.subscribe((downMe: MouseEvent) => {\r\n      let x = downMe.pageX;\r\n      let y = downMe.pageY;\r\n      let offsetX = 0;\r\n      let offsetY = 0;\r\n      const _unSub = new Subject<void>();\r\n      this.renderer.setStyle(this.doc.documentElement, 'cursor', 'ew-resize');\r\n      this.renderer.setStyle(this.doc.documentElement, 'user-select', 'none');\r\n      this.dragStarted.emit({ x, y });\r\n      fromEvent<MouseEvent>(this.doc.documentElement, 'mousemove')\r\n        .pipe(takeUntil(_unSub))\r\n        .subscribe((moveMe: MouseEvent) => {\r\n          offsetX = moveMe.pageX - x;\r\n          offsetY = moveMe.pageY - y;\r\n          x = moveMe.pageX;\r\n          y = moveMe.pageY;\r\n          this.dragMoved.emit({ x, y, offsetX, offsetY });\r\n        });\r\n      fromEvent<MouseEvent>(this.doc.documentElement, 'mouseup')\r\n        .pipe(takeUntil(_unSub))\r\n        .subscribe(() => {\r\n          this.renderer.removeStyle(this.doc.documentElement, 'cursor');\r\n          this.renderer.removeStyle(this.doc.documentElement, 'user-select');\r\n          this.dragEnded.emit({ x, y });\r\n          _unSub.next();\r\n          _unSub.complete();\r\n        });\r\n    });\r\n\r\n    // fromEvent(this.elementRef.nativeElement, 'mousedown')\r\n    //   .pipe(\r\n    //     tap((mouse: MouseEvent) => {\r\n    //       return { startX: mouse.clientX, startY: mouse.clientY };\r\n    //     }),\r\n    //     tap((x) => {\r\n    //       fromEvent(this.elementRef.nativeElement, 'mousemove').pipe()\r\n    //     }),\r\n    //     takeUntil(this._unSubject)\r\n    //   )\r\n    //   .subscribe((x) => {\r\n    //     console.log(x);\r\n    //   });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this._unSubject.next();\r\n    this._unSubject.complete();\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XDragDirective } from './drag.directive';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@NgModule({\r\n  declarations: [XDragDirective],\r\n  exports: [XDragDirective],\r\n  imports: [CommonModule]\r\n})\r\nexport class XDragModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-drag.mjs","sources":["../../../../lib/ng-nest/ui/drag/drag.property.ts","../../../../lib/ng-nest/ui/drag/drag.directive.ts","../../../../lib/ng-nest/ui/drag/drag.module.ts","../../../../lib/ng-nest/ui/drag/ng-nest-ui-drag.ts"],"sourcesContent":["import { Directive, EventEmitter, Output } from '@angular/core';\r\n\r\n/**\r\n * Drag 指令名称\r\n * @selector x-drag\r\n * @decorator Directive\r\n */\r\nexport const XDragPrefix = 'x-drag';\r\n\r\n/**\r\n * Resizable Property\r\n */\r\n@Directive({ selector: '[x-drag]' })\r\nexport class XDragProperty {\r\n  @Output() dragStarted = new EventEmitter<XDragDistance>();\r\n  @Output() dragMoved = new EventEmitter<XDragDistanceOffset>();\r\n  @Output() dragEnded = new EventEmitter<XDragDistance>();\r\n}\r\n\r\nexport interface XDragDistance {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\nexport interface XDragDistanceOffset extends XDragDistance {\r\n  offsetX: number;\r\n  offsetY: number;\r\n}\r\n","import { DOCUMENT } from '@angular/common';\r\nimport { Directive, ElementRef, OnDestroy, OnInit, Renderer2, inject } from '@angular/core';\r\nimport { fromEvent, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { XDragProperty } from './drag.property';\r\n\r\n@Directive({ selector: '[x-drag]', standalone: true })\r\nexport class XDragDirective extends XDragProperty implements OnInit, OnDestroy {\r\n  private _unSubject = new Subject<void>();\r\n  private doc = inject(DOCUMENT);\r\n  private elementRef = inject(ElementRef);\r\n  private renderer = inject(Renderer2);\r\n\r\n  ngOnInit() {\r\n    const mouseDown = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown');\r\n    mouseDown.subscribe((downMe: MouseEvent) => {\r\n      let x = downMe.pageX;\r\n      let y = downMe.pageY;\r\n      let offsetX = 0;\r\n      let offsetY = 0;\r\n      const _unSub = new Subject<void>();\r\n      this.renderer.setStyle(this.doc.documentElement, 'cursor', 'ew-resize');\r\n      this.renderer.setStyle(this.doc.documentElement, 'user-select', 'none');\r\n      this.dragStarted.emit({ x, y });\r\n      fromEvent<MouseEvent>(this.doc.documentElement, 'mousemove')\r\n        .pipe(takeUntil(_unSub))\r\n        .subscribe((moveMe: MouseEvent) => {\r\n          offsetX = moveMe.pageX - x;\r\n          offsetY = moveMe.pageY - y;\r\n          x = moveMe.pageX;\r\n          y = moveMe.pageY;\r\n          this.dragMoved.emit({ x, y, offsetX, offsetY });\r\n        });\r\n      fromEvent<MouseEvent>(this.doc.documentElement, 'mouseup')\r\n        .pipe(takeUntil(_unSub))\r\n        .subscribe(() => {\r\n          this.renderer.removeStyle(this.doc.documentElement, 'cursor');\r\n          this.renderer.removeStyle(this.doc.documentElement, 'user-select');\r\n          this.dragEnded.emit({ x, y });\r\n          _unSub.next();\r\n          _unSub.complete();\r\n        });\r\n    });\r\n\r\n    // fromEvent(this.elementRef.nativeElement, 'mousedown')\r\n    //   .pipe(\r\n    //     tap((mouse: MouseEvent) => {\r\n    //       return { startX: mouse.clientX, startY: mouse.clientY };\r\n    //     }),\r\n    //     tap((x) => {\r\n    //       fromEvent(this.elementRef.nativeElement, 'mousemove').pipe()\r\n    //     }),\r\n    //     takeUntil(this._unSubject)\r\n    //   )\r\n    //   .subscribe((x) => {\r\n    //     console.log(x);\r\n    //   });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this._unSubject.next();\r\n    this._unSubject.complete();\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { XDragDirective } from './drag.directive';\r\n\r\n@NgModule({\r\n  exports: [XDragDirective],\r\n  imports: [XDragDirective]\r\n})\r\nexport class XDragModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Optional, Inject, ViewChild, HostListener, Directive, TemplateRef, Injectable, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, inject, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, HostListener, Directive, NgModule, TemplateRef, Injectable } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i3 from '@ng-nest/ui/core';
-import { XProperty, XInputBoolean, XWithConfig, XIsChange, XClearClass, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
-import * as i1 from '@angular/cdk/overlay';
-import * as i2 from '@ng-nest/ui/portal';
-import { XPortalModule } from '@ng-nest/ui/portal';
-import * as i4 from '@angular/common';
+import { XProperty, XInputBoolean, XWithConfig, XConfigService, XIsChange, XClearClass, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
+import { XPortalService } from '@ng-nest/ui/portal';
+import { Overlay } from '@angular/cdk/overlay';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i6 from '@ng-nest/ui/button';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 import * as i1$1 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { filter, take } from 'rxjs';
 
 /**
@@ -103,49 +99,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             args: [{ selector: `${XDrawerContainerPrefix}-property`, template: '' }]
         }] });
 
-class XDrawerContainerComponent extends XDrawerContainerProperty {
-    constructor() {
-        super();
-        this._has = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerContainerComponent, selector: "x-drawer-container", host: { properties: { "class.x-drawer-container": "this._has" } }, providers: [
-            {
-                provide: X_DRAWER_CONTAINER,
-                useExisting: XDrawerContainerComponent
-            }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate3d(-100%,0,0);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate3d(100%,0,0);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translate3d(0,-100%,0);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translate3d(0,100%,0);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translateZ(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'x-drawer-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: X_DRAWER_CONTAINER,
-                            useExisting: XDrawerContainerComponent
-                        }
-                    ], template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate3d(-100%,0,0);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate3d(100%,0,0);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translate3d(0,-100%,0);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translate3d(0,100%,0);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translateZ(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _has: [{
-                type: HostBinding,
-                args: ['class.x-drawer-container']
-            }] } });
-
 class XDrawerComponent extends XDrawerProperty {
-    get getVisible() {
-        return this.visible;
-    }
-    constructor(renderer, elementRef, cdr, overlay, portalService, viewContainerRef, configService, container) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.overlay = overlay;
-        this.portalService = portalService;
-        this.viewContainerRef = viewContainerRef;
-        this.configService = configService;
-        this.container = container;
+    constructor() {
+        super(...arguments);
         this.back$ = null;
         this.width = '100%';
         this.height = '100%';
+        this.overlay = inject(Overlay);
+        this.portalService = inject(XPortalService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.container = inject(X_DRAWER_CONTAINER, { optional: true });
+        this.configService = inject(XConfigService);
+    }
+    get getVisible() {
+        return this.visible;
     }
     ngOnInit() {
         this.setClassMap();
@@ -223,18 +190,13 @@ class XDrawerComponent extends XDrawerProperty {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XConfigService }, { token: X_DRAWER_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerComponent, selector: "x-drawer", host: { properties: { "class.x-drawer-visible": "this.getVisible" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i6.XButtonComponent, selector: "x-button" }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerComponent, isStandalone: true, selector: "x-drawer", host: { properties: { "class.x-drawer-visible": "this.getVisible" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDrawerPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.XPortalService }, { type: i0.ViewContainerRef }, { type: i3.XConfigService }, { type: XDrawerContainerComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [X_DRAWER_CONTAINER]
-                }] }], propDecorators: { getVisible: [{
+            args: [{ selector: `${XDrawerPrefix}`, standalone: true, imports: [CommonModule, XOutletDirective, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"] }]
+        }], propDecorators: { getVisible: [{
                 type: HostBinding,
                 args: ['class.x-drawer-visible']
             }], drawerTpl: [{
@@ -243,17 +205,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XDrawerPortalComponent extends BasePortalOutlet {
+    constructor() {
+        super(...arguments);
+        this._has = true;
+        this.animationChanged = new EventEmitter();
+    }
     done({ toState, totalTime }) {
         this.animationChanged.next({ action: 'done', state: toState, totalTime });
     }
     start({ toState, totalTime }) {
         this.animationChanged.next({ action: 'start', state: toState, totalTime });
     }
-    constructor() {
-        super();
-        this._has = true;
-        this.animationChanged = new EventEmitter();
-    }
     attachComponentPortal(portal) {
         if (this.portalOutlet.hasAttached()) {
             throw Error('drawer portal has attached');
@@ -266,13 +228,13 @@ class XDrawerPortalComponent extends BasePortalOutlet {
         }
         return this.portalOutlet.attachTemplatePortal(portal);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerPortalComponent, selector: "x-drawer-portal", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-portal": "this._has", "@x-slide-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-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-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-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerPortalComponent, isStandalone: true, selector: "x-drawer-portal", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-portal": "this._has", "@x-slide-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-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-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-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-drawer-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-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-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _has: [{
+            args: [{ selector: 'x-drawer-portal', standalone: true, imports: [CommonModule, PortalModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-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-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"] }]
+        }], propDecorators: { _has: [{
                 type: HostBinding,
                 args: ['class.x-drawer-portal']
             }], placement: [{
@@ -306,23 +268,22 @@ class XDrawerRef {
 }
 
 class XDrawerCloseDirective {
+    constructor() {
+        this.drawerRef = inject(XDrawerRef, { optional: true });
+    }
     onCloseClick() {
         this.drawerRef && this.drawerRef.close();
     }
-    constructor(drawerRef) {
-        this.drawerRef = drawerRef;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerCloseDirective, deps: [{ token: XDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerCloseDirective, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerCloseDirective, isStandalone: true, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-drawer-close]`
+                    selector: `[x-drawer-close]`,
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: XDrawerRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { onCloseClick: [{
+        }], propDecorators: { onCloseClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -331,12 +292,13 @@ class XDrawerTitleDirective {
         this._has = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerTitleDirective, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-portal-title": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerTitleDirective, isStandalone: true, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-portal-title": "this._has" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-drawer-title]`
+                    selector: `[x-drawer-title]`,
+                    standalone: true
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
@@ -347,29 +309,90 @@ class XDrawerContentDirective {
         this._has = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerContentDirective, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-portal-content": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerContentDirective, isStandalone: true, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-portal-content": "this._has" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[x-drawer-content], x-drawer-content`
+                    selector: `[x-drawer-content], x-drawer-content`,
+                    standalone: true
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
                 args: ['class.x-drawer-portal-content']
             }] } });
 
+class XDrawerContainerComponent extends XDrawerContainerProperty {
+    constructor() {
+        super(...arguments);
+        this._has = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XDrawerContainerComponent, isStandalone: true, selector: "x-drawer-container", host: { properties: { "class.x-drawer-container": "this._has" } }, providers: [
+            {
+                provide: X_DRAWER_CONTAINER,
+                useExisting: XDrawerContainerComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate3d(-100%,0,0);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate3d(100%,0,0);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translate3d(0,-100%,0);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translate3d(0,100%,0);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translateZ(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-drawer-container', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: X_DRAWER_CONTAINER,
+                            useExisting: XDrawerContainerComponent
+                        }
+                    ], template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate3d(-100%,0,0);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate3d(100%,0,0);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translate3d(0,-100%,0);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translate3d(0,100%,0);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translateZ(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"] }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-drawer-container']
+            }] } });
+
+class XDrawerModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent,
+            XDrawerCloseDirective,
+            XDrawerTitleDirective,
+            XDrawerContentDirective,
+            XDrawerContainerComponent], exports: [XDrawerComponent,
+            XDrawerCloseDirective,
+            XDrawerTitleDirective,
+            XDrawerContentDirective,
+            XDrawerContainerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent,
+            XDrawerContainerComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        XDrawerComponent,
+                        XDrawerCloseDirective,
+                        XDrawerTitleDirective,
+                        XDrawerContentDirective,
+                        XDrawerContainerComponent
+                    ],
+                    imports: [
+                        XDrawerComponent,
+                        XDrawerCloseDirective,
+                        XDrawerTitleDirective,
+                        XDrawerContentDirective,
+                        XDrawerContainerComponent
+                    ]
+                }]
+        }] });
+
 class XDrawerService {
-    constructor(portalService, configService, overlay) {
-        this.portalService = portalService;
-        this.configService = configService;
-        this.overlay = overlay;
+    constructor() {
         this.default = {
             placement: 'right',
             size: '30%',
             hasBackdrop: true,
             backdropClose: true
         };
+        this.portalService = inject(XPortalService);
+        this.configService = inject(XConfigService);
+        this.overlay = inject(Overlay);
         this.configDefault = this.configService.getConfigForComponent(X_DRAWER_CONFIG_NAME);
         Object.assign(this.default, this.configDefault);
     }
@@ -407,55 +430,13 @@ class XDrawerService {
             });
         return drawerRef;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerService, deps: [{ token: i2.XPortalService }, { token: i3.XConfigService }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i2.XPortalService }, { type: i3.XConfigService }, { type: i1.Overlay }] });
-
-class XDrawerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, declarations: [XDrawerComponent,
-            XDrawerCloseDirective,
-            XDrawerTitleDirective,
-            XDrawerContentDirective,
-            XDrawerPortalComponent,
-            XDrawerContainerComponent,
-            XDrawerProperty,
-            XDrawerContainerProperty], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule], exports: [XDrawerComponent,
-            XDrawerCloseDirective,
-            XDrawerTitleDirective,
-            XDrawerContentDirective,
-            XDrawerPortalComponent,
-            XDrawerContainerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, providers: [XDrawerService], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XDrawerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        XDrawerComponent,
-                        XDrawerCloseDirective,
-                        XDrawerTitleDirective,
-                        XDrawerContentDirective,
-                        XDrawerPortalComponent,
-                        XDrawerContainerComponent,
-                        XDrawerProperty,
-                        XDrawerContainerProperty
-                    ],
-                    exports: [
-                        XDrawerComponent,
-                        XDrawerCloseDirective,
-                        XDrawerTitleDirective,
-                        XDrawerContentDirective,
-                        XDrawerPortalComponent,
-                        XDrawerContainerComponent
-                    ],
-                    imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule],
-                    providers: [XDrawerService]
-                }]
-        }] });
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.