@alauda/ui 6.1.3-beta.11 → 6.1.3-beta.12

package/bundles/alauda-ui.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/table'), require('@angular/common'), require('@angular/common/http'), require('@angular/animations'), require('@angular/cdk/collections'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('clipboard-polyfill'), require('@angular/cdk/scrolling'), require('@angular/cdk/bidi'), require('@angular/forms'), require('@angular/cdk/observers'), require('@angular/cdk/accordion'), require('dayjs'), require('dayjs/plugin/customParseFormat'), require('dayjs/plugin/isBetween')) :
-    typeof define === 'function' && define.amd ? define('@alauda/ui', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/table', '@angular/common', '@angular/common/http', '@angular/animations', '@angular/cdk/collections', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/portal', 'clipboard-polyfill', '@angular/cdk/scrolling', '@angular/cdk/bidi', '@angular/forms', '@angular/cdk/observers', '@angular/cdk/accordion', 'dayjs', 'dayjs/plugin/customParseFormat', 'dayjs/plugin/isBetween'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.alauda = global.alauda || {}, global.alauda.ui = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.ng.cdk.table, global.ng.common, global.ng.common.http, global.ng.animations, global.ng.cdk.collections, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.portal, global.clipboardPolyfill, global.ng.cdk.scrolling, global.ng.cdk.bidi, global.ng.forms, global.ng.cdk.observers, global.ng.cdk.accordion, global.dayjs, global.customParseFormat, global.isBetween));
-}(this, (function (exports, i0, rxjs, operators, table, common, http, animations, collections, a11y, i1, portal, clipboardPolyfill, i2, bidi, forms, observers, accordion, dayjs, customParseFormat, isBetween) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/table'), require('@angular/common'), require('@angular/common/http'), require('@angular/animations'), require('@angular/cdk/collections'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('clipboard-polyfill'), require('@angular/cdk/bidi'), require('@angular/forms'), require('@angular/cdk/observers'), require('@angular/cdk/scrolling'), require('@angular/cdk/accordion'), require('dayjs'), require('dayjs/plugin/customParseFormat'), require('dayjs/plugin/isBetween')) :
+    typeof define === 'function' && define.amd ? define('@alauda/ui', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/table', '@angular/common', '@angular/common/http', '@angular/animations', '@angular/cdk/collections', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/portal', 'clipboard-polyfill', '@angular/cdk/bidi', '@angular/forms', '@angular/cdk/observers', '@angular/cdk/scrolling', '@angular/cdk/accordion', 'dayjs', 'dayjs/plugin/customParseFormat', 'dayjs/plugin/isBetween'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.alauda = global.alauda || {}, global.alauda.ui = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.ng.cdk.table, global.ng.common, global.ng.common.http, global.ng.animations, global.ng.cdk.collections, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.portal, global.clipboardPolyfill, global.ng.cdk.bidi, global.ng.forms, global.ng.cdk.observers, global.ng.cdk.scrolling, global.ng.cdk.accordion, global.dayjs, global.customParseFormat, global.isBetween));
+}(this, (function (exports, i0, rxjs, operators, table, common, http, animations, collections, a11y, overlay, portal, clipboardPolyfill, bidi, forms, observers, scrolling, accordion, dayjs, customParseFormat, isBetween) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1716,7 +1716,7 @@
                 },] }
     ];
     BackTopComponent.ctorParameters = function () { return [
-        { type: i1.CdkScrollable, decorators: [{ type: i0.Optional }] }
+        { type: overlay.CdkScrollable, decorators: [{ type: i0.Optional }] }
     ]; };
     BackTopComponent.propDecorators = {
         visibilityHeight: [{ type: i0.Input }],
@@ -2077,7 +2077,7 @@
                 Object.assign(Object.assign({}, originPosition.fallback), overlayPosition.fallback),
             ]);
             var scrollStrategy = this.overlay.scrollStrategies.reposition();
-            var config = new i1.OverlayConfig({
+            var config = new overlay.OverlayConfig({
                 positionStrategy: positionStrategy,
                 scrollStrategy: scrollStrategy,
             });
@@ -2160,7 +2160,7 @@
         { type: i0.Directive }
     ];
     BaseTooltip.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2327,7 +2327,7 @@
                 },] }
     ];
     TooltipCopyDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2374,7 +2374,7 @@
                 },] }
     ];
     TooltipDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2394,7 +2394,7 @@
     }());
     TooltipModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule],
+                    imports: [common.CommonModule, overlay.OverlayModule],
                     declarations: [
                         TooltipDirective,
                         TooltipComponent,
@@ -2518,7 +2518,7 @@
             this.afterOpen$ = new rxjs.Subject();
             this.afterClosed$ = new rxjs.Subject();
             dialogInstance.id = this.id;
-            this.scrollable = new i1.CdkScrollable({ nativeElement: overlayRef.overlayElement }, scrollDispatcher, ngZone);
+            this.scrollable = new overlay.CdkScrollable({ nativeElement: overlayRef.overlayElement }, scrollDispatcher, ngZone);
             this.scrollable.ngOnInit();
         }
         DialogRef.prototype.close = function (result) {
@@ -2902,14 +2902,13 @@
     }());
     DialogService.DIALOG_OVERLAY_PANE_CLASS = 'aui-dialog-overlay-pane';
     DialogService.DIALOG_BACKDROP_CLASS = 'aui-dialog-backdrop';
-    DialogService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DialogService_Factory() { return new DialogService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(i2.ScrollDispatcher), i0.ɵɵinject(i0.NgZone)); }, token: DialogService, providedIn: "root" });
     DialogService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+        { type: i0.Injectable }
     ];
     DialogService.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.Injector },
-        { type: i1.ScrollDispatcher },
+        { type: overlay.ScrollDispatcher },
         { type: i0.NgZone }
     ]; };
 
@@ -2954,7 +2953,7 @@
             return _this;
         }
         return DialogContentComponent;
-    }(i1.CdkScrollable));
+    }(overlay.CdkScrollable));
     DialogContentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dialog-content',
@@ -2966,7 +2965,7 @@
     ];
     DialogContentComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: i1.ScrollDispatcher },
+        { type: overlay.ScrollDispatcher },
         { type: i0.NgZone },
         { type: bidi.Directionality }
     ]; };
@@ -3033,7 +3032,7 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        i1.OverlayModule,
+                        overlay.OverlayModule,
                         portal.PortalModule,
                         IconModule,
                         ButtonModule,
@@ -3054,6 +3053,7 @@
                         DialogCloseDirective,
                     ],
                     entryComponents: [DialogComponent, ConfirmDialogComponent],
+                    providers: [DialogService],
                 },] }
     ];
 
@@ -5112,7 +5112,7 @@
                 },] }
     ];
     DropdownDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -7067,9 +7067,10 @@
     }());
     MessageModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, IconModule],
+                    imports: [common.CommonModule, overlay.OverlayModule, IconModule],
                     declarations: [MessageWrapperComponent, MessageComponent],
                     entryComponents: [MessageWrapperComponent, MessageComponent],
+                    providers: [MessageService],
                 },] }
     ];
 
@@ -7168,12 +7169,11 @@
         }
         return MessageService;
     }(BaseMessage));
-    MessageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MessageService_Factory() { return new MessageService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(i0.ApplicationRef), i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(MESSAGE_CONFIG, 8)); }, token: MessageService, providedIn: "root" });
     MessageService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+        { type: i0.Injectable }
     ];
     MessageService.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.Injector },
         { type: i0.ApplicationRef },
         { type: i0.ComponentFactoryResolver },
@@ -7308,19 +7308,6 @@
         onMouseLeave: [{ type: i0.HostListener, args: ['mouseleave',] }]
     };
 
-    var NotificationModule = /** @class */ (function () {
-        function NotificationModule() {
-        }
-        return NotificationModule;
-    }());
-    NotificationModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, portal.PortalModule, IconModule],
-                    declarations: [NotificationWrapperComponent, NotificationComponent],
-                    entryComponents: [NotificationWrapperComponent, NotificationComponent],
-                },] }
-    ];
-
     var NOTIFICATION_CONFIG = new i0.InjectionToken('NOTIFICATION_CONFIG');
     var NOTIFICATION_DEFAULT_CONFIG = {
         duration: 6000,
@@ -7334,18 +7321,31 @@
         }
         return NotificationService;
     }(BaseMessage));
-    NotificationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NotificationService_Factory() { return new NotificationService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(i0.ApplicationRef), i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(NOTIFICATION_CONFIG, 8)); }, token: NotificationService, providedIn: "root" });
     NotificationService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+        { type: i0.Injectable }
     ];
     NotificationService.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.Injector },
         { type: i0.ApplicationRef },
         { type: i0.ComponentFactoryResolver },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [NOTIFICATION_CONFIG,] }] }
     ]; };
 
+    var NotificationModule = /** @class */ (function () {
+        function NotificationModule() {
+        }
+        return NotificationModule;
+    }());
+    NotificationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule, IconModule],
+                    declarations: [NotificationWrapperComponent, NotificationComponent],
+                    entryComponents: [NotificationWrapperComponent, NotificationComponent],
+                    providers: [NotificationService],
+                },] }
+    ];
+
     var TabBodyComponent = /** @class */ (function () {
         function TabBodyComponent() {
             this.content$ = new rxjs.BehaviorSubject(null);
@@ -7943,7 +7943,7 @@
     ];
     TabHeaderComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: i2.ViewportRuler }
+        { type: scrolling.ViewportRuler }
     ]; };
     TabHeaderComponent.propDecorators = {
         type: [{ type: i0.Input }],
@@ -9074,7 +9074,7 @@
                 },] }
     ];
     AutoCompleteDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -9306,7 +9306,7 @@
     }());
     AutocompleteModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, TooltipModule],
+                    imports: [common.CommonModule, overlay.OverlayModule, TooltipModule],
                     declarations: [
                         AutoCompleteDirective,
                         CustomAutoCompleteDirective,
@@ -9935,7 +9935,7 @@
                     exportAs: 'viewPort',
                     providers: [
                         {
-                            provide: i2.VIRTUAL_SCROLL_STRATEGY,
+                            provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
                             useFactory: _tableVirtualScrollDirectiveStrategyFactory,
                             deps: [i0.forwardRef(function () { return FixedSizeTableVirtualScrollDirective; })],
                         },
@@ -9950,21 +9950,21 @@
         table: [{ type: i0.ContentChild, args: [TableComponent, { static: false },] }]
     };
 
-    var ɵ0 = i2._fixedSizeVirtualScrollStrategyFactory;
+    var ɵ0 = scrolling._fixedSizeVirtualScrollStrategyFactory;
     var FixedSizeVirtualScrollDirective = /** @class */ (function (_super) {
         __extends(FixedSizeVirtualScrollDirective, _super);
         function FixedSizeVirtualScrollDirective() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return FixedSizeVirtualScrollDirective;
-    }(i2.CdkFixedSizeVirtualScroll));
+    }(scrolling.CdkFixedSizeVirtualScroll));
     FixedSizeVirtualScrollDirective.decorators = [
         { type: i0.Directive, args: [{
                     // tslint:disable-next-line: directive-selector
                     selector: 'aui-virtual-scroll-viewport[itemSize]',
                     providers: [
                         {
-                            provide: i2.VIRTUAL_SCROLL_STRATEGY,
+                            provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
                             useFactory: ɵ0,
                             deps: [i0.forwardRef(function () { return FixedSizeVirtualScrollDirective; })],
                         },
@@ -10008,7 +10008,7 @@
             configurable: true
         });
         return VirtualForOfDirective;
-    }(i2.CdkVirtualForOf));
+    }(scrolling.CdkVirtualForOf));
     VirtualForOfDirective.decorators = [
         { type: i0.Directive, args: [{
                     selector: '[auiVirtualFor][auiVirtualForOf]',
@@ -10027,7 +10027,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return VirtualScrollViewportComponent;
-    }(i2.CdkVirtualScrollViewport));
+    }(scrolling.CdkVirtualScrollViewport));
     VirtualScrollViewportComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-virtual-scroll-viewport',
@@ -10042,7 +10042,7 @@
                     preserveWhitespaces: false,
                     providers: [
                         {
-                            provide: i2.CdkVirtualScrollViewport,
+                            provide: scrolling.CdkVirtualScrollViewport,
                             useExisting: VirtualScrollViewportComponent,
                         },
                     ],
@@ -10256,7 +10256,7 @@
         { type: i0.ApplicationRef },
         { type: i0.Injector },
         { type: i0.ElementRef },
-        { type: i2.CdkScrollable, decorators: [{ type: i0.Optional }] }
+        { type: scrolling.CdkScrollable, decorators: [{ type: i0.Optional }] }
     ]; };
     AnchorDirective.propDecorators = {
         auiAnchor: [{ type: i0.Input }],
@@ -11062,7 +11062,7 @@
                         forms.FormsModule,
                         forms.ReactiveFormsModule,
                         portal.PortalModule,
-                        i1.OverlayModule,
+                        overlay.OverlayModule,
                         common.CommonModule,
                         InputModule,
                         TooltipModule,
@@ -11912,10 +11912,15 @@
     ];
 
     (function (DrawerSize) {
-        DrawerSize["Small"] = "400px";
-        DrawerSize["Medium"] = "600px";
-        DrawerSize["Large"] = "800px";
+        DrawerSize["Small"] = "small";
+        DrawerSize["Medium"] = "medium";
+        DrawerSize["Big"] = "big";
     })(exports.DrawerSize || (exports.DrawerSize = {}));
+    var DrawerRef = /** @class */ (function () {
+        function DrawerRef() {
+        }
+        return DrawerRef;
+    }());
 
     /**
      * @packageDocumentation
@@ -11952,26 +11957,65 @@
                 },] }
     ];
 
+    var _c;
     var DATA = new i0.InjectionToken('drawer-data');
     var DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
-    var DrawerComponent = /** @class */ (function () {
-        function DrawerComponent(viewContainerRef, overlay) {
-            this.viewContainerRef = viewContainerRef;
-            this.overlay = overlay;
-            this.size = exports.DrawerSize.Medium;
-            this.offsetY = '0px';
-            this.hideOnClickOutside = false;
-            this.showClose = true;
-            this.divider = true;
-            this.width = exports.DrawerSize.Medium;
-            this.visibleChange = new i0.EventEmitter();
-            this.destroy$ = new rxjs.Subject();
-            this.templateContext = {};
+    var SIZE_MAPPER = (_c = {},
+        _c[exports.DrawerSize.Small] = 400,
+        _c[exports.DrawerSize.Medium] = 600,
+        _c[exports.DrawerSize.Big] = 800,
+        _c);
+    var DrawerComponent = /** @class */ (function (_super) {
+        __extends(DrawerComponent, _super);
+        function DrawerComponent(viewContainerRef, overlay, injector, cdr) {
+            var _this = _super.call(this) || this;
+            _this.viewContainerRef = viewContainerRef;
+            _this.overlay = overlay;
+            _this.injector = injector;
+            _this.cdr = cdr;
+            _this.size = exports.DrawerSize.Medium;
+            _this.offsetY = '0px';
+            _this.hideOnClickOutside = false;
+            _this.showClose = true;
+            _this._value = SIZE_MAPPER[exports.DrawerSize.Medium];
+            _this.afterClosed$ = new rxjs.Subject();
+            _this.afterOpen$ = new rxjs.Subject();
+            _this.drawerViewInit = new i0.EventEmitter();
+            _this.close = new i0.EventEmitter();
+            _this.onDestroy$ = new rxjs.Subject();
+            _this.isTemplateRef = isTemplateRef;
+            _this.componentInstance = null;
+            _this.templateContext = {};
+            return _this;
         }
+        Object.defineProperty(DrawerComponent.prototype, "width", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DrawerComponent.prototype, "drawerClasses", {
             get: function () {
                 var _c;
-                return Object.assign({ 'aui-drawer': true, hasDivider: this.divider, isOpen: this.visible }, (this.drawerClass ? (_c = {}, _c[this.drawerClass] = true, _c) : null));
+                return Object.assign({ 'aui-drawer': true }, (!this.drawerClass ? null : (_c = {}, _c[this.drawerClass] = true, _c)));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrawerComponent.prototype, "afterClosed", {
+            get: function () {
+                return this.afterClosed$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrawerComponent.prototype, "afterOpen", {
+            get: function () {
+                return this.afterOpen$.asObservable();
             },
             enumerable: false,
             configurable: true
@@ -11987,24 +12031,26 @@
             this.attachOverlay();
             this.updateBodyOverflow();
             this.templateContext = { $implicit: this.contentParams };
+            this.cdr.detectChanges();
         };
-        DrawerComponent.prototype.open = function () {
-            this.visibleChange.emit(true);
-            this.updateBodyOverflow();
-        };
-        DrawerComponent.prototype.close = function () {
-            this.visibleChange.emit(false);
-            this.updateBodyOverflow();
-        };
-        DrawerComponent.prototype.maskClick = function () {
-            if (this.maskClosable && this.mask) {
-                this.close();
+        DrawerComponent.prototype.ngOnChanges = function (changes) {
+            var visible = changes.visible;
+            if (visible) {
+                var value = visible.currentValue;
+                if (value) {
+                    this.open();
+                }
+                else {
+                    this.dispose();
+                }
             }
         };
-        DrawerComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-            this.disposeOverlay();
+        DrawerComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.attachBodyContent();
+            setTimeout(function () {
+                _this.drawerViewInit.emit();
+            }, 0);
         };
         DrawerComponent.prototype.attachOverlay = function () {
             var _this = this;
@@ -12016,7 +12062,7 @@
                 this.overlayRef.attach(this.portal);
                 this.overlayRef
                     .outsidePointerEvents()
-                    .pipe(operators.takeUntil(this.destroy$))
+                    .pipe(operators.takeUntil(this.onDestroy$))
                     .subscribe(function (event) {
                     var _a, _b;
                     // 判断鼠标点击事件的 target 是否为 overlay-container 的子节点，如果是，则不关闭 drawer。
@@ -12027,18 +12073,38 @@
                         !((_b = (_a = _this.overlayRef.hostElement) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
                         event.stopPropagation();
                         event.preventDefault();
-                        _this.close();
+                        _this.dispose();
                     }
                 });
             }
         };
         DrawerComponent.prototype.getOverlayConfig = function () {
-            return new i1.OverlayConfig({
+            return new overlay.OverlayConfig({
                 panelClass: DRAWER_OVERLAY_CLASS,
                 positionStrategy: this.overlay.position().global(),
                 scrollStrategy: this.overlay.scrollStrategies.block(),
             });
         };
+        DrawerComponent.prototype.attachBodyContent = function () {
+            var _a, _b;
+            (_a = this.bodyPortalOutlet) === null || _a === void 0 ? void 0 : _a.dispose();
+            var content = this.content || this.contentTemplate;
+            if (content instanceof i0.Type) {
+                var componentPortal = new portal.ComponentPortal(content, null, i0.Injector.create({
+                    providers: [
+                        {
+                            provide: DATA,
+                            useValue: this.contentParams,
+                        },
+                    ],
+                    parent: this.injector,
+                }));
+                var componentRef = (_b = this.bodyPortalOutlet) === null || _b === void 0 ? void 0 : _b.attachComponentPortal(componentPortal);
+                this.componentInstance = componentRef.instance;
+                Object.assign(componentRef.instance, this.contentParams);
+                componentRef.changeDetectorRef.detectChanges();
+            }
+        };
         DrawerComponent.prototype.updateBodyOverflow = function () {
             if (this.overlayRef) {
                 if (this.visible) {
@@ -12049,44 +12115,74 @@
                 }
             }
         };
+        DrawerComponent.prototype.open = function () {
+            this.visible = true;
+            this.afterOpen$.next();
+            this.afterOpen$.complete();
+            this.updateBodyOverflow();
+            this.cdr.markForCheck();
+        };
+        DrawerComponent.prototype.dispose = function (result) {
+            if (result === void 0) { result = null; }
+            this.visible = false;
+            this.close.emit();
+            this.afterClosed$.next(result);
+            this.afterClosed$.complete();
+            this.updateBodyOverflow();
+            this.cdr.markForCheck();
+        };
         DrawerComponent.prototype.disposeOverlay = function () {
             if (this.overlayRef) {
                 this.overlayRef.dispose();
             }
             this.overlayRef = null;
         };
+        DrawerComponent.prototype.maskClick = function () {
+            if (this.maskClosable && this.mask) {
+                this.dispose();
+            }
+        };
+        DrawerComponent.prototype.ngOnDestroy = function () {
+            this.onDestroy$.next();
+            this.disposeOverlay();
+        };
         return DrawerComponent;
-    }());
+    }(DrawerRef));
     DrawerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-drawer',
-                    template: "<ng-template #drawerTemplate>\n  <div\n    *ngIf=\"mask\"\n    class=\"aui-drawer-mask\"\n    [class.isOpen]=\"visible\"\n    (click)=\"maskClick()\"\n  ></div>\n  <div\n    [ngClass]=\"drawerClasses\"\n    [ngStyle]=\"{\n      transform: transform,\n      width: width,\n      marginTop: offsetY\n    }\"\n  >\n    <div *ngIf=\"headerRef || showClose\" class=\"aui-drawer__header-wrapper\">\n      <div class=\"aui-drawer__header\">\n        <ng-content select=\"[auiDrawerHeader]\"></ng-content>\n      </div>\n      <div *ngIf=\"showClose\" class=\"aui-drawer__close\" (click)=\"close()\">\n        <aui-icon icon=\"close\"></aui-icon>\n      </div>\n    </div>\n\n    <div class=\"aui-drawer__content\">\n      <ng-content></ng-content>\n    </div>\n\n    <div class=\"aui-drawer__footer\">\n      <ng-content select=\"[auiDrawerFooter]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: "<ng-template #drawerTemplate>\n  <div\n    *ngIf=\"mask\"\n    class=\"aui-drawer-mask\"\n    [class.isOpen]=\"visible\"\n    (click)=\"maskClick()\"\n  ></div>\n  <div\n    [style.marginTop]=\"offsetY\"\n    [ngClass]=\"drawerClasses\"\n    [class.isOpen]=\"visible\"\n    [ngStyle]=\"{\n      transform: transform,\n      width: width + 'px'\n    }\"\n  >\n    <div class=\"aui-drawer__content\">\n      <div class=\"aui-drawer__body-wrapper\">\n        <div class=\"aui-drawer__header\">\n          <div class=\"aui-drawer__title\">\n            <ng-container\n              *ngIf=\"!isTemplateRef(title || titleTemplate); else elseTemplate\"\n            >\n              {{ title }}\n            </ng-container>\n            <ng-template #elseTemplate>\n              <ng-container\n                *ngIf=\"title || titleTemplate\"\n                [ngTemplateOutlet]=\"title || titleTemplate\"\n                [ngTemplateOutletContext]=\"templateContext\"\n              ></ng-container>\n            </ng-template>\n          </div>\n          <div class=\"aui-drawer__close\" *ngIf=\"showClose\" (click)=\"dispose()\">\n            <aui-icon icon=\"close\"></aui-icon>\n          </div>\n        </div>\n\n        <div class=\"aui-drawer__body\">\n          <ng-template cdkPortalOutlet></ng-template>\n          <ng-container *ngIf=\"isTemplateRef(content || contentTemplate)\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                content || contentTemplate;\n                context: templateContext\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <div *ngIf=\"footer || footerTemplate\" class=\"aui-drawer__footer\">\n          <ng-container\n            *ngIf=\"!isTemplateRef(footer || footerTemplate); else elseTemplate\"\n          >\n            {{ footer }}\n          </ng-container>\n          <ng-template #elseTemplate>\n            <ng-container\n              *ngIf=\"footer || titleTemplate\"\n              [ngTemplateOutlet]=\"footer || titleTemplate\"\n              [ngTemplateOutletContext]=\"templateContext\"\n            ></ng-container>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    preserveWhitespaces: false,
-                    styles: [".aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0;opacity:.4;background-color:rgb(var(--aui-color-n-0))}.aui-drawer-mask.isOpen{height:100%}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;display:flex;flex-direction:column;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));transition:transform .3s ease-in-out}.aui-drawer.isOpen{box-shadow:0 4px 16px 0 rgba(var(--aui-color-n-1),.2)}.aui-drawer__header-wrapper{margin:20px 20px 0;padding-bottom:16px;display:flex;justify-content:space-between;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer__header{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);color:rgb(var(--aui-color-n-1));font-weight:var(--aui-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{margin-left:16px;display:flex;align-items:center;font-size:var(--aui-icon-size-m);color:rgb(var(--aui-color-n-4));cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary))}.aui-drawer__content{margin:16px 20px;flex:1;overflow:auto}.aui-drawer__content::-webkit-scrollbar{width:4px;height:4px}.aui-drawer__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-drawer__footer{margin:0 20px 20px;padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}"]
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0;opacity:.4;background-color:rgb(var(--aui-color-n-0))}.aui-drawer-mask.isOpen{height:100%}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1))}.aui-drawer.isOpen .aui-drawer__content{box-shadow:0 4px 16px 0 rgba(var(--aui-color-n-1),.2)}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.aui-drawer__header{margin:20px 20px 0;padding-bottom:16px;display:flex;justify-content:space-between;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);color:rgb(var(--aui-color-n-1));font-weight:var(--aui-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;margin-left:16px;display:flex;align-items:center;font-size:var(--aui-icon-size-m);color:rgb(var(--aui-color-n-4));cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;position:relative;z-index:1}.aui-drawer__body{margin:16px 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{margin:0 20px 20px;padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}"]
                 },] }
     ];
     DrawerComponent.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
-        { type: i1.Overlay }
+        { type: overlay.Overlay },
+        { type: i0.Injector },
+        { type: i0.ChangeDetectorRef }
     ]; };
     DrawerComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        footer: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
         offsetY: [{ type: i0.Input }],
         visible: [{ type: i0.Input }],
+        content: [{ type: i0.Input }],
         hideOnClickOutside: [{ type: i0.Input }],
         showClose: [{ type: i0.Input }],
         drawerClass: [{ type: i0.Input }],
-        divider: [{ type: i0.Input }],
         mask: [{ type: i0.Input }],
         maskClosable: [{ type: i0.Input }],
         width: [{ type: i0.Input }],
-        visibleChange: [{ type: i0.Output }],
+        drawerViewInit: [{ type: i0.Output }],
+        close: [{ type: i0.Output }],
         drawerTemplate: [{ type: i0.ViewChild, args: ['drawerTemplate', { static: true },] }],
         bodyPortalOutlet: [{ type: i0.ViewChild, args: [portal.CdkPortalOutlet, { static: false },] }],
-        headerRef: [{ type: i0.ContentChild, args: [DrawerHeaderDirective, { read: i0.TemplateRef },] }],
-        footerRef: [{ type: i0.ContentChild, args: [DrawerFooterDirective, { read: i0.TemplateRef },] }]
+        titleTemplate: [{ type: i0.ContentChild, args: [DrawerHeaderDirective, { read: i0.TemplateRef },] }],
+        contentTemplate: [{ type: i0.ContentChild, args: [DrawerContentDirective, { read: i0.TemplateRef },] }],
+        footerTemplate: [{ type: i0.ContentChild, args: [DrawerFooterDirective, { read: i0.TemplateRef },] }]
     };
 
     var COMMON = [
@@ -12102,30 +12198,55 @@
     }());
     DrawerModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, IconModule, IconModule, i1.OverlayModule, portal.PortalModule],
+                    imports: [common.CommonModule, IconModule, IconModule, overlay.OverlayModule, portal.PortalModule],
                     declarations: COMMON,
                     exports: COMMON,
                     entryComponents: [DrawerComponent],
+                    providers: [DrawerService],
                 },] }
     ];
 
     var DrawerService = /** @class */ (function () {
-        function DrawerService() {
+        function DrawerService(overlay) {
+            this.overlay = overlay;
+            this.unsubscribe$ = new rxjs.Subject();
         }
-        DrawerService.prototype.open = function (_) {
-            // TODO: need to be refactored
+        DrawerService.prototype.open = function (options) {
+            var _a, _b, _c;
+            (_b = (_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.dispose();
+            this.createDrawer();
+            this.updateOptions(options);
+            return (_c = this.drawerRef) === null || _c === void 0 ? void 0 : _c.instance;
         };
-        DrawerService.prototype.updateOptions = function (_) {
-            // TODO: need to be refactored
+        DrawerService.prototype.updateOptions = function (options) {
+            Object.assign(this.drawerRef.instance, options);
+        };
+        DrawerService.prototype.createDrawer = function () {
+            var _this = this;
+            this.overlayRef = this.overlay.create();
+            this.drawerRef = this.overlayRef.attach(new portal.ComponentPortal(DrawerComponent));
+            this.drawerRef.instance.drawerViewInit
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function () {
+                _this.drawerRef.instance.open();
+            });
+            this.drawerRef.instance.afterClosed
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function () {
+                _this.overlayRef.dispose();
+                _this.drawerRef = null;
+                _this.unsubscribe$.next();
+                _this.unsubscribe$.complete();
+            });
         };
         return DrawerService;
     }());
-    DrawerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrawerService_Factory() { return new DrawerService(); }, token: DrawerService, providedIn: "root" });
     DrawerService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
+        { type: i0.Injectable }
     ];
+    DrawerService.ctorParameters = function () { return [
+        { type: overlay.Overlay }
+    ]; };
 
     var StepState = {
         Default: 'default',
@@ -12134,19 +12255,19 @@
         Pending: 'pending',
     };
 
-    var _b$1, _c;
+    var _b$1, _c$1;
     var StepDefaultIcon = (_b$1 = {},
         _b$1[StepState.Default] = 'number',
         _b$1[StepState.Done] = 'check_circle',
         _b$1[StepState.Error] = 'close_circle',
         _b$1[StepState.Pending] = 'sync_circle',
         _b$1);
-    var StepSelectedIcon = (_c = {},
-        _c[StepState.Default] = 'number',
-        _c[StepState.Done] = 'check_circle_s',
-        _c[StepState.Error] = 'close_circle_s',
-        _c[StepState.Pending] = 'sync_circle_s',
-        _c);
+    var StepSelectedIcon = (_c$1 = {},
+        _c$1[StepState.Default] = 'number',
+        _c$1[StepState.Done] = 'check_circle_s',
+        _c$1[StepState.Error] = 'close_circle_s',
+        _c$1[StepState.Pending] = 'sync_circle_s',
+        _c$1);
     var StepsComponent = /** @class */ (function () {
         function StepsComponent() {
             this._steps = [];
@@ -12416,6 +12537,7 @@
     exports.DrawerFooterDirective = DrawerFooterDirective;
     exports.DrawerHeaderDirective = DrawerHeaderDirective;
     exports.DrawerModule = DrawerModule;
+    exports.DrawerRef = DrawerRef;
     exports.DrawerService = DrawerService;
     exports.DropdownActiveDirective = DropdownActiveDirective;
     exports.DropdownButtonComponent = DropdownButtonComponent;