@ng-nest/ui 12.0.8 → 12.1.1

package/fesm2015/ng-nest-ui-description.js

@@ -130,17 +130,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
             }] } });
 
 class XDescriptionComponent extends XDescriptionProperty {
-    constructor(renderer, elementRef, configService) {
+    constructor(configService) {
         super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
         this.configService = configService;
     }
     ngOnInit() {
         this.setClassMap();
     }
     ngOnChanges(changes) {
-        XIsChange(changes.size) && this.setClassMap();
+        const { size } = changes;
+        XIsChange(size) && this.setClassMap();
     }
     ngAfterViewInit() {
         this.setMerge();
@@ -176,7 +175,7 @@ class XDescriptionComponent extends XDescriptionProperty {
         this.gridTemplateColumns = gridTemplateColumns.join(' ');
     }
 }
-/** @nocollapse */ XDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDescriptionComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDescriptionComponent, deps: [{ token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ XDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDescriptionComponent, selector: "x-description", queries: [{ propertyName: "items", predicate: XDescriptionItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  <div class=\"x-description-header\">\r\n    <div class=\"x-description-title\" *xOutlet=\"title\">\r\n      {{ title }}\r\n    </div>\r\n  </div>\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    <div\r\n      *ngFor=\"let item of items; index as i\"\r\n      class=\"x-description-item\"\r\n      [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n      [class.x-description-item-heading]=\"item.heading\"\r\n      [ngClass]=\"setFlex(item)\"\r\n    >\r\n      <div class=\"x-description-item-label\">\r\n        <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n      </div>\r\n      <div class=\"x-description-item-content\">\r\n        <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDescriptionComponent, decorators: [{
             type: Component,
@@ -187,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.XConfigService }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i1.XConfigService }]; }, propDecorators: { items: [{
                 type: ContentChildren,
                 args: [XDescriptionItemComponent]
             }] } });

package/fesm2015/ng-nest-ui-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-description.js","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { XAlign, XBoolean, XDirection, XInputBoolean, XJustify, XProperty, XSize, XTemplate, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 描述列表的标题，支持自定义模板\r\n   * @en_US Describe the title of the list, support custom template\r\n   */\r\n  @Input() title?: XTemplate;\r\n  /**\r\n   * @zh_CN 是否展示边框\r\n   * @en_US Whether to show column borders\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() bordered!: XBoolean;\r\n  /**\r\n   * @zh_CN grid 布局下定义列宽度\r\n   * @en_US Define column width under grid layout\r\n   */\r\n  @Input() gridTemplateColumns?: string;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size!: XSize;\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionItemProperty {\r\n  /**\r\n   * @zh_CN 使用 grid 布局\r\n   * @en_US Use grid layout to merge cells\r\n   */\r\n  @Input() gridArea?: string;\r\n  /**\r\n   * @zh_CN 内容的描述，支持自定义模板\r\n   * @en_US Description of content, support custom templates\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN flex 布局下的子元素水平排列方式\r\n   * @en_US Child element under the horizontal arrangement of the layout flex\r\n   */\r\n  @Input() justify?: XJustify = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素垂直排列方式\r\n   * @en_US Child element under the vertical layout flex arrangement\r\n   */\r\n  @Input() align?: XAlign = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素排列方向\r\n   * @en_US Child element under the direction of arrangement of the layout flex\r\n   */\r\n  @Input() direction?: XDirection = 'row';\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US Width\r\n   */\r\n  @Input() width?: string;\r\n  /**\r\n   * @zh_CN flex 比重\r\n   * @en_US Flex proportion\r\n   */\r\n  @Input() flex?: number;\r\n  /**\r\n   * @zh_CN 是否是标题\r\n   * @en_US Whether it is heading\r\n   */\r\n  @Input() @XInputBoolean() heading: XBoolean = false;\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n  selector: `${XDescriptionItemPrefix}`,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n  constructor() {\r\n    super();\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  ContentChildren,\r\n  QueryList,\r\n  ChangeDetectorRef,\r\n  SimpleChanges\r\n} from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XClearClass, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\n\r\n@Component({\r\n  selector: `${XDescriptionPrefix}`,\r\n  templateUrl: './description.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty {\r\n  @ContentChildren(XDescriptionItemComponent) items!: QueryList<XDescriptionItemComponent>;\r\n  constructor(private renderer: Renderer2, private elementRef: ElementRef, public configService: XConfigService) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    XIsChange(changes.size) && this.setClassMap();\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.setMerge();\r\n  }\r\n\r\n  setClassMap() {\r\n    XClearClass(this.classMap);\r\n    this.classMap = {\r\n      [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)\r\n    };\r\n  }\r\n\r\n  setFlex(item: XDescriptionItemComponent) {\r\n    let classes: { [property: string]: boolean } = {};\r\n    if (!XIsEmpty(item.justify)) classes[`x-justify-${item.justify}`] = true;\r\n    if (!XIsEmpty(item.align)) classes[`x-align-${item.align}`] = true;\r\n    if (!XIsEmpty(item.direction)) classes[`x-direction-${item.direction}`] = true;\r\n    return classes;\r\n  }\r\n\r\n  setMerge() {\r\n    if (this.gridTemplateColumns) return;\r\n    let gridTemplateColumns: string[] = [];\r\n    this.items.forEach((x) => {\r\n      if (x.width) {\r\n        gridTemplateColumns.push(x.width);\r\n      } else if (x.flex) {\r\n        gridTemplateColumns.push(`${x.flex}fr`);\r\n      }\r\n    });\r\n    this.gridTemplateColumns = gridTemplateColumns.join(' ');\r\n  }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  <div class=\"x-description-header\">\r\n    <div class=\"x-description-title\" *xOutlet=\"title\">\r\n      {{ title }}\r\n    </div>\r\n  </div>\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    <div\r\n      *ngFor=\"let item of items; index as i\"\r\n      class=\"x-description-item\"\r\n      [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n      [class.x-description-item-heading]=\"item.heading\"\r\n      [ngClass]=\"setFlex(item)\"\r\n    >\r\n      <div class=\"x-description-item-label\">\r\n        <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n      </div>\r\n      <div class=\"x-description-item-content\">\r\n        <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\nimport { XDescriptionItemProperty, XDescriptionProperty } from './description.property';\r\n\r\n@NgModule({\r\n  declarations: [XDescriptionComponent, XDescriptionProperty, XDescriptionItemComponent, XDescriptionItemProperty],\r\n  exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n  imports: [CommonModule, XOutletModule]\r\n})\r\nexport class XDescriptionModule {}\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-description.js","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { XAlign, XBoolean, XDirection, XInputBoolean, XJustify, XProperty, XSize, XTemplate, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 描述列表的标题，支持自定义模板\r\n   * @en_US Describe the title of the list, support custom template\r\n   */\r\n  @Input() title?: XTemplate;\r\n  /**\r\n   * @zh_CN 是否展示边框\r\n   * @en_US Whether to show column borders\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() bordered!: XBoolean;\r\n  /**\r\n   * @zh_CN grid 布局下定义列宽度\r\n   * @en_US Define column width under grid layout\r\n   */\r\n  @Input() gridTemplateColumns?: string;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size!: XSize;\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionItemProperty {\r\n  /**\r\n   * @zh_CN 使用 grid 布局\r\n   * @en_US Use grid layout to merge cells\r\n   */\r\n  @Input() gridArea?: string;\r\n  /**\r\n   * @zh_CN 内容的描述，支持自定义模板\r\n   * @en_US Description of content, support custom templates\r\n   */\r\n  @Input() label?: XTemplate;\r\n  /**\r\n   * @zh_CN flex 布局下的子元素水平排列方式\r\n   * @en_US Child element under the horizontal arrangement of the layout flex\r\n   */\r\n  @Input() justify?: XJustify = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素垂直排列方式\r\n   * @en_US Child element under the vertical layout flex arrangement\r\n   */\r\n  @Input() align?: XAlign = 'start';\r\n  /**\r\n   * @zh_CN flex 布局下的子元素排列方向\r\n   * @en_US Child element under the direction of arrangement of the layout flex\r\n   */\r\n  @Input() direction?: XDirection = 'row';\r\n  /**\r\n   * @zh_CN 宽度\r\n   * @en_US Width\r\n   */\r\n  @Input() width?: string;\r\n  /**\r\n   * @zh_CN flex 比重\r\n   * @en_US Flex proportion\r\n   */\r\n  @Input() flex?: number;\r\n  /**\r\n   * @zh_CN 是否是标题\r\n   * @en_US Whether it is heading\r\n   */\r\n  @Input() @XInputBoolean() heading: XBoolean = false;\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n  selector: `${XDescriptionItemPrefix}`,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n  constructor() {\r\n    super();\r\n  }\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, SimpleChanges } from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XClearClass, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\n\r\n@Component({\r\n  selector: `${XDescriptionPrefix}`,\r\n  templateUrl: './description.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty {\r\n  @ContentChildren(XDescriptionItemComponent) items!: QueryList<XDescriptionItemComponent>;\r\n  constructor(public configService: XConfigService) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { size } = changes;\r\n    XIsChange(size) && this.setClassMap();\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.setMerge();\r\n  }\r\n\r\n  setClassMap() {\r\n    XClearClass(this.classMap);\r\n    this.classMap = {\r\n      [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)\r\n    };\r\n  }\r\n\r\n  setFlex(item: XDescriptionItemComponent) {\r\n    let classes: { [property: string]: boolean } = {};\r\n    if (!XIsEmpty(item.justify)) classes[`x-justify-${item.justify}`] = true;\r\n    if (!XIsEmpty(item.align)) classes[`x-align-${item.align}`] = true;\r\n    if (!XIsEmpty(item.direction)) classes[`x-direction-${item.direction}`] = true;\r\n    return classes;\r\n  }\r\n\r\n  setMerge() {\r\n    if (this.gridTemplateColumns) return;\r\n    let gridTemplateColumns: string[] = [];\r\n    this.items.forEach((x) => {\r\n      if (x.width) {\r\n        gridTemplateColumns.push(x.width);\r\n      } else if (x.flex) {\r\n        gridTemplateColumns.push(`${x.flex}fr`);\r\n      }\r\n    });\r\n    this.gridTemplateColumns = gridTemplateColumns.join(' ');\r\n  }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n  <div class=\"x-description-header\">\r\n    <div class=\"x-description-title\" *xOutlet=\"title\">\r\n      {{ title }}\r\n    </div>\r\n  </div>\r\n  <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n    <div\r\n      *ngFor=\"let item of items; index as i\"\r\n      class=\"x-description-item\"\r\n      [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n      [class.x-description-item-heading]=\"item.heading\"\r\n      [ngClass]=\"setFlex(item)\"\r\n    >\r\n      <div class=\"x-description-item-label\">\r\n        <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n      </div>\r\n      <div class=\"x-description-item-content\">\r\n        <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\nimport { XDescriptionItemProperty, XDescriptionProperty } from './description.property';\r\n\r\n@NgModule({\r\n  declarations: [XDescriptionComponent, XDescriptionProperty, XDescriptionItemComponent, XDescriptionItemProperty],\r\n  exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n  imports: [CommonModule, XOutletModule]\r\n})\r\nexport class XDescriptionModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/ng-nest-ui-dialog.js

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import { XInputBoolean, XWithConfig, XIsChange, XIsFunction, XMoveBoxAnimation } from '@ng-nest/ui/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, Directive, Optional, TemplateRef, Injectable, NgModule } from '@angular/core';
+import * as i2$1 from '@ng-nest/ui/core';
+import { XInputBoolean, XWithConfig, XIsChange, XIsFunction, XMoveBoxAnimation, fillDefault } from '@ng-nest/ui/core';
 import { __decorate } from 'tslib';
 import * as i3 from '@ng-nest/ui/alert';
 import { XAlertProperty, XAlertModule } from '@ng-nest/ui/alert';
 import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { map, takeUntil, filter, take } from 'rxjs/operators';
 import * as i1 from '@ng-nest/ui/portal';
 import { XPortalModule } from '@ng-nest/ui/portal';
 import * as i2 from '@ng-nest/ui/i18n';
@@ -15,10 +16,13 @@ import * as i5 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { XIconModule } from '@ng-nest/ui/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { XInputModule } from '@ng-nest/ui/input';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3$1 from '@angular/cdk/overlay';
 
 /**
  * Dialog
@@ -26,8 +30,9 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
  * @decorator component
  */
 const XDialogPrefix = 'x-dialog';
-const X_CONFIG_NAME = 'dialog';
+const X_DIALOG_CONFIG_NAME = 'dialog';
 const XDialogPortal = 'x-dialog-portal';
+const X_DIALOG_DATA = new InjectionToken('XDialogData');
 /**
  * Dialog Property
  */
@@ -73,44 +78,44 @@ __decorate([
     XInputBoolean()
 ], XDialogProperty.prototype, "visible", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, 'center')
+    XWithConfig(X_DIALOG_CONFIG_NAME, 'center')
 ], XDialogProperty.prototype, "placement", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, '1rem')
+    XWithConfig(X_DIALOG_CONFIG_NAME, '1rem')
 ], XDialogProperty.prototype, "offset", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, '32rem')
+    XWithConfig(X_DIALOG_CONFIG_NAME, '32rem')
 ], XDialogProperty.prototype, "width", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, 'white')
+    XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
 ], XDialogProperty.prototype, "effect", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, true)
+    XWithConfig(X_DIALOG_CONFIG_NAME, true)
 ], XDialogProperty.prototype, "showCancel", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME)
+    XWithConfig(X_DIALOG_CONFIG_NAME)
 ], XDialogProperty.prototype, "cancelText", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, true)
+    XWithConfig(X_DIALOG_CONFIG_NAME, true)
 ], XDialogProperty.prototype, "showConfirm", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME)
+    XWithConfig(X_DIALOG_CONFIG_NAME)
 ], XDialogProperty.prototype, "confirmText", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, true)
+    XWithConfig(X_DIALOG_CONFIG_NAME, true)
 ], XDialogProperty.prototype, "backdropClose", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, true)
+    XWithConfig(X_DIALOG_CONFIG_NAME, true)
 ], XDialogProperty.prototype, "hasBackdrop", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, '')
+    XWithConfig(X_DIALOG_CONFIG_NAME, '')
 ], XDialogProperty.prototype, "className", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME),
+    XWithConfig(X_DIALOG_CONFIG_NAME),
     XInputBoolean()
 ], XDialogProperty.prototype, "buttonsCenter", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, false),
+    XWithConfig(X_DIALOG_CONFIG_NAME, false),
     XInputBoolean()
 ], XDialogProperty.prototype, "draggable", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogProperty, decorators: [{
@@ -192,7 +197,8 @@ class XDialogComponent extends XDialogProperty {
         });
     }
     ngOnChanges(changes) {
-        XIsChange(changes.visible) && this.setVisible();
+        const { visible } = changes;
+        XIsChange(visible) && this.setVisible();
     }
     ngOnDestroy() {
         this.unsubscribe();
@@ -271,7 +277,7 @@ class XDialogComponent extends XDialogProperty {
     }
 }
 /** @nocollapse */ XDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.XPortalService }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div class=\"x-dialog\" [@x-move-box-animation]=\"placement\" (@x-move-box-animation.done)=\"moveDone($event)\">\r\n    <x-alert\r\n      [draggable]=\"draggable\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      (close)=\"onClose()\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog x-alert{height:100%}.x-dialog x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog x-alert .x-alert-title{padding:.5rem 1rem 0}.x-dialog x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex:1}.x-dialog-portal x-dialog{width:100%}\n"], components: [{ type: i3.XAlertComponent, selector: "x-alert" }, { type: i4.XButtonsComponent, selector: "x-buttons" }, { type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n  <div class=\"x-dialog\" [@x-move-box-animation]=\"placement\" (@x-move-box-animation.done)=\"moveDone($event)\">\r\n    <x-alert\r\n      [draggable]=\"draggable\"\r\n      [dragBoundary]=\"'.cdk-overlay-container'\"\r\n      (close)=\"onClose()\"\r\n      [title]=\"title\"\r\n      [content]=\"contentTpl\"\r\n      [type]=\"type\"\r\n      [effect]=\"effect\"\r\n      [hideClose]=\"hideClose\"\r\n      [closeText]=\"closeText\"\r\n      showIcon=\"false\"\r\n      duration=\"0\"\r\n      manual\r\n      disabledAnimation\r\n    ></x-alert>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n  <div class=\"x-dialog-inner\">\r\n    <div class=\"x-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n      <ng-container *xOutlet=\"footer\">\r\n        <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n          <x-button *ngIf=\"showCancel\" (click)=\"onCancel()\">{{ getCancelText }}</x-button>\r\n          <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onConfirm()\">{{ getConfirmText }}</x-button>\r\n        </x-buttons>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog x-alert{height:100%}.x-dialog x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex:1}.x-dialog-portal x-dialog{width:100%}\n"], components: [{ type: i3.XAlertComponent, selector: "x-alert" }, { type: i4.XButtonsComponent, selector: "x-buttons" }, { type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -287,10 +293,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                 args: ['dialogTpl', { static: false }]
             }] } });
 
+class XDialogContainerComponent extends BasePortalOutlet {
+    constructor() {
+        super();
+        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 });
+    }
+    attachComponentPortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throw Error('dialog portal has attached');
+        }
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    attachTemplatePortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throw Error('dialog portal has attached');
+        }
+        return this.portalOutlet.attachTemplatePortal(portal);
+    }
+}
+/** @nocollapse */ XDialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDialogContainerComponent, selector: "x-dialog-container", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "class.x-dialog-container": "this._has", "@x-move-box-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-dialog-container{margin:0;width:100%;height:100%;overflow:auto;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-container-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-dialog-container-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-container-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin-bottom:-1rem;min-height:4rem}.x-dialog-container-actions[align=center]{justify-content:center}.x-dialog-container-actions[align=start]{justify-content:flex-start}.x-dialog-container-actions x-button:not(:first-child){margin-left:1rem}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-dialog-container',
+                    templateUrl: './dialog-container.component.html',
+                    styleUrls: ['./dialog-container.component.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [XMoveBoxAnimation]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-dialog-container']
+            }], placement: [{
+                type: HostBinding,
+                args: ['@x-move-box-animation']
+            }], done: [{
+                type: HostListener,
+                args: ['@x-move-box-animation.done', ['$event']]
+            }], start: [{
+                type: HostListener,
+                args: ['@x-move-box-animation.start', ['$event']]
+            }], portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] } });
+
+// TODO: add more function
+class XDialogRef {
+    constructor(overlayRef, containerInstance) {
+        this.overlayRef = overlayRef;
+        this.containerInstance = containerInstance;
+    }
+    close() {
+        this.containerInstance.animationChanged
+            .pipe(filter((event) => event.state === 'void' && event.action === 'done'), take(1))
+            .subscribe(() => {
+            this.overlayRef.detach();
+        });
+        this.containerInstance.placement = 'void';
+    }
+}
+
+class XDialogCloseDirective {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    onCloseClick() {
+        this.dialogRef && this.dialogRef.close();
+    }
+}
+/** @nocollapse */ XDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogCloseDirective, deps: [{ token: XDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDialogCloseDirective, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-close]`
+                }]
+        }], ctorParameters: function () { return [{ type: XDialogRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { onCloseClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+class XDialogTitleDirective {
+    constructor() {
+        this._has = true;
+    }
+}
+/** @nocollapse */ XDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDialogTitleDirective, selector: "[x-dialog-title]", host: { properties: { "class.x-dialog-container-title": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-title]`
+                }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-dialog-container-title']
+            }] } });
+class XDialogContentDirective {
+    constructor() {
+        this._has = true;
+    }
+}
+/** @nocollapse */ XDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDialogContentDirective, selector: "[x-dialog-content], x-dialog-content", host: { properties: { "class.x-dialog-container-content": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-content], x-dialog-content`
+                }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-dialog-container-content']
+            }] } });
+class XDialogActionsDirective {
+    constructor() {
+        this._has = true;
+    }
+}
+/** @nocollapse */ XDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDialogActionsDirective, selector: "[x-dialog-actions], x-dialog-actions", host: { properties: { "class.x-dialog-container-actions": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-dialog-actions], x-dialog-actions`
+                }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-dialog-container-actions']
+            }] } });
+
+class XDialogService {
+    constructor(portalService, configService, overlay) {
+        this.portalService = portalService;
+        this.configService = configService;
+        this.overlay = overlay;
+        this.default = {
+            placement: 'center',
+            offset: '1rem',
+            width: '32rem',
+            backdropClose: true,
+            hasBackdrop: true,
+            draggable: false
+        };
+        this.configDefault = this.configService.getConfigForComponent(X_DIALOG_CONFIG_NAME);
+        Object.assign(this.default, this.configDefault);
+    }
+    create(content, option = {}) {
+        fillDefault(option, this.default);
+        const portal = this.portalService.attach({
+            content: XDialogContainerComponent,
+            viewContainerRef: option.viewContainerRef,
+            overlayConfig: {
+                hasBackdrop: option.hasBackdrop,
+                panelClass: option.className,
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                positionStrategy: this.portalService.setPlace(option.placement, option.width, option.height, option.offset)
+            }
+        });
+        const { overlayRef, componentRef } = portal || {};
+        const { instance } = componentRef || {};
+        instance.placement = option.placement;
+        const dialogRef = new XDialogRef(overlayRef, instance);
+        if (content instanceof TemplateRef) {
+            instance.attachTemplatePortal(new TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, dialogRef: dialogRef }));
+        }
+        else {
+            const injector = this.portalService.createInjector([
+                { provide: X_DIALOG_DATA, useValue: option.data },
+                { provide: XDialogRef, useValue: dialogRef }
+            ]);
+            const comRef = instance.attachComponentPortal(new ComponentPortal(content, option.viewContainerRef, injector));
+            dialogRef.componentInstance = comRef.instance;
+        }
+        if (option.hasBackdrop && option.backdropClose && overlayRef) {
+            overlayRef.backdropClick().subscribe(() => {
+                dialogRef.close();
+            });
+        }
+        return dialogRef;
+    }
+}
+/** @nocollapse */ XDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogService, deps: [{ token: i1.XPortalService }, { token: i2$1.XConfigService }, { token: i3$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ XDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.XPortalService }, { type: i2$1.XConfigService }, { type: i3$1.Overlay }]; } });
+
 class XDialogModule {
 }
 /** @nocollapse */ XDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, declarations: [XDialogComponent, XDialogProperty], imports: [CommonModule,
+/** @nocollapse */ XDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, declarations: [XDialogComponent,
+        XDialogCloseDirective,
+        XDialogTitleDirective,
+        XDialogContentDirective,
+        XDialogActionsDirective,
+        XDialogContainerComponent,
+        XDialogProperty], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         DragDropModule,
@@ -299,8 +508,13 @@ class XDialogModule {
         XIconModule,
         XPortalModule,
         XAlertModule,
-        XOutletModule], exports: [XDialogComponent] });
-/** @nocollapse */ XDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, imports: [[
+        XOutletModule], exports: [XDialogComponent,
+        XDialogCloseDirective,
+        XDialogTitleDirective,
+        XDialogContentDirective,
+        XDialogActionsDirective,
+        XDialogContainerComponent] });
+/** @nocollapse */ XDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, providers: [XDialogService], imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -315,8 +529,23 @@ class XDialogModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XDialogComponent, XDialogProperty],
-                    exports: [XDialogComponent],
+                    declarations: [
+                        XDialogComponent,
+                        XDialogCloseDirective,
+                        XDialogTitleDirective,
+                        XDialogContentDirective,
+                        XDialogActionsDirective,
+                        XDialogContainerComponent,
+                        XDialogProperty
+                    ],
+                    exports: [
+                        XDialogComponent,
+                        XDialogCloseDirective,
+                        XDialogTitleDirective,
+                        XDialogContentDirective,
+                        XDialogActionsDirective,
+                        XDialogContainerComponent
+                    ],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -328,7 +557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                         XPortalModule,
                         XAlertModule,
                         XOutletModule
-                    ]
+                    ],
+                    providers: [XDialogService]
                 }]
         }] });
 
@@ -336,5 +566,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XDialogComponent, XDialogModule, XDialogPortal, XDialogPrefix, XDialogProperty };
+export { XDialogActionsDirective, XDialogCloseDirective, XDialogComponent, XDialogContainerComponent, XDialogContentDirective, XDialogModule, XDialogPortal, XDialogPrefix, XDialogProperty, XDialogRef, XDialogService, XDialogTitleDirective, X_DIALOG_CONFIG_NAME, X_DIALOG_DATA };
 //# sourceMappingURL=ng-nest-ui-dialog.js.map