@ng-nest/ui 12.0.11 → 12.1.0

package/bundles/ng-nest-ui-dialog.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/alert'), require('rxjs'), require('rxjs/operators'), require('@ng-nest/ui/portal'), require('@ng-nest/ui/i18n'), require('@ng-nest/ui/button'), require('@ng-nest/ui/outlet'), require('@angular/common'), require('@ng-nest/ui/icon'), require('@angular/forms'), require('@ng-nest/ui/input'), require('@angular/cdk/drag-drop')) :
-    typeof define === 'function' && define.amd ? define('@ng-nest/ui/dialog', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/alert', 'rxjs', 'rxjs/operators', '@ng-nest/ui/portal', '@ng-nest/ui/i18n', '@ng-nest/ui/button', '@ng-nest/ui/outlet', '@angular/common', '@ng-nest/ui/icon', '@angular/forms', '@ng-nest/ui/input', '@angular/cdk/drag-drop'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui.dialog = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui.alert, global.rxjs, global.rxjs.operators, global["ng-nest"].ui.portal, global["ng-nest"].ui.i18n, global["ng-nest"].ui.button, global["ng-nest"].ui.outlet, global.ng.common, global["ng-nest"].ui.icon, global.ng.forms, global["ng-nest"].ui.input, global.ng.cdk.dragDrop));
-})(this, (function (exports, i0, core, i3, rxjs, operators, i1, i2, i4, i5, i6, icon, forms, input, dragDrop) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/alert'), require('rxjs'), require('rxjs/operators'), require('@ng-nest/ui/portal'), require('@ng-nest/ui/i18n'), require('@ng-nest/ui/button'), require('@ng-nest/ui/outlet'), require('@angular/common'), require('@angular/cdk/portal'), require('@ng-nest/ui/icon'), require('@angular/forms'), require('@ng-nest/ui/input'), require('@angular/cdk/drag-drop'), require('@angular/cdk/overlay')) :
+    typeof define === 'function' && define.amd ? define('@ng-nest/ui/dialog', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/alert', 'rxjs', 'rxjs/operators', '@ng-nest/ui/portal', '@ng-nest/ui/i18n', '@ng-nest/ui/button', '@ng-nest/ui/outlet', '@angular/common', '@angular/cdk/portal', '@ng-nest/ui/icon', '@angular/forms', '@ng-nest/ui/input', '@angular/cdk/drag-drop', '@angular/cdk/overlay'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui.dialog = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui.alert, global.rxjs, global.rxjs.operators, global["ng-nest"].ui.portal, global["ng-nest"].ui.i18n, global["ng-nest"].ui.button, global["ng-nest"].ui.outlet, global.ng.common, global.ng.cdk.portal, global["ng-nest"].ui.icon, global.ng.forms, global["ng-nest"].ui.input, global.ng.cdk.dragDrop, global.ng.cdk.overlay));
+})(this, (function (exports, i0, i2, i3, rxjs, operators, i1, i2$1, i4, i5, i6, i1$1, icon, forms, input, dragDrop, i3$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,12 +23,15 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -354,8 +357,9 @@
      * @decorator component
      */
     var XDialogPrefix = 'x-dialog';
-    var X_CONFIG_NAME = 'dialog';
+    var X_DIALOG_CONFIG_NAME = 'dialog';
     var XDialogPortal = 'x-dialog-portal';
+    var X_DIALOG_DATA = new i0.InjectionToken('XDialogData');
     /**
      * Dialog Property
      */
@@ -401,48 +405,48 @@
     /** @nocollapse */ XDialogProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
     /** @nocollapse */ XDialogProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     __decorate([
-        core.XInputBoolean()
+        i2.XInputBoolean()
     ], XDialogProperty.prototype, "visible", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, 'center')
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, 'center')
     ], XDialogProperty.prototype, "placement", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, '1rem')
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, '1rem')
     ], XDialogProperty.prototype, "offset", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, '32rem')
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, '32rem')
     ], XDialogProperty.prototype, "width", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, 'white')
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
     ], XDialogProperty.prototype, "effect", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, true)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, true)
     ], XDialogProperty.prototype, "showCancel", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME)
     ], XDialogProperty.prototype, "cancelText", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, true)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, true)
     ], XDialogProperty.prototype, "showConfirm", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME)
     ], XDialogProperty.prototype, "confirmText", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, true)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, true)
     ], XDialogProperty.prototype, "backdropClose", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, true)
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, true)
     ], XDialogProperty.prototype, "hasBackdrop", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, '')
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, '')
     ], XDialogProperty.prototype, "className", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME),
-        core.XInputBoolean()
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME),
+        i2.XInputBoolean()
     ], XDialogProperty.prototype, "buttonsCenter", void 0);
     __decorate([
-        core.XWithConfig(X_CONFIG_NAME, false),
-        core.XInputBoolean()
+        i2.XWithConfig(X_DIALOG_CONFIG_NAME, false),
+        i2.XInputBoolean()
     ], XDialogProperty.prototype, "draggable", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogProperty, decorators: [{
                 type: i0.Component,
@@ -535,7 +539,7 @@
         };
         XDialogComponent.prototype.ngOnChanges = function (changes) {
             var visible = changes.visible;
-            core.XIsChange(visible) && this.setVisible();
+            i2.XIsChange(visible) && this.setVisible();
         };
         XDialogComponent.prototype.ngOnDestroy = function () {
             this.unsubscribe();
@@ -588,7 +592,7 @@
             return (_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.hasAttached();
         };
         XDialogComponent.prototype.onClose = function () {
-            if (core.XIsFunction(this.beforeClose)) {
+            if (i2.XIsFunction(this.beforeClose)) {
                 this.beforeClose();
             }
             else {
@@ -616,7 +620,7 @@
         return XDialogComponent;
     }(XDialogProperty));
     /** @nocollapse */ XDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace.XPortalService }, { token: i2__namespace.XI18nService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDialogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.XAlertComponent, selector: "x-alert" }, { type: i4__namespace.XButtonsComponent, selector: "x-buttons" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i5__namespace.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [core.XMoveBoxAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    /** @nocollapse */ XDialogComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.XAlertComponent, selector: "x-alert" }, { type: i4__namespace.XButtonsComponent, selector: "x-buttons" }, { type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i5__namespace.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [i2.XMoveBoxAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -625,20 +629,238 @@
                         styleUrls: ['./dialog.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [core.XMoveBoxAnimation]
+                        animations: [i2.XMoveBoxAnimation]
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace.XPortalService }, { type: i2__namespace.XI18nService }]; }, propDecorators: { dialogTpl: [{
                     type: i0.ViewChild,
                     args: ['dialogTpl', { static: false }]
                 }] } });
 
+    var XDialogContainerComponent = /** @class */ (function (_super) {
+        __extends(XDialogContainerComponent, _super);
+        function XDialogContainerComponent() {
+            var _this = _super.call(this) || this;
+            _this._has = true;
+            _this.animationChanged = new i0.EventEmitter();
+            return _this;
+        }
+        XDialogContainerComponent.prototype.done = function (_a) {
+            var toState = _a.toState, totalTime = _a.totalTime;
+            this.animationChanged.next({ action: 'done', state: toState, totalTime: totalTime });
+        };
+        XDialogContainerComponent.prototype.start = function (_a) {
+            var toState = _a.toState, totalTime = _a.totalTime;
+            this.animationChanged.next({ action: 'start', state: toState, totalTime: totalTime });
+        };
+        XDialogContainerComponent.prototype.attachComponentPortal = function (portal) {
+            if (this.portalOutlet.hasAttached()) {
+                throw Error('dialog portal has attached');
+            }
+            return this.portalOutlet.attachComponentPortal(portal);
+        };
+        XDialogContainerComponent.prototype.attachTemplatePortal = function (portal) {
+            if (this.portalOutlet.hasAttached()) {
+                throw Error('dialog portal has attached');
+            }
+            return this.portalOutlet.attachTemplatePortal(portal);
+        };
+        return XDialogContainerComponent;
+    }(i1$1.BasePortalOutlet));
+    /** @nocollapse */ XDialogContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDialogContainerComponent.ɵcmp = i0__namespace.ɵɵ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: i1$1.CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [i2.XMoveBoxAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'x-dialog-container',
+                        templateUrl: './dialog-container.component.html',
+                        styleUrls: ['./dialog-container.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        animations: [i2.XMoveBoxAnimation]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-dialog-container']
+                }], placement: [{
+                    type: i0.HostBinding,
+                    args: ['@x-move-box-animation']
+                }], done: [{
+                    type: i0.HostListener,
+                    args: ['@x-move-box-animation.done', ['$event']]
+                }], start: [{
+                    type: i0.HostListener,
+                    args: ['@x-move-box-animation.start', ['$event']]
+                }], portalOutlet: [{
+                    type: i0.ViewChild,
+                    args: [i1$1.CdkPortalOutlet, { static: true }]
+                }] } });
+
+    // TODO: add more function
+    var XDialogRef = /** @class */ (function () {
+        function XDialogRef(overlayRef, containerInstance) {
+            this.overlayRef = overlayRef;
+            this.containerInstance = containerInstance;
+        }
+        XDialogRef.prototype.close = function () {
+            var _this = this;
+            this.containerInstance.animationChanged
+                .pipe(operators.filter(function (event) { return event.state === 'void' && event.action === 'done'; }), operators.take(1))
+                .subscribe(function () {
+                _this.overlayRef.detach();
+            });
+            this.containerInstance.placement = 'void';
+        };
+        return XDialogRef;
+    }());
+
+    var XDialogCloseDirective = /** @class */ (function () {
+        function XDialogCloseDirective(dialogRef) {
+            this.dialogRef = dialogRef;
+        }
+        XDialogCloseDirective.prototype.onCloseClick = function () {
+            this.dialogRef && this.dialogRef.close();
+        };
+        return XDialogCloseDirective;
+    }());
+    /** @nocollapse */ XDialogCloseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogCloseDirective, deps: [{ token: XDialogRef, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDialogCloseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDialogCloseDirective, selector: "[x-dialog-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogCloseDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-dialog-close]"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: XDialogRef, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { onCloseClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+    var XDialogTitleDirective = /** @class */ (function () {
+        function XDialogTitleDirective() {
+            this._has = true;
+        }
+        return XDialogTitleDirective;
+    }());
+    /** @nocollapse */ XDialogTitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogTitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDialogTitleDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogTitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-dialog-title]"
+                    }]
+            }], propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-dialog-container-title']
+                }] } });
+    var XDialogContentDirective = /** @class */ (function () {
+        function XDialogContentDirective() {
+            this._has = true;
+        }
+        return XDialogContentDirective;
+    }());
+    /** @nocollapse */ XDialogContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogContentDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDialogContentDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogContentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-dialog-content], x-dialog-content"
+                    }]
+            }], propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-dialog-container-content']
+                }] } });
+    var XDialogActionsDirective = /** @class */ (function () {
+        function XDialogActionsDirective() {
+            this._has = true;
+        }
+        return XDialogActionsDirective;
+    }());
+    /** @nocollapse */ XDialogActionsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogActionsDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDialogActionsDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogActionsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-dialog-actions], x-dialog-actions"
+                    }]
+            }], propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-dialog-container-actions']
+                }] } });
+
+    var XDialogService = /** @class */ (function () {
+        function XDialogService(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);
+        }
+        XDialogService.prototype.create = function (content, option) {
+            if (option === void 0) { option = {}; }
+            i2.fillDefault(option, this.default);
+            var 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)
+                }
+            });
+            var _a = portal || {}, overlayRef = _a.overlayRef, componentRef = _a.componentRef;
+            var instance = (componentRef || {}).instance;
+            instance.placement = option.placement;
+            var dialogRef = new XDialogRef(overlayRef, instance);
+            if (content instanceof i0.TemplateRef) {
+                instance.attachTemplatePortal(new i1$1.TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, dialogRef: dialogRef }));
+            }
+            else {
+                var injector = this.portalService.createInjector([
+                    { provide: X_DIALOG_DATA, useValue: option.data },
+                    { provide: XDialogRef, useValue: dialogRef }
+                ]);
+                var comRef = instance.attachComponentPortal(new i1$1.ComponentPortal(content, option.viewContainerRef, injector));
+                dialogRef.componentInstance = comRef.instance;
+            }
+            if (option.hasBackdrop && option.backdropClose && overlayRef) {
+                overlayRef.backdropClick().subscribe(function () {
+                    dialogRef.close();
+                });
+            }
+            return dialogRef;
+        };
+        return XDialogService;
+    }());
+    /** @nocollapse */ XDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogService, deps: [{ token: i1__namespace.XPortalService }, { token: i2__namespace$1.XConfigService }, { token: i3__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ XDialogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.XPortalService }, { type: i2__namespace$1.XConfigService }, { type: i3__namespace$1.Overlay }]; } });
+
     var XDialogModule = /** @class */ (function () {
         function XDialogModule() {
         }
         return XDialogModule;
     }());
     /** @nocollapse */ XDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, declarations: [XDialogComponent, XDialogProperty], imports: [i6.CommonModule,
+    /** @nocollapse */ XDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, declarations: [XDialogComponent,
+            XDialogCloseDirective,
+            XDialogTitleDirective,
+            XDialogContentDirective,
+            XDialogActionsDirective,
+            XDialogContainerComponent,
+            XDialogProperty], imports: [i6.CommonModule,
             forms.FormsModule,
             forms.ReactiveFormsModule,
             dragDrop.DragDropModule,
@@ -647,8 +869,13 @@
             icon.XIconModule,
             i1.XPortalModule,
             i3.XAlertModule,
-            i5.XOutletModule], exports: [XDialogComponent] });
-    /** @nocollapse */ XDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, imports: [[
+            i5.XOutletModule], exports: [XDialogComponent,
+            XDialogCloseDirective,
+            XDialogTitleDirective,
+            XDialogContentDirective,
+            XDialogActionsDirective,
+            XDialogContainerComponent] });
+    /** @nocollapse */ XDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, providers: [XDialogService], imports: [[
                 i6.CommonModule,
                 forms.FormsModule,
                 forms.ReactiveFormsModule,
@@ -663,8 +890,23 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDialogModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [XDialogComponent, XDialogProperty],
-                        exports: [XDialogComponent],
+                        declarations: [
+                            XDialogComponent,
+                            XDialogCloseDirective,
+                            XDialogTitleDirective,
+                            XDialogContentDirective,
+                            XDialogActionsDirective,
+                            XDialogContainerComponent,
+                            XDialogProperty
+                        ],
+                        exports: [
+                            XDialogComponent,
+                            XDialogCloseDirective,
+                            XDialogTitleDirective,
+                            XDialogContentDirective,
+                            XDialogActionsDirective,
+                            XDialogContainerComponent
+                        ],
                         imports: [
                             i6.CommonModule,
                             forms.FormsModule,
@@ -676,7 +918,8 @@
                             i1.XPortalModule,
                             i3.XAlertModule,
                             i5.XOutletModule
-                        ]
+                        ],
+                        providers: [XDialogService]
                     }]
             }] });
 
@@ -684,11 +927,20 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.XDialogActionsDirective = XDialogActionsDirective;
+    exports.XDialogCloseDirective = XDialogCloseDirective;
     exports.XDialogComponent = XDialogComponent;
+    exports.XDialogContainerComponent = XDialogContainerComponent;
+    exports.XDialogContentDirective = XDialogContentDirective;
     exports.XDialogModule = XDialogModule;
     exports.XDialogPortal = XDialogPortal;
     exports.XDialogPrefix = XDialogPrefix;
     exports.XDialogProperty = XDialogProperty;
+    exports.XDialogRef = XDialogRef;
+    exports.XDialogService = XDialogService;
+    exports.XDialogTitleDirective = XDialogTitleDirective;
+    exports.X_DIALOG_CONFIG_NAME = X_DIALOG_CONFIG_NAME;
+    exports.X_DIALOG_DATA = X_DIALOG_DATA;
 
     Object.defineProperty(exports, '__esModule', { value: true });