@ng-nest/ui 13.0.3 → 13.0.7

package/alert/alert.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { OnInit, ChangeDetectorRef, OnDestroy, SimpleChanges } from '@angular/core';
 import { XAlertProperty } from './alert.property';
 import { XConfigService } from '@ng-nest/ui/core';
 import * as i0 from "@angular/core";
@@ -9,6 +9,7 @@ export declare class XAlertComponent extends XAlertProperty implements OnInit, O
     constructor(cdr: ChangeDetectorRef, configService: XConfigService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     setClassMap(): void;
     setDuration(): void;
     onClose(): void;

package/core/config/config.d.ts

@@ -1,4 +1,4 @@
-import { XSize, XBoolean, XType, XEffect, XNumber, XPositionLeftRight, XJustify, XShape, XFit, XShadow, XTrigger, XDisplayDirection, XCorner, XDirection, XPlace, XPosition, XPlacement, XPositionTopBottom, XStatus } from '../interfaces';
+import { XSize, XBoolean, XType, XEffect, XNumber, XPositionLeftRight, XJustify, XShape, XFit, XShadow, XTrigger, XDisplayDirection, XCorner, XDirection, XPlace, XPosition, XPlacement, XPositionTopBottom, XStatus, XAlign } from '../interfaces';
 import { InjectionToken } from '@angular/core';
 import { XTheme } from '../theme';
 export interface XConfig {
@@ -220,6 +220,9 @@ export interface XDialogConfig {
 export interface XDrawerConfig {
     placement?: XPosition;
     size?: string;
+    backdropClose?: XBoolean;
+    hasBackdrop?: XBoolean;
+    className?: string;
 }
 export interface XDropdownConfig {
     trigger?: XTrigger;
@@ -237,6 +240,9 @@ export interface XFindConfig {
     bordered?: XBoolean;
     columnLabel?: string;
     dialogTitle?: string;
+    dialogCheckboxLabel?: string;
+    dialogCheckboxWidth?: number;
+    dialogEmptyContent?: string;
     dialogButtonsCenter?: XBoolean;
     tableIndex?: number;
     tableSize?: number;
@@ -295,6 +301,7 @@ export interface XLoadingConfig {
 }
 export interface XMenuConfig {
     size?: XSize;
+    width?: string;
     trigger?: XTrigger;
 }
 export interface XMessageConfig {
@@ -353,6 +360,7 @@ export interface XPortalConfig {
 }
 export interface XProgressConfing {
     height?: string;
+    stepWidth?: string;
 }
 export interface XRadioConfig {
     size?: XSize;
@@ -434,6 +442,8 @@ export interface XTransferConfig {
 export interface XTreeConfig {
     spacing?: XNumber;
     nodeHeight?: XNumber;
+    nodeAlignItems?: XAlign;
+    virtualScroll?: boolean;
 }
 export interface XTextareaConfig {
     clearable?: XBoolean;

package/core/interfaces/layout.type.d.ts

@@ -17,7 +17,7 @@ export declare type XType = 'initial' | 'primary' | 'success' | 'info' | 'warnin
 /**
  * 状态类型
  */
-export declare type XStatus = 'success' | 'info' | 'warning' | 'error';
+export declare type XStatus = 'success' | 'info' | 'warning' | 'error' | 'loading';
 /**
  * 样式映射类型
  */

package/dialog/dialog-portal.component.d.ts

@@ -0,0 +1,18 @@
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ComponentRef, EmbeddedViewRef, EventEmitter } from '@angular/core';
+import { XDialogAnimationEvent, XDialogAnimationState } from './dialog.property';
+import { AnimationEvent } from '@angular/animations';
+import * as i0 from "@angular/core";
+export declare class XDialogPortalComponent extends BasePortalOutlet {
+    _has: boolean;
+    placement?: XDialogAnimationState;
+    done({ toState, totalTime }: AnimationEvent): void;
+    start({ toState, totalTime }: AnimationEvent): void;
+    portalOutlet: CdkPortalOutlet;
+    animationChanged: EventEmitter<XDialogAnimationEvent>;
+    constructor();
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogPortalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDialogPortalComponent, "x-dialog-portal", never, {}, {}, never, never>;
+}

package/dialog/dialog-portal.directives.d.ts

@@ -0,0 +1,24 @@
+import { XDialogRef } from './dialog-ref';
+import * as i0 from "@angular/core";
+export declare class XDialogCloseDirective {
+    dialogRef: XDialogRef<any>;
+    onCloseClick(): void;
+    constructor(dialogRef: XDialogRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogCloseDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDialogCloseDirective, "[x-dialog-close]", never, {}, {}, never>;
+}
+export declare class XDialogTitleDirective {
+    _has: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDialogTitleDirective, "[x-dialog-title]", never, {}, {}, never>;
+}
+export declare class XDialogContentDirective {
+    _has: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDialogContentDirective, "[x-dialog-content], x-dialog-content", never, {}, {}, never>;
+}
+export declare class XDialogActionsDirective {
+    _has: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDialogActionsDirective, "[x-dialog-actions], x-dialog-actions", never, {}, {}, never>;
+}

package/dialog/dialog-ref.d.ts

@@ -0,0 +1,9 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { XDialogPortalComponent } from './dialog-portal.component';
+export declare class XDialogRef<C> {
+    overlayRef: OverlayRef;
+    containerInstance: XDialogPortalComponent;
+    componentInstance: C;
+    constructor(overlayRef: OverlayRef, containerInstance: XDialogPortalComponent);
+    close(): void;
+}

package/dialog/dialog.module.d.ts

@@ -1,17 +1,19 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./dialog.component";
-import * as i2 from "./dialog.property";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@angular/cdk/drag-drop";
-import * as i6 from "@ng-nest/ui/input";
-import * as i7 from "@ng-nest/ui/button";
-import * as i8 from "@ng-nest/ui/icon";
-import * as i9 from "@ng-nest/ui/portal";
-import * as i10 from "@ng-nest/ui/alert";
-import * as i11 from "@ng-nest/ui/outlet";
+import * as i2 from "./dialog-portal.directives";
+import * as i3 from "./dialog-portal.component";
+import * as i4 from "./dialog.property";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/cdk/drag-drop";
+import * as i8 from "@ng-nest/ui/input";
+import * as i9 from "@ng-nest/ui/button";
+import * as i10 from "@ng-nest/ui/icon";
+import * as i11 from "@ng-nest/ui/portal";
+import * as i12 from "@ng-nest/ui/alert";
+import * as i13 from "@ng-nest/ui/outlet";
 export declare class XDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<XDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<XDialogModule, [typeof i1.XDialogComponent, typeof i2.XDialogProperty], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.DragDropModule, typeof i6.XInputModule, typeof i7.XButtonModule, typeof i8.XIconModule, typeof i9.XPortalModule, typeof i10.XAlertModule, typeof i11.XOutletModule], [typeof i1.XDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XDialogModule, [typeof i1.XDialogComponent, typeof i2.XDialogCloseDirective, typeof i2.XDialogTitleDirective, typeof i2.XDialogContentDirective, typeof i2.XDialogActionsDirective, typeof i3.XDialogPortalComponent, typeof i4.XDialogProperty], [typeof i5.CommonModule, typeof i6.FormsModule, typeof i6.ReactiveFormsModule, typeof i7.DragDropModule, typeof i8.XInputModule, typeof i9.XButtonModule, typeof i10.XIconModule, typeof i11.XPortalModule, typeof i12.XAlertModule, typeof i13.XOutletModule], [typeof i1.XDialogComponent, typeof i2.XDialogCloseDirective, typeof i2.XDialogTitleDirective, typeof i2.XDialogContentDirective, typeof i2.XDialogActionsDirective, typeof i3.XDialogPortalComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<XDialogModule>;
 }

package/dialog/dialog.property.d.ts

@@ -1,8 +1,9 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ViewContainerRef, InjectionToken } from '@angular/core';
 import { XStatus, XPlace, XTemplate, XEffect, XBoolean } from '@ng-nest/ui/core';
 import { XAlertProperty, XAlertOption } from '@ng-nest/ui/alert';
 import { XPortalOverlayRef } from '@ng-nest/ui/portal';
 import { XDialogComponent } from './dialog.component';
+import { XDialogPortalComponent } from './dialog-portal.component';
 import * as i0 from "@angular/core";
 /**
  * Dialog
@@ -10,7 +11,9 @@ import * as i0 from "@angular/core";
  * @decorator component
  */
 export declare const XDialogPrefix = "x-dialog";
-export declare const XDialogPortal = "x-dialog-portal";
+export declare const X_DIALOG_CONFIG_NAME = "dialog";
+export declare const XDialogContainer = "x-dialog-container";
+export declare const X_DIALOG_DATA: InjectionToken<any>;
 /**
  * Dialog Property
  */
@@ -217,19 +220,94 @@ export interface XDialogOption extends XAlertOption {
      */
     beforeClose?: Function;
 }
+/**
+ * Dialog option by service
+ */
+export interface XDialogRefOption {
+    /**
+     * @zh_CN 展示方向
+     * @en_US Display direction
+     * @default 'center'
+     * @withConfig true
+     */
+    placement?: XPlace;
+    /**
+     * @zh_CN 偏移距离
+     * @en_US Offset distance
+     * @default '1rem'
+     * @withConfig true
+     */
+    offset?: string;
+    /**
+     * @zh_CN 宽度
+     * @en_US Width
+     * @default '32rem'
+     * @withConfig true
+     */
+    width?: string;
+    /**
+     * @zh_CN 高度
+     * @en_US Height
+     */
+    height?: string;
+    /**
+     * @zh_CN 自定义样式名
+     * @en_US Custom style name
+     */
+    className?: string;
+    /**
+     * @zh_CN 点击遮罩关闭
+     * @en_US Click the mask to close
+     * @default true
+     * @withConfig true
+     */
+    backdropClose?: boolean;
+    /**
+     * @zh_CN 是否显示背景遮罩
+     * @en_US Whether to display the background mask
+     * @default true
+     * @withConfig true
+     */
+    hasBackdrop?: boolean;
+    /**
+     * @zh_CN 拖动对话框
+     * @en_US Drag dialog
+     * @default false
+     * @withConfig true
+     */
+    draggable?: boolean;
+    /**
+     * @zh_CN 数据，通过 "@Inject(X_DIALOG_DATA)" 来接收数据
+     * @en_US Data. Receive data by "@Inject(X_DIALOG_DATA)"
+     */
+    data?: any;
+    /**
+     * @en_US 视图容器实例可以包含其他视图容器。
+     * @en_US A view container instance can contain other view containers.
+     */
+    viewContainerRef?: ViewContainerRef;
+}
+export declare type XDialogAnimationState = XPlace | 'void';
+export interface XDialogAnimationEvent {
+    state: XDialogAnimationState;
+    action: 'start' | 'done';
+    totalTime: number;
+}
 export interface XDialogCallback {
     (action: XDialogAction, message?: string): void;
 }
 export declare type XDialogAction = 'confirm' | 'cancel';
 /**
- * @zh_CN 创建的消息对象
- * @en_US Message object created
+ * @zh_CN 创建的弹框对象
+ * @en_US Dialog object created
  */
 export interface XDialogOverlayRef extends XPortalOverlayRef<XDialogComponent> {
 }
-export interface XDialogRef {
-    ref?: XDialogOverlayRef;
-    input?: XDialogProperty;
+/**
+ * @zh_CN 创建的弹框对象，通过服务
+ * @en_US Dialog object created by service
+ */
+export interface XDialogPortalOverlayRef extends XPortalOverlayRef<XDialogPortalComponent> {
 }
 /**
  * @zh_CN 类型

package/dialog/dialog.service.d.ts

@@ -0,0 +1,19 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentType } from '@angular/cdk/portal';
+import { TemplateRef } from '@angular/core';
+import { XConfigService, XDialogConfig } from '@ng-nest/ui/core';
+import { XPortalService } from '@ng-nest/ui/portal';
+import { XDialogRef } from './dialog-ref';
+import { XDialogRefOption } from './dialog.property';
+import * as i0 from "@angular/core";
+export declare class XDialogService {
+    portalService: XPortalService;
+    configService: XConfigService;
+    overlay: Overlay;
+    default: XDialogRefOption;
+    configDefault?: XDialogConfig;
+    constructor(portalService: XPortalService, configService: XConfigService, overlay: Overlay);
+    create<T>(content: TemplateRef<any> | ComponentType<T>, option?: XDialogRefOption): XDialogRef<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<XDialogService>;
+}

package/dialog/examples/en_US/default/service/README.md

@@ -0,0 +1,6 @@
+---
+order: 4
+label: 'Service'
+---
+
+Create a dialog through the `XDialogService` service.

package/dialog/examples/zh_CN/default/service/README.md

@@ -0,0 +1,6 @@
+---
+order: 4
+label: '服务创建'
+---
+
+通过 `XDialogService` 服务创建对话框。

package/dialog/public-api.d.ts

@@ -1,3 +1,7 @@
 export * from './dialog.component';
+export * from './dialog-portal.component';
+export * from './dialog-portal.directives';
 export * from './dialog.module';
 export * from './dialog.property';
+export * from './dialog.service';
+export * from './dialog-ref';

package/drawer/drawer-container.component.d.ts

@@ -0,0 +1,8 @@
+import { XDrawerContainerProperty } from './drawer.property';
+import * as i0 from "@angular/core";
+export declare class XDrawerContainerComponent extends XDrawerContainerProperty {
+    _has: boolean;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerContainerComponent, "x-drawer-container", never, {}, {}, never, ["*"]>;
+}

package/drawer/drawer-portal.component.d.ts

@@ -0,0 +1,18 @@
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ComponentRef, EmbeddedViewRef, EventEmitter } from '@angular/core';
+import { XDrawerAnimationEvent, XDrawerAnimationState } from './drawer.property';
+import { AnimationEvent } from '@angular/animations';
+import * as i0 from "@angular/core";
+export declare class XDrawerPortalComponent extends BasePortalOutlet {
+    _has: boolean;
+    placement?: XDrawerAnimationState;
+    done({ toState, totalTime }: AnimationEvent): void;
+    start({ toState, totalTime }: AnimationEvent): void;
+    portalOutlet: CdkPortalOutlet;
+    animationChanged: EventEmitter<XDrawerAnimationEvent>;
+    constructor();
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerPortalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerPortalComponent, "x-drawer-portal", never, {}, {}, never, never>;
+}

package/drawer/drawer-portal.directives.d.ts

@@ -0,0 +1,19 @@
+import { XDrawerRef } from './drawer-ref';
+import * as i0 from "@angular/core";
+export declare class XDrawerCloseDirective {
+    drawerRef: XDrawerRef<any>;
+    onCloseClick(): void;
+    constructor(drawerRef: XDrawerRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerCloseDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDrawerCloseDirective, "[x-drawer-close]", never, {}, {}, never>;
+}
+export declare class XDrawerTitleDirective {
+    _has: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDrawerTitleDirective, "[x-drawer-title]", never, {}, {}, never>;
+}
+export declare class XDrawerContentDirective {
+    _has: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XDrawerContentDirective, "[x-drawer-content], x-drawer-content", never, {}, {}, never>;
+}

package/drawer/drawer-ref.d.ts

@@ -0,0 +1,9 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { XDrawerPortalComponent } from './drawer-portal.component';
+export declare class XDrawerRef<C> {
+    overlayRef: OverlayRef;
+    containerInstance: XDrawerPortalComponent;
+    componentInstance: C;
+    constructor(overlayRef: OverlayRef, containerInstance: XDrawerPortalComponent);
+    close(): void;
+}

package/drawer/drawer.component.d.ts

@@ -4,6 +4,7 @@ import { XConfigService } from '@ng-nest/ui/core';
 import { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';
 import { Subscription } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
+import { XDrawerContainerComponent } from './drawer-container.component';
 import * as i0 from "@angular/core";
 export declare class XDrawerComponent extends XDrawerProperty implements OnInit, OnChanges {
     renderer: Renderer2;
@@ -13,19 +14,25 @@ export declare class XDrawerComponent extends XDrawerProperty implements OnInit,
     portalService: XPortalService;
     viewContainerRef: ViewContainerRef;
     configService: XConfigService;
+    container?: XDrawerContainerComponent | undefined;
+    get getVisible(): import("@ng-nest/ui/core").XBoolean | undefined;
     drawerTpl: TemplateRef<void>;
     portal: XPortalOverlayRef<any>;
     back$: Subscription | null;
-    constructor(renderer: Renderer2, elementRef: ElementRef, cdr: ChangeDetectorRef, overlay: Overlay, portalService: XPortalService, viewContainerRef: ViewContainerRef, configService: XConfigService);
+    width: string;
+    height: string;
+    constructor(renderer: Renderer2, elementRef: ElementRef, cdr: ChangeDetectorRef, overlay: Overlay, portalService: XPortalService, viewContainerRef: ViewContainerRef, configService: XConfigService, container?: XDrawerContainerComponent | undefined);
     ngOnInit(): void;
     ngOnChanges(simples: SimpleChanges): void;
     ngOnDestroy(): void;
     unsubscribe(): void;
     setClassMap(): void;
+    setSize(): void;
+    getSize(): string[];
     setVisible(): void;
     createPortal(): void;
     portalAttached(): boolean | undefined;
-    closePortal(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerComponent, never>;
+    closePortal(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerComponent, "x-drawer", never, {}, {}, never, ["*"]>;
 }

package/drawer/drawer.module.d.ts

@@ -1,12 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./drawer.component";
-import * as i2 from "./drawer.property";
-import * as i3 from "@angular/common";
-import * as i4 from "@ng-nest/ui/outlet";
-import * as i5 from "@ng-nest/ui/button";
-import * as i6 from "@ng-nest/ui/portal";
+import * as i2 from "./drawer-portal.directives";
+import * as i3 from "./drawer-portal.component";
+import * as i4 from "./drawer-container.component";
+import * as i5 from "./drawer.property";
+import * as i6 from "@angular/common";
+import * as i7 from "@ng-nest/ui/outlet";
+import * as i8 from "@ng-nest/ui/button";
+import * as i9 from "@ng-nest/ui/portal";
 export declare class XDrawerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<XDrawerModule, [typeof i1.XDrawerComponent, typeof i2.XDrawerProperty], [typeof i3.CommonModule, typeof i4.XOutletModule, typeof i5.XButtonModule, typeof i6.XPortalModule], [typeof i1.XDrawerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XDrawerModule, [typeof i1.XDrawerComponent, typeof i2.XDrawerCloseDirective, typeof i2.XDrawerTitleDirective, typeof i2.XDrawerContentDirective, typeof i3.XDrawerPortalComponent, typeof i4.XDrawerContainerComponent, typeof i5.XDrawerProperty, typeof i5.XDrawerContainerProperty], [typeof i6.CommonModule, typeof i7.XOutletModule, typeof i8.XButtonModule, typeof i9.XPortalModule], [typeof i1.XDrawerComponent, typeof i2.XDrawerCloseDirective, typeof i2.XDrawerTitleDirective, typeof i2.XDrawerContentDirective, typeof i3.XDrawerPortalComponent, typeof i4.XDrawerContainerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<XDrawerModule>;
 }

package/drawer/drawer.property.d.ts

@@ -1,5 +1,8 @@
 import { XTemplate, XPosition, XProperty, XBoolean } from '@ng-nest/ui/core';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, InjectionToken, ViewContainerRef } from '@angular/core';
+import { XPortalOverlayRef } from '@ng-nest/ui/portal';
+import { XDrawerRef } from './drawer-ref';
+import { XDrawerPortalComponent } from './drawer-portal.component';
 import * as i0 from "@angular/core";
 /**
  * Drawer
@@ -7,6 +10,8 @@ import * as i0 from "@angular/core";
  * @decorator component
  */
 export declare const XDrawerPrefix = "x-drawer";
+export declare const X_DRAWER_CONFIG_NAME = "drawer";
+export declare const X_DRAWER_DATA: InjectionToken<any>;
 /**
  * Drawer Property
  */
@@ -31,6 +36,21 @@ export declare class XDrawerProperty extends XProperty {
      * @en_US Size, supports fixed value
      */
     size?: string;
+    /**
+     * @zh_CN 点击遮罩关闭
+     * @en_US Click the mask to close
+     */
+    backdropClose: XBoolean;
+    /**
+     * @zh_CN 是否显示背景遮罩
+     * @en_US Whether to display the background mask
+     */
+    hasBackdrop: XBoolean;
+    /**
+     * @zh_CN 自定义样式名
+     * @en_US Custom style name
+     */
+    className: string;
     /**
      * @zh_CN 关闭的事件
      * @en_US Closed event
@@ -42,5 +62,80 @@ export declare class XDrawerProperty extends XProperty {
      */
     visibleChange: EventEmitter<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerProperty, "ng-component", never, { "title": "title"; "visible": "visible"; "placement": "placement"; "size": "size"; }, { "close": "close"; "visibleChange": "visibleChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerProperty, "ng-component", never, { "title": "title"; "visible": "visible"; "placement": "placement"; "size": "size"; "backdropClose": "backdropClose"; "hasBackdrop": "hasBackdrop"; "className": "className"; }, { "close": "close"; "visibleChange": "visibleChange"; }, never, never>;
+}
+/**
+ * Drawer Option
+ */
+export interface XDrawerOption {
+    /**
+     * @zh_CN 展示方向
+     * @en_US Display direction
+     * @default 'right'
+     * @withConfig true
+     */
+    placement?: XPosition;
+    /**
+     * @zh_CN 尺寸，支持固定值
+     * @en_US Size, supports fixed value
+     * @default '30%'
+     * @withConfig true
+     */
+    size?: string;
+    /**
+     * @zh_CN 自定义样式名
+     * @en_US Custom style name
+     */
+    className?: string;
+    /**
+     * @zh_CN 点击遮罩关闭
+     * @en_US Click the mask to close
+     * @default true
+     * @withConfig true
+     */
+    backdropClose?: boolean;
+    /**
+     * @zh_CN 是否显示背景遮罩
+     * @en_US Whether to display the background mask
+     * @default true
+     * @withConfig true
+     */
+    hasBackdrop?: boolean;
+    /**
+     * @zh_CN 数据，通过 "@Inject(X_DRAWER_DATA)" 来接收数据
+     * @en_US Data. Receive data by "@Inject(X_DRAWER_DATA)"
+     */
+    data?: any;
+    /**
+     * @en_US 视图容器实例可以包含其他视图容器。
+     * @en_US A view container instance can contain other view containers.
+     */
+    viewContainerRef?: ViewContainerRef;
+}
+/**
+ * Drawer Container
+ * @selector x-drawer-container
+ * @decorator component
+ */
+export declare const XDrawerContainerPrefix = "x-drawer-container";
+export declare const X_DRAWER_CONTAINER: InjectionToken<unknown>;
+/**
+ * Drawer Container Property
+ */
+export declare class XDrawerContainerProperty extends XProperty {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerContainerProperty, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerContainerProperty, "ng-component", never, {}, {}, never, never>;
+}
+/**
+ * @zh_CN 创建的抽屉对象
+ * @en_US Drawer object created
+ */
+export interface XDrawerPortalOverlayRef extends XPortalOverlayRef<XDrawerPortalComponent> {
+    drawerRef?: XDrawerRef<any>;
+}
+export declare type XDrawerAnimationState = XPosition | 'void';
+export interface XDrawerAnimationEvent {
+    state: XDrawerAnimationState;
+    action: 'start' | 'done';
+    totalTime: number;
 }

package/drawer/drawer.service.d.ts

@@ -0,0 +1,19 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentType } from '@angular/cdk/portal';
+import { TemplateRef } from '@angular/core';
+import { XConfigService, XDrawerConfig } from '@ng-nest/ui/core';
+import { XPortalService } from '@ng-nest/ui/portal';
+import { XDrawerRef } from './drawer-ref';
+import { XDrawerOption } from './drawer.property';
+import * as i0 from "@angular/core";
+export declare class XDrawerService {
+    portalService: XPortalService;
+    configService: XConfigService;
+    overlay: Overlay;
+    default: XDrawerOption;
+    configDefault?: XDrawerConfig;
+    constructor(portalService: XPortalService, configService: XConfigService, overlay: Overlay);
+    create<T>(content: TemplateRef<any> | ComponentType<T>, option?: XDrawerOption): XDrawerRef<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<XDrawerService>;
+}

package/drawer/examples/en_US/default/container/README.md

@@ -0,0 +1,6 @@
+---
+order: 6
+label: 'Container'
+---
+
+Take the challenge to open the drawer in the container via `x-drawer-container`.

package/drawer/examples/en_US/default/service/README.md

@@ -0,0 +1,6 @@
+---
+order: 5
+label: 'Service'
+---
+
+Create a drawer via the `XDrawerService` service.

package/drawer/examples/zh_CN/default/container/README.md

@@ -0,0 +1,6 @@
+---
+order: 6
+label: '指定容器'
+---
+
+通过 `x-drawer-container` 来指定容器内打开抽屉。

package/drawer/examples/zh_CN/default/service/README.md

@@ -0,0 +1,6 @@
+---
+order: 5
+label: '服务创建'
+---
+
+通过 `XDrawerService` 服务来创建抽屉。

package/drawer/public-api.d.ts

@@ -1,3 +1,9 @@
 export * from './drawer.component';
+export * from './drawer-portal.component';
+export * from './drawer-portal.directives';
+export * from './drawer.component';
+export * from './drawer-container.component';
 export * from './drawer.module';
 export * from './drawer.property';
+export * from './drawer.service';
+export * from './drawer-ref';

package/esm2020/affix/affix.component.mjs

@@ -8,9 +8,9 @@ export class XAffixComponent extends XAffixProperty {
         this.configService = configService;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XAffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XAffixComponent, deps: [{ token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XAffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XAffixComponent, selector: "x-affix", usesInheritance: true, ngImport: i0, template: "<div #affix class=\"x-affix\" [style.top]=\"top\" [style.left]=\"left\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0;position:sticky;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XAffixComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XAffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XAffixComponent, deps: [{ token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XAffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XAffixComponent, selector: "x-affix", usesInheritance: true, ngImport: i0, template: "<div #affix class=\"x-affix\" [style.top]=\"top\" [style.left]=\"left\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0;position:sticky;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XAffixComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAffixPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #affix class=\"x-affix\" [style.top]=\"top\" [style.left]=\"left\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0;position:sticky;display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.XConfigService }]; } });