@ng-nest/ui 17.0.11 → 18.0.0

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

@@ -1,15 +1,15 @@
 import * as i0 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 { XProperty, XInputBoolean, XWithConfig, XConfigService, XIsChange, XClearClass, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
+import { InjectionToken, input, model, output, Component, viewChild, computed, inject, ViewContainerRef, signal, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Directive, NgModule, TemplateRef, Injectable } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue, XToBoolean, XProperty, XIsEmpty, XSlideAnimation, XOpacityAnimation, XConfigService, XFillDefault } from '@ng-nest/ui/core';
 import { XPortalService } from '@ng-nest/ui/portal';
+import { Subject, takeUntil, filter, take } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
-import { filter, take } from 'rxjs';
 
 /**
  * Drawer
@@ -22,63 +22,57 @@ const X_DRAWER_DATA = new InjectionToken('XDrawerData');
 /**
  * Drawer Property
  */
-class XDrawerProperty extends XProperty {
+class XDrawerProperty extends XPropertyFunction(X_DRAWER_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
-         * @zh_CN 关闭的事件
-         * @en_US Closed event
+         * @zh_CN 标题
+         * @en_US Title
+         */
+        this.title = input();
+        /**
+         * @zh_CN 显示/隐藏
+         * @en_US Show/hide
+         */
+        this.visible = model(false);
+        /**
+         * @zh_CN 展示方向
+         * @en_US Display direction
+         */
+        this.placement = input(this.config?.placement ?? 'right');
+        /**
+         * @zh_CN 尺寸，支持固定值
+         * @en_US Size, supports fixed value
+         */
+        this.size = input(this.config?.size ?? '30%', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 点击遮罩关闭
+         * @en_US Click the mask to close
          */
-        this.close = new EventEmitter();
+        this.backdropClose = input(this.config?.backdropClose ?? true, { transform: XToBoolean });
         /**
-         * @zh_CN 显示/隐藏的事件
-         * @en_US Show/hide event
+         * @zh_CN 是否显示背景遮罩
+         * @en_US Whether to display the background mask
          */
-        this.visibleChange = new EventEmitter();
+        this.hasBackdrop = input(this.config?.hasBackdrop ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 自定义样式名
+         * @en_US Custom style name
+         */
+        this.className = input(this.config?.className ?? '');
+        /**
+         * @zh_CN 关闭的事件
+         * @en_US Closed event
+         */
+        this.close = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerProperty, selector: "x-drawer-property", inputs: { title: "title", visible: "visible", placement: "placement", size: "size", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XDrawerProperty, selector: "x-drawer-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", close: "close" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XDrawerProperty.prototype, "visible", void 0);
-__decorate([
-    XWithConfig(X_DRAWER_CONFIG_NAME, 'right')
-], XDrawerProperty.prototype, "placement", void 0);
-__decorate([
-    XWithConfig(X_DRAWER_CONFIG_NAME, '30%')
-], XDrawerProperty.prototype, "size", void 0);
-__decorate([
-    XWithConfig(X_DRAWER_CONFIG_NAME, true)
-], XDrawerProperty.prototype, "backdropClose", void 0);
-__decorate([
-    XWithConfig(X_DRAWER_CONFIG_NAME, true)
-], XDrawerProperty.prototype, "hasBackdrop", void 0);
-__decorate([
-    XWithConfig(X_DRAWER_CONFIG_NAME, '')
-], XDrawerProperty.prototype, "className", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDrawerPrefix}-property`, template: '' }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], backdropClose: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], visibleChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Drawer Container
  * @selector x-drawer-container
@@ -90,66 +84,49 @@ const X_DRAWER_CONTAINER = new InjectionToken('X_DRAWER_CONTAINER');
  * Drawer Container Property
  */
 class XDrawerContainerProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerContainerProperty, selector: "x-drawer-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XDrawerContainerProperty, selector: "x-drawer-container-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XDrawerContainerPrefix}-property`, template: '' }]
         }] });
 
 class XDrawerComponent extends XDrawerProperty {
+    get getVisible() {
+        return this.visible();
+    }
     constructor() {
-        super(...arguments);
+        super();
+        this.drawerTpl = viewChild.required('drawerTpl');
         this.back$ = null;
-        this.width = '100%';
-        this.height = '100%';
+        this.width = computed(() => {
+            return ['left', 'right'].includes(this.placement()) ? this.size() : '100%';
+        });
+        this.height = computed(() => {
+            return ['top', 'bottom'].includes(this.placement()) ? this.size() : '100%';
+        });
         this.overlay = inject(Overlay);
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.unSubject = new Subject();
         this.container = inject(X_DRAWER_CONTAINER, { optional: true });
-        this.configService = inject(XConfigService);
-    }
-    get getVisible() {
-        return this.visible;
-    }
-    ngOnInit() {
-        this.setClassMap();
-        this.setSize();
+        this.hasContainer = signal(false);
+        this.classMap = computed(() => ({
+            [`${XDrawerPrefix}-${this.placement()}`]: !XIsEmpty(this.placement()),
+            [`${XDrawerPrefix}-no-title`]: XIsEmpty(this.title())
+        }));
+        this.visibleChanged = toObservable(this.visible);
+        this.visibleChanged.pipe(takeUntil(this.unSubject)).subscribe(() => this.setVisible());
     }
-    ngOnChanges(simples) {
-        const { visible, placement } = simples;
-        XIsChange(visible) && this.setVisible();
-        if (XIsChange(placement)) {
-            this.setClassMap();
-            this.setSize();
-        }
+    ngAfterViewInit() {
+        this.hasContainer.set(!!this.container);
     }
     ngOnDestroy() {
-        this.unsubscribe();
-    }
-    unsubscribe() {
         this.back$?.unsubscribe();
     }
-    setClassMap() {
-        XClearClass(this.classMap);
-        this.classMap = {
-            [`${XDrawerPrefix}-${this.placement}`]: !XIsEmpty(this.placement),
-            [`${XDrawerPrefix}-no-title`]: XIsEmpty(this.title)
-        };
-    }
-    setSize() {
-        if (this.container)
-            [this.width, this.height] = this.getSize();
-    }
-    getSize() {
-        return [
-            this.placement === 'left' || this.placement === 'right' ? this.size : '100%',
-            this.placement === 'top' || this.placement === 'bottom' ? this.size : '100%'
-        ];
-    }
     setVisible() {
-        if (this.visible) {
+        if (this.visible()) {
             this.createPortal();
         }
         else {
@@ -157,56 +134,53 @@ class XDrawerComponent extends XDrawerProperty {
         }
     }
     createPortal() {
-        if (this.container)
+        if (this.hasContainer())
             return;
-        const [width, height] = this.getSize();
         this.portal = this.portalService.attach({
-            content: this.drawerTpl,
+            content: this.drawerTpl(),
             viewContainerRef: this.viewContainerRef,
             overlayConfig: {
-                hasBackdrop: true,
+                panelClass: this.className(),
+                hasBackdrop: this.hasBackdrop(),
                 scrollStrategy: this.overlay.scrollStrategies.block(),
-                positionStrategy: this.portalService.setPosition(this.placement, width, height)
+                positionStrategy: this.portalService.setPosition(this.placement(), this.width(), this.height())
             }
         });
-        if (this.portal.overlayRef)
+        if (this.portal.overlayRef && this.backdropClose()) {
             this.back$ = this.portal.overlayRef.backdropClick().subscribe(() => this.closePortal());
+        }
     }
     portalAttached() {
         return this.portal?.overlayRef?.hasAttached();
     }
     closePortal() {
         if (this.container) {
-            this.visibleChange.emit(this.visible);
             this.close.emit();
         }
         else {
             if (this.portalAttached()) {
                 this.portal?.overlayRef?.detach();
-                this.unsubscribe();
-                this.visibleChange.emit(this.visible);
+                this.back$?.unsubscribe();
                 this.close.emit();
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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  @if (container) {\r\n    <div class=\"x-drawer-backdrop\" (click)=\"closePortal()\"></div>\r\n  }\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    @if (title) {\r\n      <div class=\"x-drawer-header\">\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    }\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@if (container) {\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XDrawerComponent, isStandalone: true, selector: "x-drawer", host: { properties: { "class.x-drawer-visible": "this.getVisible" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  @if (hasContainer() && hasBackdrop()) {\r\n    <div class=\"x-drawer-backdrop\" (click)=\"closePortal()\"></div>\r\n  }\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap()\"\r\n    [style.width]=\"hasContainer() ? width() : '100%'\"\r\n    [style.height]=\"hasContainer() ? height() : '100%'\"\r\n    [class.x-drawer-visible]=\"visible()\"\r\n    [@x-slide-animation]=\"placement()\"\r\n  >\r\n    @if (title()) {\r\n      <div class=\"x-drawer-header\">\r\n        <div class=\"x-drawer-title\">\r\n          <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n        </div>\r\n        <x-button\r\n          size=\"small\"\r\n          class=\"x-drawer-close\"\r\n          icon=\"fto-x\"\r\n          type=\"text\"\r\n          (click)=\"closePortal()\"\r\n          closable\r\n        ></x-button>\r\n      </div>\r\n    }\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@if (hasContainer()) {\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n}\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow)}.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: 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, XOpacityAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDrawerPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XOutletDirective, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template #drawerTpl>\r\n  @if (container) {\r\n    <div class=\"x-drawer-backdrop\" (click)=\"closePortal()\"></div>\r\n  }\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    @if (title) {\r\n      <div class=\"x-drawer-header\">\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    }\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@if (container) {\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n}\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: [{
+            args: [{ selector: `${XDrawerPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, XOutletDirective, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation, XOpacityAnimation], template: "<ng-template #drawerTpl>\r\n  @if (hasContainer() && hasBackdrop()) {\r\n    <div class=\"x-drawer-backdrop\" (click)=\"closePortal()\"></div>\r\n  }\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap()\"\r\n    [style.width]=\"hasContainer() ? width() : '100%'\"\r\n    [style.height]=\"hasContainer() ? height() : '100%'\"\r\n    [class.x-drawer-visible]=\"visible()\"\r\n    [@x-slide-animation]=\"placement()\"\r\n  >\r\n    @if (title()) {\r\n      <div class=\"x-drawer-header\">\r\n        <div class=\"x-drawer-title\">\r\n          <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n        </div>\r\n        <x-button\r\n          size=\"small\"\r\n          class=\"x-drawer-close\"\r\n          icon=\"fto-x\"\r\n          type=\"text\"\r\n          (click)=\"closePortal()\"\r\n          closable\r\n        ></x-button>\r\n      </div>\r\n    }\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@if (hasContainer()) {\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n}\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow)}.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: () => [], propDecorators: { getVisible: [{
                 type: HostBinding,
                 args: ['class.x-drawer-visible']
-            }], drawerTpl: [{
-                type: ViewChild,
-                args: ['drawerTpl', { static: true }]
             }] } });
 
 class XDrawerPortalComponent extends BasePortalOutlet {
     constructor() {
         super(...arguments);
         this._has = true;
+        this.portalOutlet = viewChild.required(CdkPortalOutlet);
         this.animationChanged = new EventEmitter();
     }
     done({ toState, totalTime }) {
@@ -216,23 +190,23 @@ class XDrawerPortalComponent extends BasePortalOutlet {
         this.animationChanged.next({ action: 'start', state: toState, totalTime });
     }
     attachComponentPortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
+        if (this.portalOutlet().hasAttached()) {
             throw Error('drawer portal has attached');
         }
-        return this.portalOutlet.attachComponentPortal(portal);
+        return this.portalOutlet().attachComponentPortal(portal);
     }
     attachTemplatePortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
+        if (this.portalOutlet().hasAttached()) {
             throw Error('drawer portal has attached');
         }
-        return this.portalOutlet.attachTemplatePortal(portal);
+        return this.portalOutlet().attachTemplatePortal(portal);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: PortalModule }, { kind: "directive", type: i1.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: "18.0.1", ngImport: i0, type: XDrawerPortalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", 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, isSignal: 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-100);position:relative;box-shadow:var(--x-box-shadow);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: PortalModule }, { kind: "directive", type: i1.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.3.0", ngImport: i0, type: XDrawerPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-drawer-portal', standalone: true, imports: [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"] }]
+            args: [{ selector: 'x-drawer-portal', standalone: true, imports: [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-100);position:relative;box-shadow:var(--x-box-shadow);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']
@@ -245,9 +219,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }], start: [{
                 type: HostListener,
                 args: ['@x-slide-animation.start', ['$event']]
-            }], portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
             }] } });
 
 // TODO: add more function
@@ -273,10 +244,10 @@ class XDrawerCloseDirective {
     onCloseClick() {
         this.drawerRef && this.drawerRef.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerCloseDirective, isStandalone: true, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: XDrawerCloseDirective, isStandalone: true, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-close]`,
@@ -290,10 +261,10 @@ class XDrawerTitleDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerTitleDirective, isStandalone: true, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-portal-title": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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.3.0", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-title]`,
@@ -307,10 +278,10 @@ class XDrawerContentDirective {
     constructor() {
         this._has = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerContentDirective, isStandalone: true, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-portal-content": "this._has" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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.3.0", ngImport: i0, type: XDrawerContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-content], x-drawer-content`,
@@ -324,32 +295,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
 class XDrawerContainerComponent extends XDrawerContainerProperty {
     constructor() {
         super(...arguments);
-        this._has = true;
+        this.className = XDrawerContainerPrefix;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XDrawerContainerComponent, isStandalone: true, selector: "x-drawer-container", host: { properties: { "class.x-drawer-container": "this._has" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XDrawerContainerComponent, isStandalone: true, selector: "x-drawer-container", host: { properties: { "class": "this.className" } }, 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:#00000052;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.3.0", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-drawer-container', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: XDrawerContainerPrefix, standalone: true, 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:#00000052;transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"] }]
-        }], propDecorators: { _has: [{
+        }], propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.x-drawer-container']
+                args: ['class']
             }] } });
 
 class XDrawerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent,
             XDrawerCloseDirective,
             XDrawerTitleDirective,
             XDrawerContentDirective,
@@ -358,9 +329,9 @@ class XDrawerModule {
             XDrawerTitleDirective,
             XDrawerContentDirective,
             XDrawerContainerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerModule, imports: [XDrawerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -395,7 +366,7 @@ class XDrawerService {
         Object.assign(this.default, this.configDefault);
     }
     create(content, option = {}) {
-        fillDefault(option, this.default);
+        XFillDefault(option, this.default);
         const width = ['left', 'right'].includes(option.placement) ? option.size : '100%';
         const height = ['top', 'bottom'].includes(option.placement) ? option.size : '100%';
         const portal = this.portalService.attach({
@@ -428,10 +399,10 @@ class XDrawerService {
             });
         return drawerRef;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XDrawerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });