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

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/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, i1, portal, clipboardPolyfill, bidi, forms, observers, scrolling, 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/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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1068,6 +1068,77 @@
         hasPanel: [{ type: i0.HostBinding, args: ['class.hasPanel',] }]
     };
 
+    var TableComponent = /** @class */ (function (_super) {
+        __extends(TableComponent, _super);
+        function TableComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(TableComponent.prototype, "stickyCssClass", {
+            // FIXME: workaround to override because it will break constructor if it is field, but why MatTable works?
+            // @ts-expect-error
+            get: function () {
+                return 'aui-table-sticky';
+            },
+            set: function (_stickyCssClass) {
+                //
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TableComponent.prototype.ngAfterContentInit = function () {
+            this._createPlaceholder();
+        };
+        TableComponent.prototype._createPlaceholder = function () {
+            var footerRow = this._placeholderDef;
+            if (!this._placeholderDef) {
+                return;
+            }
+            var container = this._placeholderOutlet.viewContainer;
+            container.createEmbeddedView(footerRow.templateRef);
+        };
+        TableComponent.prototype._clearPlaceholder = function () {
+            this._placeholderOutlet.viewContainer.clear();
+        };
+        TableComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this._clearPlaceholder();
+        };
+        return TableComponent;
+    }(table.CdkTable));
+    TableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-table',
+                    exportAs: 'auiTable',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    template: "\n    " + table.CDK_TABLE_TEMPLATE + "\n    <ng-container auiTablePlaceholderOutlet></ng-container>\n  ",
+                    host: {
+                        class: 'aui-table',
+                    },
+                    preserveWhitespaces: false,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: table.CDK_TABLE,
+                            useExisting: TableComponent,
+                        },
+                        {
+                            provide: collections._VIEW_REPEATER_STRATEGY,
+                            useClass: collections._DisposeViewRepeaterStrategy,
+                        },
+                        {
+                            provide: table._COALESCED_STYLE_SCHEDULER,
+                            useClass: table._CoalescedStyleScheduler,
+                        },
+                    ],
+                    styles: [".aui-table{display:block;padding:0 12px 12px;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-9));border-radius:var(--aui-border-radius-l);overflow:auto}.aui-table::-webkit-scrollbar{width:4px;height:4px}.aui-table::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-table__header-row,.aui-table__row{display:flex;align-items:center}.aui-table__header-row.hasPanel,.aui-table__row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border:solid rgb(var(--aui-color-n-8));border-width:1px 1px 0;background-color:rgb(var(--aui-color-n-10));padding:0 9px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-child{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__header-row{background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__cell,.aui-table__header-cell{flex:1}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden;word-wrap:break-word}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);font-size:var(--aui-icon-size-m);line-height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled],.aui-table__column-expand-button .aui-expand-button[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}", ".aui-table__scroll-wrapper{background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:4px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-table__scroll-wrapper .aui-table{padding:0}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before{transform:none;width:100%;left:0}.aui-table__scroll-shadow.hasTableTopShadow:before{transform:translate3d(-12px,0,0);top:28px;box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-shadow.hasTableBottomShadow:after,.aui-table__scroll-shadow.hasTableTopShadow:before{content:\"\";position:-webkit-sticky;position:sticky;display:block;width:calc(100% + 24px);height:16px;margin-top:-16px;z-index:99}.aui-table__scroll-shadow.hasTableBottomShadow:after{transform:translate3d(-12px,12px,0);bottom:0;box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}.aui-table__scroll-shadow .aui-table__header-row{margin:0;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__header-row+.aui-table__row .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-color:rgb(var(--aui-color-n-8));border-style:solid;border-width:1px 0}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:19px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:19px}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(.aui-table__scroll-shadow .aui-table__row:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before,.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(180deg,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(180deg,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(180deg,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}"]
+                },] }
+    ];
+    TableComponent.propDecorators = {
+        enableScrollWrapper: [{ type: i0.Input }],
+        _placeholderOutlet: [{ type: i0.ViewChild, args: [TablePlaceholderOutlet, { static: true },] }],
+        _placeholderDef: [{ type: i0.ContentChild, args: [TablePlaceholderDefDirective, { static: true },] }]
+    };
+
     var CLASS_PREFIX = 'aui-table';
     var SHADOW_CLASS = CLASS_PREFIX + "__scroll-shadow";
     var HAS_SCROLL_CLASS = SHADOW_CLASS + "--has-scroll";
@@ -1090,8 +1161,9 @@
                 },] }
     ];
     var TableScrollShadowDirective = /** @class */ (function () {
-        function TableScrollShadowDirective(el) {
+        function TableScrollShadowDirective(el, table) {
             this.el = el;
+            this.table = table;
             this.destroy$$ = new rxjs.Subject();
             this.SCROLL_BEFORE_END_CLASS = true;
             this.SHADOW_CLASS = true;
@@ -1124,6 +1196,8 @@
             var scrollTop = this.containerEl.scrollTop;
             this.placeClassList(this.containerEl.classList, scrollTop > 0, HAS_TABLE_TOP_SHADOW);
             this.placeClassList(this.containerEl.classList, scrollTop < scrollDis, HAS_TABLE_BOTTOM_SHADOW);
+            // 兼容屏幕缩放是 sticky多列的样式问题
+            this.table.updateStickyColumnStyles();
         };
         TableScrollShadowDirective.prototype.mutateHorizontalScroll = function () {
             var scrollDis = this.containerEl.scrollWidth - this.containerEl.offsetWidth;
@@ -1146,84 +1220,14 @@
                 },] }
     ];
     TableScrollShadowDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: TableComponent, decorators: [{ type: i0.Host }] }
     ]; };
     TableScrollShadowDirective.propDecorators = {
         SCROLL_BEFORE_END_CLASS: [{ type: i0.HostBinding, args: ["class." + SCROLL_BEFORE_END_CLASS,] }],
         SHADOW_CLASS: [{ type: i0.HostBinding, args: ["class." + SHADOW_CLASS,] }]
     };
 
-    var TableComponent = /** @class */ (function (_super) {
-        __extends(TableComponent, _super);
-        function TableComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(TableComponent.prototype, "stickyCssClass", {
-            // FIXME: workaround to override because it will break constructor if it is field, but why MatTable works?
-            // @ts-expect-error
-            get: function () {
-                return 'aui-table-sticky';
-            },
-            set: function (_stickyCssClass) {
-                //
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TableComponent.prototype.ngAfterContentInit = function () {
-            this._createPlaceholder();
-        };
-        TableComponent.prototype._createPlaceholder = function () {
-            var footerRow = this._placeholderDef;
-            if (!this._placeholderDef) {
-                return;
-            }
-            var container = this._placeholderOutlet.viewContainer;
-            container.createEmbeddedView(footerRow.templateRef);
-        };
-        TableComponent.prototype._clearPlaceholder = function () {
-            this._placeholderOutlet.viewContainer.clear();
-        };
-        TableComponent.prototype.ngOnDestroy = function () {
-            _super.prototype.ngOnDestroy.call(this);
-            this._clearPlaceholder();
-        };
-        return TableComponent;
-    }(table.CdkTable));
-    TableComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aui-table',
-                    exportAs: 'auiTable',
-                    encapsulation: i0.ViewEncapsulation.None,
-                    template: "\n    " + table.CDK_TABLE_TEMPLATE + "\n    <ng-container auiTablePlaceholderOutlet></ng-container>\n  ",
-                    host: {
-                        class: 'aui-table',
-                    },
-                    preserveWhitespaces: false,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: table.CDK_TABLE,
-                            useExisting: TableComponent,
-                        },
-                        {
-                            provide: collections._VIEW_REPEATER_STRATEGY,
-                            useClass: collections._DisposeViewRepeaterStrategy,
-                        },
-                        {
-                            provide: table._COALESCED_STYLE_SCHEDULER,
-                            useClass: table._CoalescedStyleScheduler,
-                        },
-                    ],
-                    styles: [".aui-table{display:block;padding:0 12px 12px;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-9));border-radius:var(--aui-border-radius-l);overflow:auto}.aui-table::-webkit-scrollbar{width:4px;height:4px}.aui-table::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-table__header-row,.aui-table__row{display:flex;align-items:center}.aui-table__header-row.hasPanel,.aui-table__row.hasPanel{flex-wrap:wrap}.aui-table__header-row+.aui-table__row{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row{position:relative;border:solid rgb(var(--aui-color-n-8));border-width:1px 1px 0;background-color:rgb(var(--aui-color-n-10));padding:0 10px;min-height:58px;box-sizing:content-box}.aui-table__row:first-child{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-child{border-bottom-width:1px;min-height:58px;border-bottom-left-radius:var(--aui-border-radius-l);border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__row.isDisabled:before{content:\"\";z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(var(--aui-color-n-10));opacity:.7;cursor:not-allowed}.aui-table__header-row{background-color:rgb(var(--aui-color-n-9));padding:0 10px}.aui-table__cell,.aui-table__header-cell{flex:1}.aui-table__cell{padding:15px 10px;background-color:rgb(var(--aui-color-n-10));overflow:hidden;word-wrap:break-word}.aui-table__header-cell{padding:12px 10px;font-weight:var(--aui-font-weight-bold);background-color:rgb(var(--aui-color-n-9));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-table__column-expand-button{display:flex;align-items:center;max-width:calc(10px * 2 + var(--aui-icon-size-m))}.aui-table__column-expand-button.aui-table__cell{height:58px}.aui-table__column-expand-button .aui-expand-button{display:inline-flex;justify-content:center;align-items:center;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);font-size:var(--aui-icon-size-m);line-height:var(--aui-icon-size-m);color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6));border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease-in-out}.aui-table__column-expand-button .aui-expand-button aui-icon{display:block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m)}.aui-table__column-expand-button .aui-expand-button:hover{background-color:rgb(var(--aui-color-p-7))}.aui-table__column-expand-button .aui-expand-button:active{background-color:rgb(var(--aui-color-p-5))}.aui-table__column-expand-button .aui-expand-button.isExpanded{transform:rotate(90deg);color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-primary))}.aui-table__column-expand-button .aui-expand-button.isExpanded:hover{background-color:rgb(var(--aui-color-p-1))}.aui-table__column-expand-button .aui-expand-button.isExpanded:active{background-color:rgb(var(--aui-color-p-0))}.aui-table__column-expand-button .aui-expand-button.isExpanded[disabled],.aui-table__column-expand-button .aui-expand-button[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-table__column-expand-panel{margin-top:-6px}.aui-table__column-expand-panel.aui-table__header-cell{display:none}.aui-table__column-expand-panel.aui-table__cell{width:100%;flex-shrink:0;flex-basis:100%;padding:0 10px;overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel{border-radius:var(--aui-border-radius-l);overflow:hidden}.aui-table__column-expand-panel.aui-table__cell .aui-table__cell-expand-panel-content.hasBackground{padding:16px;background-color:rgb(var(--aui-color-n-9))}", ".aui-table__scroll-wrapper{background-color:rgb(var(--aui-color-n-9));padding:0 12px 12px;border-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper::-webkit-scrollbar{width:4px;height:4px}.aui-table__scroll-wrapper::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-table__scroll-wrapper .aui-table{padding:0}.aui-table__scroll-wrapper .aui-table__header-row.aui-table-sticky{margin:0 -12px;padding:0}.aui-table__scroll-wrapper .aui-table.hasTableTopShadow:before{content:\"\";position:-webkit-sticky;position:sticky;display:block;width:calc(100% + 24px);height:16px;margin-top:-16px;transform:translate3d(-12px,0,0);z-index:99;top:28px;box-shadow:0 10px 10px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-wrapper .aui-table.hasTableBottomShadow:after{content:\"\";position:-webkit-sticky;position:sticky;display:block;width:calc(100% + 24px);height:16px;transform:translate3d(-12px,12px,0);z-index:99;bottom:0;margin-top:-16px;box-shadow:0 -10px 10px -4px rgba(var(--aui-color-n-1),.16) inset}.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableBottomShadow:after,.aui-table__scroll-wrapper .aui-table__scroll-shadow.hasTableTopShadow:before{transform:none;width:100%;left:0}.aui-table__scroll-shadow .aui-table__header-row.aui-table-sticky{margin:0}.aui-table__scroll-shadow .aui-table__row{border:none;padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__row .aui-table__cell{border-color:rgb(var(--aui-color-n-8));border-style:solid;border-width:1px 0}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:first-of-type{border-left-width:1px;padding-left:20px}.aui-table__scroll-shadow .aui-table__row .aui-table__cell:last-of-type{border-right-width:1px;padding-right:20px}.aui-table__scroll-shadow .aui-table__row:first-child:not(.aui-table__header-row) .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:first-child:not(.aui-table__header-row) .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:last-child .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-shadow .aui-table__row:not(.aui-table__scroll-shadow .aui-table__row:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-shadow .aui-table__header-row{padding:0;align-items:stretch}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:20px}.aui-table__scroll-shadow .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:20px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky:not(.aui-table__header-row):after{position:absolute;top:0;bottom:-1px;width:20px;transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-shadow--has-scroll .aui-table-sticky:not(.aui-table__header-row):before{position:absolute;top:0;bottom:-1px;content:\"\";background:linear-gradient(180deg,rgb(var(--aui-color-n-7)),rgb(var(--aui-color-n-7)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left{padding-right:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:after{right:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-left:before{right:10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right{padding-left:30px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:after{left:-10px}.aui-table__scroll-shadow--has-scroll .aui-table-sticky-border-elem-right:before{left:10px}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):after{box-shadow:inset 8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-shadow--scrolling .aui-table-sticky-border-elem-left:not(.aui-table__header-row):before{background:linear-gradient(180deg,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):after{box-shadow:inset -8px 0 4px -4px rgba(var(--aui-color-n-1),.16)}.aui-table__scroll-shadow--before-end .aui-table-sticky-border-elem-right:not(.aui-table__header-row):before{background:linear-gradient(180deg,rgb(var(--aui-color-primary)),rgb(var(--aui-color-primary)) 8px,transparent 0,transparent);width:1px;background-size:100% 14px;height:100%}"]
-                },] }
-    ];
-    TableComponent.propDecorators = {
-        enableScrollWrapper: [{ type: i0.Input }],
-        _placeholderOutlet: [{ type: i0.ViewChild, args: [TablePlaceholderOutlet, { static: true },] }],
-        _placeholderDef: [{ type: i0.ContentChild, args: [TablePlaceholderDefDirective, { static: true },] }]
-    };
-
     var TableModule = /** @class */ (function () {
         function TableModule() {
         }
@@ -2898,8 +2902,9 @@
     }());
     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 }
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     DialogService.ctorParameters = function () { return [
         { type: i1.Overlay },
@@ -3049,7 +3054,6 @@
                         DialogCloseDirective,
                     ],
                     entryComponents: [DialogComponent, ConfirmDialogComponent],
-                    providers: [DialogService],
                 },] }
     ];
 
@@ -4836,7 +4840,7 @@
     NumberInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-number-input',
-                    template: "<div\n  [class]=\"bem.block(size)\"\n  [ngClass]=\"{\n    isFocus: isFocus,\n    isDisabled: disabled\n  }\"\n  auiClickOutside\n  (auiClickOutside)=\"isFocus = false\"\n>\n  <button\n    *ngIf=\"controls\"\n    aui-button\n    type=\"button\"\n    [ngClass]=\"bem.element('decrease')\"\n    [disabled]=\"disabled || (value$ | async) <= min\"\n    (click)=\"takeOneStep(false); isFocus = true\"\n  >\n    <aui-icon icon=\"minus\"></aui-icon>\n  </button>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    (change)=\"inputChanged($any($event.target).value)\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    (focus)=\"isFocus = true\"\n    (blur)=\"isFocus = false\"\n  />\n  <button\n    *ngIf=\"controls\"\n    aui-button\n    type=\"button\"\n    [ngClass]=\"bem.element('increase')\"\n    [disabled]=\"disabled || (value$ | async) >= max\"\n    (click)=\"takeOneStep(true); isFocus = true\"\n  >\n    <aui-icon icon=\"plus\"></aui-icon>\n  </button>\n</div>\n",
+                    template: "<div\n  [class]=\"bem.block(size)\"\n  [ngClass]=\"{\n    isFocus: isFocus,\n    isDisabled: disabled\n  }\"\n  auiClickOutside\n  (auiClickOutside)=\"isFocus = false\"\n>\n  <button\n    *ngIf=\"controls\"\n    aui-button\n    type=\"button\"\n    [ngClass]=\"bem.element('decrease')\"\n    [disabled]=\"disabled || (value$ | async) <= min\"\n    (click)=\"takeOneStep(false); isFocus = true\"\n  >\n    <aui-icon icon=\"minus\"></aui-icon>\n  </button>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    (change)=\"inputChanged($event.target.value)\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    (focus)=\"isFocus = true\"\n    (blur)=\"isFocus = false\"\n  />\n  <button\n    *ngIf=\"controls\"\n    aui-button\n    type=\"button\"\n    [ngClass]=\"bem.element('increase')\"\n    [disabled]=\"disabled || (value$ | async) >= max\"\n    (click)=\"takeOneStep(true); isFocus = true\"\n  >\n    <aui-icon icon=\"plus\"></aui-icon>\n  </button>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -7056,6 +7060,19 @@
         { type: i0.ChangeDetectorRef }
     ]; };
 
+    var MessageModule = /** @class */ (function () {
+        function MessageModule() {
+        }
+        return MessageModule;
+    }());
+    MessageModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, i1.OverlayModule, IconModule],
+                    declarations: [MessageWrapperComponent, MessageComponent],
+                    entryComponents: [MessageWrapperComponent, MessageComponent],
+                },] }
+    ];
+
     var BaseMessage = /** @class */ (function () {
         function BaseMessage(overlay, injector, applicationRef, cfr, overlayPaneClassName, wrapperClass, componentClass, globalConfig) {
             this.overlay = overlay;
@@ -7151,8 +7168,9 @@
         }
         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 }
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     MessageService.ctorParameters = function () { return [
         { type: i1.Overlay },
@@ -7162,20 +7180,6 @@
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [MESSAGE_CONFIG,] }] }
     ]; };
 
-    var MessageModule = /** @class */ (function () {
-        function MessageModule() {
-        }
-        return MessageModule;
-    }());
-    MessageModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, IconModule],
-                    declarations: [MessageWrapperComponent, MessageComponent],
-                    entryComponents: [MessageWrapperComponent, MessageComponent],
-                    providers: [MessageService],
-                },] }
-    ];
-
     var NotificationWrapperComponent = /** @class */ (function (_super) {
         __extends(NotificationWrapperComponent, _super);
         function NotificationWrapperComponent(elementRef) {
@@ -7304,6 +7308,19 @@
         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,
@@ -7317,8 +7334,9 @@
         }
         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 }
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     NotificationService.ctorParameters = function () { return [
         { type: i1.Overlay },
@@ -7328,20 +7346,6 @@
         { 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, i1.OverlayModule, portal.PortalModule, IconModule],
-                    declarations: [NotificationWrapperComponent, NotificationComponent],
-                    entryComponents: [NotificationWrapperComponent, NotificationComponent],
-                    providers: [NotificationService],
-                },] }
-    ];
-
     var TabBodyComponent = /** @class */ (function () {
         function TabBodyComponent() {
             this.content$ = new rxjs.BehaviorSubject(null);
@@ -7939,7 +7943,7 @@
     ];
     TabHeaderComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: scrolling.ViewportRuler }
+        { type: i2.ViewportRuler }
     ]; };
     TabHeaderComponent.propDecorators = {
         type: [{ type: i0.Input }],
@@ -9931,7 +9935,7 @@
                     exportAs: 'viewPort',
                     providers: [
                         {
-                            provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
+                            provide: i2.VIRTUAL_SCROLL_STRATEGY,
                             useFactory: _tableVirtualScrollDirectiveStrategyFactory,
                             deps: [i0.forwardRef(function () { return FixedSizeTableVirtualScrollDirective; })],
                         },
@@ -9946,21 +9950,21 @@
         table: [{ type: i0.ContentChild, args: [TableComponent, { static: false },] }]
     };
 
-    var ɵ0 = scrolling._fixedSizeVirtualScrollStrategyFactory;
+    var ɵ0 = i2._fixedSizeVirtualScrollStrategyFactory;
     var FixedSizeVirtualScrollDirective = /** @class */ (function (_super) {
         __extends(FixedSizeVirtualScrollDirective, _super);
         function FixedSizeVirtualScrollDirective() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return FixedSizeVirtualScrollDirective;
-    }(scrolling.CdkFixedSizeVirtualScroll));
+    }(i2.CdkFixedSizeVirtualScroll));
     FixedSizeVirtualScrollDirective.decorators = [
         { type: i0.Directive, args: [{
                     // tslint:disable-next-line: directive-selector
                     selector: 'aui-virtual-scroll-viewport[itemSize]',
                     providers: [
                         {
-                            provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
+                            provide: i2.VIRTUAL_SCROLL_STRATEGY,
                             useFactory: ɵ0,
                             deps: [i0.forwardRef(function () { return FixedSizeVirtualScrollDirective; })],
                         },
@@ -10004,7 +10008,7 @@
             configurable: true
         });
         return VirtualForOfDirective;
-    }(scrolling.CdkVirtualForOf));
+    }(i2.CdkVirtualForOf));
     VirtualForOfDirective.decorators = [
         { type: i0.Directive, args: [{
                     selector: '[auiVirtualFor][auiVirtualForOf]',
@@ -10023,7 +10027,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return VirtualScrollViewportComponent;
-    }(scrolling.CdkVirtualScrollViewport));
+    }(i2.CdkVirtualScrollViewport));
     VirtualScrollViewportComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-virtual-scroll-viewport',
@@ -10038,7 +10042,7 @@
                     preserveWhitespaces: false,
                     providers: [
                         {
-                            provide: scrolling.CdkVirtualScrollViewport,
+                            provide: i2.CdkVirtualScrollViewport,
                             useExisting: VirtualScrollViewportComponent,
                         },
                     ],
@@ -10252,7 +10256,7 @@
         { type: i0.ApplicationRef },
         { type: i0.Injector },
         { type: i0.ElementRef },
-        { type: scrolling.CdkScrollable, decorators: [{ type: i0.Optional }] }
+        { type: i2.CdkScrollable, decorators: [{ type: i0.Optional }] }
     ]; };
     AnchorDirective.propDecorators = {
         auiAnchor: [{ type: i0.Input }],
@@ -11908,15 +11912,10 @@
     ];
 
     (function (DrawerSize) {
-        DrawerSize["Small"] = "small";
-        DrawerSize["Medium"] = "medium";
-        DrawerSize["Big"] = "big";
+        DrawerSize["Small"] = "400px";
+        DrawerSize["Medium"] = "600px";
+        DrawerSize["Large"] = "800px";
     })(exports.DrawerSize || (exports.DrawerSize = {}));
-    var DrawerRef = /** @class */ (function () {
-        function DrawerRef() {
-        }
-        return DrawerRef;
-    }());
 
     /**
      * @packageDocumentation
@@ -11953,65 +11952,26 @@
                 },] }
     ];
 
-    var _c;
     var DATA = new i0.InjectionToken('drawer-data');
     var DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
-    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 = 0;
-            _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;
+    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 = {};
         }
-        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({ 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();
+                return Object.assign({ 'aui-drawer': true, hasDivider: this.divider, isOpen: this.visible }, (this.drawerClass ? (_c = {}, _c[this.drawerClass] = true, _c) : null));
             },
             enumerable: false,
             configurable: true
@@ -12027,26 +11987,24 @@
             this.attachOverlay();
             this.updateBodyOverflow();
             this.templateContext = { $implicit: this.contentParams };
-            this.cdr.detectChanges();
         };
-        DrawerComponent.prototype.ngOnChanges = function (changes) {
-            var visible = changes.visible;
-            if (visible) {
-                var value = visible.currentValue;
-                if (value) {
-                    this.open();
-                }
-                else {
-                    this.closure();
-                }
+        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.ngAfterViewInit = function () {
-            var _this = this;
-            this.attachBodyContent();
-            setTimeout(function () {
-                _this.drawerViewInit.emit();
-            }, 0);
+        DrawerComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.disposeOverlay();
         };
         DrawerComponent.prototype.attachOverlay = function () {
             var _this = this;
@@ -12058,7 +12016,7 @@
                 this.overlayRef.attach(this.portal);
                 this.overlayRef
                     .outsidePointerEvents()
-                    .pipe(operators.takeUntil(this.onDestroy$))
+                    .pipe(operators.takeUntil(this.destroy$))
                     .subscribe(function (event) {
                     var _a, _b;
                     // 判断鼠标点击事件的 target 是否为 overlay-container 的子节点，如果是，则不关闭 drawer。
@@ -12067,7 +12025,9 @@
                         _this.hideOnClickOutside &&
                         event.target instanceof Node &&
                         !((_b = (_a = _this.overlayRef.hostElement) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
-                        _this.closure();
+                        event.stopPropagation();
+                        event.preventDefault();
+                        _this.close();
                     }
                 });
             }
@@ -12079,26 +12039,6 @@
                 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) {
@@ -12109,121 +12049,46 @@
                 }
             }
         };
-        DrawerComponent.prototype.open = function () {
-            this.visible = true;
-            this.afterOpen$.next();
-            this.afterOpen$.complete();
-            this.updateBodyOverflow();
-            this.cdr.markForCheck();
-        };
-        DrawerComponent.prototype.closure = function (result) {
-            if (result === void 0) { result = null; }
-            this.visible = false;
-            this.close.next();
-            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.closure();
-            }
-        };
-        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    [class.drawer-mask-open]=\"visible\"\n    class=\"drawer-mask\"\n    (click)=\"maskClick()\"\n    *ngIf=\"mask\"\n  ></div>\n  <div\n    [style.marginTop.px]=\"offsetY\"\n    [ngClass]=\"drawerClasses\"\n    [class.drawer-open]=\"visible\"\n    [ngStyle]=\"{\n      transform: transform,\n      width: width + 'px'\n    }\"\n  >\n    <div\n      class=\"drawer-content\"\n      [style.height]=\"'calc(100% - ' + offsetY + 'px)'\"\n    >\n      <div class=\"drawer-body-wrapper\">\n        <div class=\"drawer-header\">\n          <div class=\"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]=\"$any(title || titleTemplate)\"\n                [ngTemplateOutletContext]=\"templateContext\"\n              ></ng-container>\n            </ng-template>\n          </div>\n          <div class=\"drawer-close\" *ngIf=\"showClose\" (click)=\"closure()\">\n            <aui-icon icon=\"close\"></aui-icon>\n          </div>\n        </div>\n\n        <div class=\"drawer-body\">\n          <ng-template cdkPortalOutlet></ng-template>\n          <ng-container *ngIf=\"isTemplateRef(content || contentTemplate)\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                $any(content || contentTemplate);\n                context: templateContext\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <div class=\"drawer-footer\" *ngIf=\"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]=\"$any(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,
+                    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,
-                    styles: [".drawer-open .drawer-content{box-shadow:0 4px 16px 0 rgba(var(--aui-color-n-1),.2)}.drawer-mask{position:absolute;top:0;left:0;width:100%;height:0;opacity:.4;background-color:rgb(var(--aui-color-n-0))}.drawer-mask-open{height:100%}.drawer{height:100%;position:fixed;top:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s}.drawer-content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.drawer-title{flex:1}.drawer-header{margin:20px 20px 0;background:rgb(var(--aui-color-n-10));display:flex;font-size:20px;font-weight:500;padding-bottom:16px;justify-content:space-between;border-bottom:1px solid rgb(var(--aui-color-n-7))}.drawer-close{z-index:10;display:flex;align-items:center;font-size:16px;cursor:pointer;color:rgb(var(--aui-color-n-4));margin-left:16px}.drawer-body-wrapper{width:100%;height:100%;flex-direction:column;flex-wrap:nowrap;display:flex;position:relative;z-index:1;background-clip:padding-box;border:0}.drawer-body{margin:16px 20px;overflow:hidden;overflow-y:auto;font-size:14px;height:calc(100% - 100px)}.drawer-footer{margin:0 20px 20px;padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-7))}"]
+                    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))}"]
                 },] }
     ];
     DrawerComponent.ctorParameters = function () { return [
         { type: i0.ViewContainerRef },
-        { type: i1.Overlay },
-        { type: i0.Injector },
-        { type: i0.ChangeDetectorRef }
+        { type: i1.Overlay }
     ]; };
     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 }],
-        drawerViewInit: [{ type: i0.Output }],
-        close: [{ type: i0.Output }],
+        visibleChange: [{ type: i0.Output }],
         drawerTemplate: [{ type: i0.ViewChild, args: ['drawerTemplate', { static: true },] }],
         bodyPortalOutlet: [{ type: i0.ViewChild, args: [portal.CdkPortalOutlet, { static: false },] }],
-        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 },] }]
+        headerRef: [{ type: i0.ContentChild, args: [DrawerHeaderDirective, { read: i0.TemplateRef },] }],
+        footerRef: [{ type: i0.ContentChild, args: [DrawerFooterDirective, { read: i0.TemplateRef },] }]
     };
 
-    var DrawerService = /** @class */ (function () {
-        function DrawerService(overlay) {
-            this.overlay = overlay;
-            this.unsubscribe$ = new rxjs.Subject();
-        }
-        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.closure();
-            this.createDrawer();
-            this.updateOptions(options);
-            return (_c = this.drawerRef) === null || _c === void 0 ? void 0 : _c.instance;
-        };
-        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(i0.ɵɵinject(i1.Overlay)); }, token: DrawerService, providedIn: "root" });
-    DrawerService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    DrawerService.ctorParameters = function () { return [
-        { type: i1.Overlay }
-    ]; };
-
     var COMMON = [
         DrawerComponent,
         DrawerHeaderDirective,
@@ -12240,11 +12105,28 @@
                     imports: [common.CommonModule, IconModule, IconModule, i1.OverlayModule, portal.PortalModule],
                     declarations: COMMON,
                     exports: COMMON,
-                    providers: [DrawerService],
                     entryComponents: [DrawerComponent],
                 },] }
     ];
 
+    var DrawerService = /** @class */ (function () {
+        function DrawerService() {
+        }
+        DrawerService.prototype.open = function (_) {
+            // TODO: need to be refactored
+        };
+        DrawerService.prototype.updateOptions = function (_) {
+            // TODO: need to be refactored
+        };
+        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',
+                },] }
+    ];
+
     var StepState = {
         Default: 'default',
         Done: 'done',
@@ -12252,19 +12134,19 @@
         Pending: 'pending',
     };
 
-    var _b$1, _c$1;
+    var _b$1, _c;
     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$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 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 StepsComponent = /** @class */ (function () {
         function StepsComponent() {
             this._steps = [];
@@ -12534,7 +12416,6 @@
     exports.DrawerFooterDirective = DrawerFooterDirective;
     exports.DrawerHeaderDirective = DrawerHeaderDirective;
     exports.DrawerModule = DrawerModule;
-    exports.DrawerRef = DrawerRef;
     exports.DrawerService = DrawerService;
     exports.DropdownActiveDirective = DropdownActiveDirective;
     exports.DropdownButtonComponent = DropdownButtonComponent;