@ng-nest/ui 12.0.7 → 12.1.0

package/bundles/ng-nest-ui-drawer.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('@angular/cdk/overlay'), require('@ng-nest/ui/portal'), require('@ng-nest/ui/button'), require('@angular/common'), require('@ng-nest/ui/outlet')) :
-    typeof define === 'function' && define.amd ? define('@ng-nest/ui/drawer', ['exports', '@angular/core', '@ng-nest/ui/core', '@angular/cdk/overlay', '@ng-nest/ui/portal', '@ng-nest/ui/button', '@angular/common', '@ng-nest/ui/outlet'], 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.drawer = {}), global.ng.core, global['ng-nest'].ui.core, global.ng.cdk.overlay, global['ng-nest'].ui.portal, global['ng-nest'].ui.button, global.ng.common, global['ng-nest'].ui.outlet));
-}(this, (function (exports, i0, i3, i1, i2, i4, i5, i6) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@angular/cdk/overlay'), require('@ng-nest/ui/portal'), require('@ng-nest/ui/button'), require('@angular/common'), require('@ng-nest/ui/outlet'), require('@angular/cdk/portal'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@ng-nest/ui/drawer', ['exports', '@angular/core', '@ng-nest/ui/core', '@angular/cdk/overlay', '@ng-nest/ui/portal', '@ng-nest/ui/button', '@angular/common', '@ng-nest/ui/outlet', '@angular/cdk/portal', 'rxjs/operators'], 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.drawer = {}), global.ng.core, global["ng-nest"].ui.core, global.ng.cdk.overlay, global["ng-nest"].ui.portal, global["ng-nest"].ui.button, global.ng.common, global["ng-nest"].ui.outlet, global.ng.cdk.portal, global.rxjs.operators));
+})(this, (function (exports, i0, i3, i1, i2, i4, i5, i6, i1$1, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -31,6 +29,7 @@
     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);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -258,10 +257,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -350,7 +355,8 @@
      * @decorator component
      */
     var XDrawerPrefix = 'x-drawer';
-    var X_CONFIG_NAME = 'drawer';
+    var X_DRAWER_CONFIG_NAME = 'drawer';
+    var X_DRAWER_DATA = new i0.InjectionToken('XDrawerData');
     /**
      * Drawer Property
      */
@@ -372,18 +378,27 @@
         }
         return XDrawerProperty;
     }(i3.XProperty));
-    /** @nocollapse */ XDrawerProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDrawerProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    /** @nocollapse */ XDrawerProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDrawerProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     __decorate([
         i3.XInputBoolean()
     ], XDrawerProperty.prototype, "visible", void 0);
     __decorate([
-        i3.XWithConfig(X_CONFIG_NAME, 'right')
+        i3.XWithConfig(X_DRAWER_CONFIG_NAME, 'right')
     ], XDrawerProperty.prototype, "placement", void 0);
     __decorate([
-        i3.XWithConfig(X_CONFIG_NAME, '30%')
+        i3.XWithConfig(X_DRAWER_CONFIG_NAME, '30%')
     ], XDrawerProperty.prototype, "size", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerProperty, decorators: [{
+    __decorate([
+        i3.XWithConfig(X_DRAWER_CONFIG_NAME, true)
+    ], XDrawerProperty.prototype, "backdropClose", void 0);
+    __decorate([
+        i3.XWithConfig(X_DRAWER_CONFIG_NAME, true)
+    ], XDrawerProperty.prototype, "hasBackdrop", void 0);
+    __decorate([
+        i3.XWithConfig(X_DRAWER_CONFIG_NAME, '')
+    ], XDrawerProperty.prototype, "className", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { title: [{
@@ -394,6 +409,12 @@
                     type: i0.Input
                 }], size: [{
                     type: i0.Input
+                }], backdropClose: [{
+                    type: i0.Input
+                }], hasBackdrop: [{
+                    type: i0.Input
+                }], className: [{
+                    type: i0.Input
                 }], close: [{
                     type: i0.Output
                 }], visibleChange: [{
@@ -418,7 +439,8 @@
             this.setClassMap();
         };
         XDrawerComponent.prototype.ngOnChanges = function (simples) {
-            i3.XIsChange(simples.visible) && this.setVisible();
+            var visible = simples.visible;
+            i3.XIsChange(visible) && this.setVisible();
         };
         XDrawerComponent.prototype.ngOnDestroy = function () {
             this.unsubscribe();
@@ -475,9 +497,9 @@
         };
         return XDrawerComponent;
     }(XDrawerProperty));
-    /** @nocollapse */ XDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.Overlay }, { token: i2__namespace.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i3__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XDrawerComponent, selector: "x-drawer", viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:.5rem 1rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.25rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem .5rem;height:calc(100% - 2.5rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [i3.XSlideAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerComponent, decorators: [{
+    /** @nocollapse */ XDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.Overlay }, { token: i2__namespace.XPortalService }, { token: i0__namespace.ViewContainerRef }, { token: i3__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerComponent, selector: "x-drawer", viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], components: [{ type: i4__namespace.XButtonComponent, selector: "x-button" }], directives: [{ type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [i3.XSlideAnimation], 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: XDrawerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XDrawerPrefix,
@@ -492,20 +514,226 @@
                     args: ['drawerTpl', { static: true }]
                 }] } });
 
+    var XDrawerContainerComponent = /** @class */ (function (_super) {
+        __extends(XDrawerContainerComponent, _super);
+        function XDrawerContainerComponent() {
+            var _this = _super.call(this) || this;
+            _this._has = true;
+            _this.animationChanged = new i0.EventEmitter();
+            return _this;
+        }
+        XDrawerContainerComponent.prototype.done = function (_a) {
+            var toState = _a.toState, totalTime = _a.totalTime;
+            this.animationChanged.next({ action: 'done', state: toState, totalTime: totalTime });
+        };
+        XDrawerContainerComponent.prototype.start = function (_a) {
+            var toState = _a.toState, totalTime = _a.totalTime;
+            this.animationChanged.next({ action: 'start', state: toState, totalTime: totalTime });
+        };
+        XDrawerContainerComponent.prototype.attachComponentPortal = function (portal) {
+            if (this.portalOutlet.hasAttached()) {
+                throw Error('drawer portal has attached');
+            }
+            return this.portalOutlet.attachComponentPortal(portal);
+        };
+        XDrawerContainerComponent.prototype.attachTemplatePortal = function (portal) {
+            if (this.portalOutlet.hasAttached()) {
+                throw Error('drawer portal has attached');
+            }
+            return this.portalOutlet.attachTemplatePortal(portal);
+        };
+        return XDrawerContainerComponent;
+    }(i1$1.BasePortalOutlet));
+    /** @nocollapse */ XDrawerContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XDrawerContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerContainerComponent, selector: "x-drawer-container", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-container": "this._has", "@x-slide-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-drawer-container{margin:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-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-drawer-container-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], directives: [{ type: i1__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [i3.XSlideAnimation], 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: XDrawerContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'x-drawer-container',
+                        templateUrl: './drawer-container.component.html',
+                        styleUrls: ['./drawer-container.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        animations: [i3.XSlideAnimation]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-drawer-container']
+                }], placement: [{
+                    type: i0.HostBinding,
+                    args: ['@x-slide-animation']
+                }], done: [{
+                    type: i0.HostListener,
+                    args: ['@x-slide-animation.done', ['$event']]
+                }], start: [{
+                    type: i0.HostListener,
+                    args: ['@x-slide-animation.start', ['$event']]
+                }], portalOutlet: [{
+                    type: i0.ViewChild,
+                    args: [i1$1.CdkPortalOutlet, { static: true }]
+                }] } });
+
+    // TODO: add more function
+    var XDrawerRef = /** @class */ (function () {
+        function XDrawerRef(overlayRef, containerInstance) {
+            this.overlayRef = overlayRef;
+            this.containerInstance = containerInstance;
+        }
+        XDrawerRef.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 XDrawerRef;
+    }());
+
+    var XDrawerCloseDirective = /** @class */ (function () {
+        function XDrawerCloseDirective(drawerRef) {
+            this.drawerRef = drawerRef;
+        }
+        XDrawerCloseDirective.prototype.onCloseClick = function () {
+            this.drawerRef && this.drawerRef.close();
+        };
+        return XDrawerCloseDirective;
+    }());
+    /** @nocollapse */ XDrawerCloseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerCloseDirective, deps: [{ token: XDrawerRef, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDrawerCloseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerCloseDirective, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerCloseDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-drawer-close]"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: XDrawerRef, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { onCloseClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+    var XDrawerTitleDirective = /** @class */ (function () {
+        function XDrawerTitleDirective() {
+            this._has = true;
+        }
+        return XDrawerTitleDirective;
+    }());
+    /** @nocollapse */ XDrawerTitleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerTitleDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDrawerTitleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerTitleDirective, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-container-title": "this._has" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerTitleDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-drawer-title]"
+                    }]
+            }], propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-drawer-container-title']
+                }] } });
+    var XDrawerContentDirective = /** @class */ (function () {
+        function XDrawerContentDirective() {
+            this._has = true;
+        }
+        return XDrawerContentDirective;
+    }());
+    /** @nocollapse */ XDrawerContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerContentDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ XDrawerContentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerContentDirective, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-container-content": "this._has" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerContentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[x-drawer-content], x-drawer-content"
+                    }]
+            }], propDecorators: { _has: [{
+                    type: i0.HostBinding,
+                    args: ['class.x-drawer-container-content']
+                }] } });
+
+    var XDrawerService = /** @class */ (function () {
+        function XDrawerService(portalService, configService, overlay) {
+            this.portalService = portalService;
+            this.configService = configService;
+            this.overlay = overlay;
+            this.default = {
+                placement: 'right',
+                size: '30%',
+                hasBackdrop: true,
+                backdropClose: true
+            };
+            this.configDefault = this.configService.getConfigForComponent(X_DRAWER_CONFIG_NAME);
+            Object.assign(this.default, this.configDefault);
+        }
+        XDrawerService.prototype.create = function (content, option) {
+            if (option === void 0) { option = {}; }
+            i3.fillDefault(option, this.default);
+            var width = ['left', 'right'].includes(option.placement) ? option.size : '100%';
+            var height = ['top', 'bottom'].includes(option.placement) ? option.size : '100%';
+            var portal = this.portalService.attach({
+                content: XDrawerContainerComponent,
+                viewContainerRef: option.viewContainerRef,
+                overlayConfig: {
+                    hasBackdrop: option.hasBackdrop,
+                    panelClass: option.className,
+                    scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                    positionStrategy: this.portalService.setPosition(option.placement, width, height)
+                }
+            });
+            var _a = portal || {}, overlayRef = _a.overlayRef, componentRef = _a.componentRef;
+            var instance = (componentRef || {}).instance;
+            instance.placement = option.placement;
+            var drawerRef = new XDrawerRef(overlayRef, instance);
+            if (content instanceof i0.TemplateRef) {
+                instance.attachTemplatePortal(new i1$1.TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, drawerRef: drawerRef }));
+            }
+            else {
+                var injector = this.portalService.createInjector([
+                    { provide: X_DRAWER_DATA, useValue: option.data },
+                    { provide: XDrawerRef, useValue: drawerRef }
+                ]);
+                instance.attachComponentPortal(new i1$1.ComponentPortal(content, option.viewContainerRef, injector));
+            }
+            if (option.hasBackdrop && option.backdropClose && overlayRef)
+                overlayRef.backdropClick().subscribe(function () {
+                    drawerRef.close();
+                });
+            return drawerRef;
+        };
+        return XDrawerService;
+    }());
+    /** @nocollapse */ XDrawerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerService, deps: [{ token: i2__namespace.XPortalService }, { token: i3__namespace.XConfigService }, { token: i1__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ XDrawerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i2__namespace.XPortalService }, { type: i3__namespace.XConfigService }, { type: i1__namespace.Overlay }]; } });
+
     var XDrawerModule = /** @class */ (function () {
         function XDrawerModule() {
         }
         return XDrawerModule;
     }());
-    /** @nocollapse */ XDrawerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XDrawerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerModule, declarations: [XDrawerComponent, XDrawerProperty], imports: [i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule], exports: [XDrawerComponent] });
-    /** @nocollapse */ XDrawerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerModule, imports: [[i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XDrawerModule, decorators: [{
+    /** @nocollapse */ XDrawerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ XDrawerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerModule, declarations: [XDrawerComponent,
+            XDrawerCloseDirective,
+            XDrawerTitleDirective,
+            XDrawerContentDirective,
+            XDrawerContainerComponent,
+            XDrawerProperty], imports: [i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule], exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent] });
+    /** @nocollapse */ XDrawerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerModule, providers: [XDrawerService], imports: [[i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XDrawerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [XDrawerComponent, XDrawerProperty],
-                        exports: [XDrawerComponent],
-                        imports: [i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule]
+                        declarations: [
+                            XDrawerComponent,
+                            XDrawerCloseDirective,
+                            XDrawerTitleDirective,
+                            XDrawerContentDirective,
+                            XDrawerContainerComponent,
+                            XDrawerProperty
+                        ],
+                        exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent],
+                        imports: [i5.CommonModule, i6.XOutletModule, i4.XButtonModule, i2.XPortalModule],
+                        providers: [XDrawerService]
                     }]
             }] });
 
@@ -513,12 +741,20 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.XDrawerCloseDirective = XDrawerCloseDirective;
     exports.XDrawerComponent = XDrawerComponent;
+    exports.XDrawerContainerComponent = XDrawerContainerComponent;
+    exports.XDrawerContentDirective = XDrawerContentDirective;
     exports.XDrawerModule = XDrawerModule;
     exports.XDrawerPrefix = XDrawerPrefix;
     exports.XDrawerProperty = XDrawerProperty;
+    exports.XDrawerRef = XDrawerRef;
+    exports.XDrawerService = XDrawerService;
+    exports.XDrawerTitleDirective = XDrawerTitleDirective;
+    exports.X_DRAWER_CONFIG_NAME = X_DRAWER_CONFIG_NAME;
+    exports.X_DRAWER_DATA = X_DRAWER_DATA;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ng-nest-ui-drawer.umd.js.map