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

package/bundles/alauda-ui.umd.js

@@ -2,7 +2,7 @@
     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';
+}(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 }; }
 
@@ -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() {
         }
@@ -1712,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 }],
@@ -2073,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,
             });
@@ -2156,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 },
@@ -2323,7 +2327,7 @@
                 },] }
     ];
     TooltipCopyDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2370,7 +2374,7 @@
                 },] }
     ];
     TooltipDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2390,7 +2394,7 @@
     }());
     TooltipModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule],
+                    imports: [common.CommonModule, overlay.OverlayModule],
                     declarations: [
                         TooltipDirective,
                         TooltipComponent,
@@ -2514,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,9 +2906,9 @@
         { 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 }
     ]; };
 
@@ -2949,7 +2953,7 @@
             return _this;
         }
         return DialogContentComponent;
-    }(i1.CdkScrollable));
+    }(overlay.CdkScrollable));
     DialogContentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dialog-content',
@@ -2961,7 +2965,7 @@
     ];
     DialogContentComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: i1.ScrollDispatcher },
+        { type: overlay.ScrollDispatcher },
         { type: i0.NgZone },
         { type: bidi.Directionality }
     ]; };
@@ -3028,7 +3032,7 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        i1.OverlayModule,
+                        overlay.OverlayModule,
                         portal.PortalModule,
                         IconModule,
                         ButtonModule,
@@ -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,
@@ -5108,7 +5112,7 @@
                 },] }
     ];
     DropdownDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -7056,6 +7060,20 @@
         { type: i0.ChangeDetectorRef }
     ]; };
 
+    var MessageModule = /** @class */ (function () {
+        function MessageModule() {
+        }
+        return MessageModule;
+    }());
+    MessageModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, overlay.OverlayModule, IconModule],
+                    declarations: [MessageWrapperComponent, MessageComponent],
+                    entryComponents: [MessageWrapperComponent, MessageComponent],
+                    providers: [MessageService],
+                },] }
+    ];
+
     var BaseMessage = /** @class */ (function () {
         function BaseMessage(overlay, injector, applicationRef, cfr, overlayPaneClassName, wrapperClass, componentClass, globalConfig) {
             this.overlay = overlay;
@@ -7155,27 +7173,13 @@
         { type: i0.Injectable }
     ];
     MessageService.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: [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) {
@@ -7321,7 +7325,7 @@
         { type: i0.Injectable }
     ];
     NotificationService.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.Injector },
         { type: i0.ApplicationRef },
         { type: i0.ComponentFactoryResolver },
@@ -7335,7 +7339,7 @@
     }());
     NotificationModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, portal.PortalModule, IconModule],
+                    imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule, IconModule],
                     declarations: [NotificationWrapperComponent, NotificationComponent],
                     entryComponents: [NotificationWrapperComponent, NotificationComponent],
                     providers: [NotificationService],
@@ -9070,7 +9074,7 @@
                 },] }
     ];
     AutoCompleteDirective.ctorParameters = function () { return [
-        { type: i1.Overlay },
+        { type: overlay.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -9302,7 +9306,7 @@
     }());
     AutocompleteModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, i1.OverlayModule, TooltipModule],
+                    imports: [common.CommonModule, overlay.OverlayModule, TooltipModule],
                     declarations: [
                         AutoCompleteDirective,
                         CustomAutoCompleteDirective,
@@ -11058,7 +11062,7 @@
                         forms.FormsModule,
                         forms.ReactiveFormsModule,
                         portal.PortalModule,
-                        i1.OverlayModule,
+                        overlay.OverlayModule,
                         common.CommonModule,
                         InputModule,
                         TooltipModule,
@@ -11970,7 +11974,7 @@
             _this.injector = injector;
             _this.cdr = cdr;
             _this.size = exports.DrawerSize.Medium;
-            _this.offsetY = 0;
+            _this.offsetY = '0px';
             _this.hideOnClickOutside = false;
             _this.showClose = true;
             _this._value = SIZE_MAPPER[exports.DrawerSize.Medium];
@@ -11997,7 +12001,7 @@
         Object.defineProperty(DrawerComponent.prototype, "drawerClasses", {
             get: function () {
                 var _c;
-                return Object.assign({ drawer: true }, (!this.drawerClass ? null : (_c = {}, _c[this.drawerClass] = true, _c)));
+                return Object.assign({ 'aui-drawer': true }, (!this.drawerClass ? null : (_c = {}, _c[this.drawerClass] = true, _c)));
             },
             enumerable: false,
             configurable: true
@@ -12037,7 +12041,7 @@
                     this.open();
                 }
                 else {
-                    this.closure();
+                    this.dispose();
                 }
             }
         };
@@ -12067,13 +12071,15 @@
                         _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.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(),
@@ -12116,10 +12122,10 @@
             this.updateBodyOverflow();
             this.cdr.markForCheck();
         };
-        DrawerComponent.prototype.closure = function (result) {
+        DrawerComponent.prototype.dispose = function (result) {
             if (result === void 0) { result = null; }
             this.visible = false;
-            this.close.next();
+            this.close.emit();
             this.afterClosed$.next(result);
             this.afterClosed$.complete();
             this.updateBodyOverflow();
@@ -12133,7 +12139,7 @@
         };
         DrawerComponent.prototype.maskClick = function () {
             if (this.maskClosable && this.mask) {
-                this.closure();
+                this.dispose();
             }
         };
         DrawerComponent.prototype.ngOnDestroy = function () {
@@ -12145,15 +12151,15 @@
     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",
+                    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,
                     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))}"]
+                    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 }
     ]; };
@@ -12179,6 +12185,27 @@
         footerTemplate: [{ type: i0.ContentChild, args: [DrawerFooterDirective, { read: i0.TemplateRef },] }]
     };
 
+    var COMMON = [
+        DrawerComponent,
+        DrawerHeaderDirective,
+        DrawerContentDirective,
+        DrawerFooterDirective,
+    ];
+    var DrawerModule = /** @class */ (function () {
+        function DrawerModule() {
+        }
+        return DrawerModule;
+    }());
+    DrawerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, IconModule, IconModule, overlay.OverlayModule, portal.PortalModule],
+                    declarations: COMMON,
+                    exports: COMMON,
+                    entryComponents: [DrawerComponent],
+                    providers: [DrawerService],
+                },] }
+    ];
+
     var DrawerService = /** @class */ (function () {
         function DrawerService(overlay) {
             this.overlay = overlay;
@@ -12186,7 +12213,7 @@
         }
         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();
+            (_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;
@@ -12214,37 +12241,13 @@
         };
         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',
-                },] }
+        { type: i0.Injectable }
     ];
     DrawerService.ctorParameters = function () { return [
-        { type: i1.Overlay }
+        { type: overlay.Overlay }
     ]; };
 
-    var COMMON = [
-        DrawerComponent,
-        DrawerHeaderDirective,
-        DrawerContentDirective,
-        DrawerFooterDirective,
-    ];
-    var DrawerModule = /** @class */ (function () {
-        function DrawerModule() {
-        }
-        return DrawerModule;
-    }());
-    DrawerModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, IconModule, IconModule, i1.OverlayModule, portal.PortalModule],
-                    declarations: COMMON,
-                    exports: COMMON,
-                    providers: [DrawerService],
-                    entryComponents: [DrawerComponent],
-                },] }
-    ];
-
     var StepState = {
         Default: 'default',
         Done: 'done',