@alauda/ui 5.7.7-beta.8 → 6.0.1-beta.0

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/cdk/collections'), require('@angular/common/http'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('clipboard-polyfill'), require('@angular/cdk/bidi'), require('@angular/forms'), require('@angular/animations'), 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/cdk/collections', '@angular/common/http', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/portal', 'clipboard-polyfill', '@angular/cdk/bidi', '@angular/forms', '@angular/animations', '@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.cdk.collections, global.ng.common.http, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.portal, global.clipboardPolyfill, global.ng.cdk.bidi, global.ng.forms, global.ng.animations, 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, collections, http, a11y, overlay, portal, clipboardPolyfill, bidi, forms, animations, 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/cdk/a11y'), require('@angular/animations'), require('@angular/cdk/collections'), 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/cdk/a11y', '@angular/animations', '@angular/cdk/collections', '@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.cdk.a11y, global.ng.animations, global.ng.cdk.collections, 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, a11y, animations, collections, i1, 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 }; }
 
@@ -481,889 +481,1032 @@
         return queryList.changes.pipe(operators.startWith(queryList), operators.map(function (list) { return !!list.length; }), operators.publishReplay(1), operators.refCount());
     }
 
-    /**
-     * Cell definition for the aui-table.
-     * Captures the template of a column's data row cell as well as cell-specific properties.
-     */
-    var TableCellDefDirective = /** @class */ (function (_super) {
-        __extends(TableCellDefDirective, _super);
-        function TableCellDefDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TableCellDefDirective;
-    }(table.CdkCellDef));
-    TableCellDefDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableCellDef]',
-                    providers: [
-                        {
-                            provide: table.CdkCellDef,
-                            useExisting: TableCellDefDirective,
-                        },
-                    ],
-                },] }
-    ];
-
-    var bem = buildBem('aui-table');
-    /** Cell template container that adds the right classes and role. */
-    var TableCellDirective = /** @class */ (function (_super) {
-        __extends(TableCellDirective, _super);
-        function TableCellDirective(columnDef, elementRef) {
-            var _this = _super.call(this, columnDef, elementRef) || this;
-            elementRef.nativeElement.classList.add(bem.element("column-" + columnDef.cssClassFriendlyName));
-            return _this;
-        }
-        return TableCellDirective;
-    }(table.CdkCell));
-    TableCellDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    // tslint:disable-next-line: directive-selector
-                    selector: 'aui-table-cell',
-                    host: {
-                        class: 'aui-table__cell',
-                        role: 'gridcell',
-                    },
-                },] }
-    ];
-    TableCellDirective.ctorParameters = function () { return [
-        { type: table.CdkColumnDef },
-        { type: i0.ElementRef }
-    ]; };
-
-    /**
-     * Column definition for the aui-table.
-     * Defines a set of cells available for a table column.
-     */
-    var TableColumnDefDirective = /** @class */ (function (_super) {
-        __extends(TableColumnDefDirective, _super);
-        function TableColumnDefDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(TableColumnDefDirective.prototype, "auiTableColumnDef", {
-            // Unique name for this column
-            // Why it does not work in `inputs` property?
-            set: function (value) {
-                this.name = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TableColumnDefDirective;
-    }(table.CdkColumnDef));
-    TableColumnDefDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableColumnDef]',
-                    providers: [
-                        {
-                            provide: table.CdkColumnDef,
-                            useExisting: TableColumnDefDirective,
-                        },
-                    ],
-                    inputs: ['sticky'],
-                },] }
-    ];
-    TableColumnDefDirective.propDecorators = {
-        auiTableColumnDef: [{ type: i0.Input }]
-    };
-
-    /**
-     * Header cell definition for the aui-table.
-     * Captures the template of a column's header cell and as well as cell-specific properties.
-     */
-    var TableHeaderCellDefDirective = /** @class */ (function (_super) {
-        __extends(TableHeaderCellDefDirective, _super);
-        function TableHeaderCellDefDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TableHeaderCellDefDirective;
-    }(table.CdkHeaderCellDef));
-    TableHeaderCellDefDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableHeaderCellDef]',
-                    providers: [
-                        {
-                            provide: table.CdkHeaderCellDef,
-                            useExisting: TableHeaderCellDefDirective,
-                        },
-                    ],
-                },] }
-    ];
-
-    var bem$1 = buildBem('aui-table');
-    /** Header cell template container that adds the right classes and role. */
-    var TableHeaderCellDirective = /** @class */ (function (_super) {
-        __extends(TableHeaderCellDirective, _super);
-        function TableHeaderCellDirective(columnDef, elementRef) {
-            var _this = _super.call(this, columnDef, elementRef) || this;
-            elementRef.nativeElement.classList.add(bem$1.element("column-" + columnDef.cssClassFriendlyName));
-            return _this;
-        }
-        return TableHeaderCellDirective;
-    }(table.CdkHeaderCell));
-    TableHeaderCellDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    // tslint:disable-next-line: directive-selector
-                    selector: 'aui-table-header-cell',
-                    host: {
-                        class: 'aui-table__header-cell',
-                        role: 'columnheader',
-                    },
-                },] }
-    ];
-    TableHeaderCellDirective.ctorParameters = function () { return [
-        { type: table.CdkColumnDef },
-        { type: i0.ElementRef }
-    ]; };
+    var auiIcons = '<svg><symbol id="aui-icon-square_s" viewBox="0 0 1024 1024"><path d="M950.857143 0a73.142857 73.142857 0 0 1 73.142857 73.142857v877.714286a73.142857 73.142857 0 0 1-73.142857 73.142857H73.142857a73.142857 73.142857 0 0 1-73.142857-73.142857V73.142857a73.142857 73.142857 0 0 1 73.142857-73.142857h877.714286z m-182.857143 219.428571h-512a36.571429 36.571429 0 0 0-35.986286 29.988572L219.428571 256v512a36.571429 36.571429 0 0 0 29.988572 35.986286L256 804.571429h512a36.571429 36.571429 0 0 0 35.986286-29.988572L804.571429 768v-512a36.571429 36.571429 0 0 0-29.988572-35.986286L768 219.428571z"  ></path></symbol><symbol id="aui-icon-close_small" viewBox="0 0 1024 1024"><path d="M597.333333 512l170.666667-170.666667a60.672 60.672 0 0 0 0-85.333333 60.672 60.672 0 0 0-85.333333 0L512 426.666667 341.333333 256a60.672 60.672 0 0 0-85.333333 0 60.672 60.672 0 0 0 0 85.333333l170.666667 170.666667-170.666667 170.666667a60.672 60.672 0 0 0 0 85.333333 60.672 60.672 0 0 0 85.333333 0l170.666667-170.666667 170.666667 170.666667a60.672 60.672 0 0 0 85.333333 0 60.672 60.672 0 0 0 0-85.333333L597.333333 512z"  ></path></symbol><symbol id="aui-icon-close_circle1" viewBox="0 0 1024 1024"><path d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 42.666667C252.8 42.666667 42.666667 252.8 42.666667 512s210.133333 469.333333 469.333333 469.333333 469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667z m137.813333 243.2c9.514667 0 19.029333 3.797333 25.898667 10.666666l51.754667 51.754667a36.906667 36.906667 0 0 1 0 51.754667L615.552 512l111.914667 111.957333a36.906667 36.906667 0 0 1 0 51.754667l-51.754667 51.754667a36.906667 36.906667 0 0 1-51.754667 0L512 615.552 400.042667 727.466667a36.906667 36.906667 0 0 1-51.754667 0L296.533333 675.712a36.906667 36.906667 0 0 1 0-51.754667L408.448 512 296.533333 400.042667a36.906667 36.906667 0 0 1 0-51.754667L348.288 296.533333a36.906667 36.906667 0 0 1 51.754667 0L512 408.448l111.957333-111.914667c6.826667-6.869333 16.341333-10.666667 25.856-10.666666z"  ></path></symbol><symbol id="aui-icon-check_circle" viewBox="0 0 1024 1024"><path d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 42.666667C252.8 42.666667 42.666667 252.8 42.666667 512s210.133333 469.333333 469.333333 469.333333 469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667z m192 298.666666L768 409.088 469.333333 725.333333l-170.666666-180.693333 64-67.797333 106.666666 112.981333L704 341.333333z"  ></path></symbol><symbol id="aui-icon-close" viewBox="0 0 1024 1024"><path d="M597.333 512l341.334-341.333a60.672 60.672 0 0 0 0-85.334 60.672 60.672 0 0 0-85.334 0L512 426.667 170.667 85.333a60.672 60.672 0 0 0-85.334 0 60.672 60.672 0 0 0 0 85.334L426.667 512 85.333 853.333a60.672 60.672 0 0 0 0 85.334 60.672 60.672 0 0 0 85.334 0L512 597.333l341.333 341.334a60.672 60.672 0 0 0 85.334 0 60.672 60.672 0 0 0 0-85.334L597.333 512z"  ></path></symbol><symbol id="aui-icon-arrow" viewBox="0 0 1024 1024"><path d="M700.352 180.16l301.696 301.696a42.56 42.56 0 0 1 0 60.288l-301.696 301.696a42.688 42.688 0 1 1-60.352-60.288l228.8-228.928H52.16a42.688 42.688 0 0 1 0-85.312h816.64L640 240.448a42.688 42.688 0 0 1 60.352-60.288z"  ></path></symbol><symbol id="aui-icon-time" viewBox="0 0 1024 1024"><path d="M567.678 277.319v278.584a20.735 20.735 0 0 1-5.951 15.36 20.735 20.735 0 0 1-15.36 5.951h-192.25a20.735 20.735 0 0 1-15.36-6.016 20.735 20.735 0 0 1-5.952-15.36V523.2c0-6.208 1.984-11.328 6.016-15.36a20.735 20.735 0 0 1 15.36-5.952h145.915v-224.57c0-6.207 1.92-11.327 5.952-15.359a20.735 20.735 0 0 1 15.36-5.952h24.959c6.208 0 11.328 1.984 15.36 6.016a20.735 20.735 0 0 1 6.015 15.36z m318.327 451.443A422.26 422.26 0 0 0 943.988 512a422.26 422.26 0 0 0-57.983-216.762 430.644 430.644 0 0 0-157.243-157.243A422.26 422.26 0 0 0 512 80.012a422.26 422.26 0 0 0-216.762 57.983 430.644 430.644 0 0 0-157.243 157.243A422.26 422.26 0 0 0 80.012 512c0 78.334 19.328 150.588 57.983 216.762a430.644 430.644 0 0 0 157.243 157.243A422.26 422.26 0 0 0 512 943.988a422.26 422.26 0 0 0 216.762-57.983 430.644 430.644 0 0 0 157.243-157.243z m69.31-473.395A499.058 499.058 0 0 1 1023.985 512c0 92.861-22.911 178.555-68.67 257.017a509.681 509.681 0 0 1-186.298 186.298A500.85 500.85 0 0 1 512 1023.985a500.85 500.85 0 0 1-257.017-68.67A509.681 509.681 0 0 1 68.685 769.017 500.85 500.85 0 0 1 0.015 512c0-92.861 22.911-178.555 68.67-257.017A509.681 509.681 0 0 1 254.983 68.685 500.85 500.85 0 0 1 512 0.015c92.861 0 178.555 22.911 257.017 68.67a508.913 508.913 0 0 1 186.298 186.682z"  ></path></symbol><symbol id="aui-icon-calendar" viewBox="0 0 1024 1024"><path d="M332.8 25.6L332.736 128h358.4L691.2 25.6H768L767.936 128H947.2v870.4H76.8V128h179.136L256 25.6h76.8zM255.936 209.6H158.4v707.2h707.2V209.6h-97.664L768 256h-76.8l-0.064-46.4h-358.4L332.8 256H256l-0.064-46.4zM704 601.6v76.8H320V601.6h384z m0-192v76.8H320V409.6h384z"  ></path></symbol><symbol id="aui-icon-check_circle_s" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM248 536l192 192 336-336L704 320 440 584 320 464 248 536z"  ></path></symbol><symbol id="aui-icon-close_circle_small_s" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m85.333333-512l170.666667-170.666667a60.672 60.672 0 0 0 0-85.333333 60.672 60.672 0 0 0-85.333333 0L512 426.666667 341.333333 256a60.672 60.672 0 0 0-85.333333 0 60.672 60.672 0 0 0 0 85.333333l170.666667 170.666667-170.666667 170.666667a60.672 60.672 0 0 0 0 85.333333 60.672 60.672 0 0 0 85.333333 0l170.666667-170.666667 170.666667 170.666667a60.672 60.672 0 0 0 85.333333 0 60.672 60.672 0 0 0 0-85.333333L597.333333 512z"  ></path></symbol><symbol id="aui-icon-angle_down" viewBox="0 0 1024 1024"><path d="M512 678.4a38.4 38.4 0 0 1-27.136-11.264l-256-256a38.272 38.272 0 0 1 0-54.272 38.272 38.272 0 0 1 54.272 0L512 585.664l228.864-228.8a38.272 38.272 0 0 1 54.272 0 38.272 38.272 0 0 1 0 54.272l-256 256A38.4 38.4 0 0 1 512 678.4"  ></path></symbol><symbol id="aui-icon-angle_double_left" viewBox="0 0 1024 1024"><path d="M568.64 749.44a19.776 19.776 0 0 1-5.696 13.12l-28.544 28.544a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696L241.856 524.8a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12L508.16 232.256a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l28.544 28.544a19.584 19.584 0 0 1 5.696 13.12 19.776 19.776 0 0 1-5.696 13.12L338.368 511.616l224.576 224.576a19.584 19.584 0 0 1 5.696 13.12v0.128z m219.456 0a19.776 19.776 0 0 1-5.696 13.12l-28.544 28.544a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696L461.312 524.8a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l266.304-266.304a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l28.544 28.544a19.584 19.584 0 0 1 5.696 13.12 19.776 19.776 0 0 1-5.696 13.12L557.824 511.616l224.576 224.576a19.584 19.584 0 0 1 5.696 13.12v0.128z"  ></path></symbol><symbol id="aui-icon-angle_double_right" viewBox="0 0 1024 1024"><path d="M568.64 511.552a19.776 19.776 0 0 1-5.696 13.12l-266.304 266.304a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696l-28.544-28.544a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l224.576-224.576-224.576-224.576a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l28.544-28.544a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696L562.944 498.56a19.584 19.584 0 0 1 5.696 13.12v-0.128z m219.392 0a19.776 19.776 0 0 1-5.696 13.12l-266.304 266.304a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696l-28.544-28.544a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l224.576-224.576-224.576-224.576a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l28.544-28.544a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l266.304 266.304a19.584 19.584 0 0 1 5.696 13.12v-0.128z"  ></path></symbol><symbol id="aui-icon-caret_down_s" viewBox="0 0 1024 1024"><path d="M269.248 384h485.504a32 32 0 0 1 22.592 54.656l-242.688 242.688a32 32 0 0 1-45.312 0L246.656 438.656A32 32 0 0 1 269.248 384z"  ></path></symbol><symbol id="aui-icon-angle_left" viewBox="0 0 1024 1024"><path d="M345.6 512a38.4 38.4 0 0 1 11.264-27.136l256-256a38.272 38.272 0 0 1 54.272 0 38.272 38.272 0 0 1 0 54.272L438.336 512l228.8 228.864a38.272 38.272 0 0 1 0 54.272 38.272 38.272 0 0 1-54.272 0l-256-256A38.4 38.4 0 0 1 345.6 512"  ></path></symbol><symbol id="aui-icon-check_triangle_s" viewBox="0 0 1024 1024"><path d="M1024 1024H0L1024 0v1024z m-544-288L640 896l256-256-64-64-192 192-96-96-64 64z"  ></path></symbol><symbol id="aui-icon-check" viewBox="0 0 1024 1024"><path d="M974.656 224.96c11.552 12.064 17.344 26.72 17.344 43.968s-5.792 31.904-17.344 43.968L442.016 868.864c-11.552 12.064-25.6 18.112-42.112 18.112s-30.56-6.048-42.112-18.112L49.344 546.912C37.792 534.848 32 520.192 32 502.944s5.792-31.904 17.344-43.968l84.224-87.904c11.552-12.064 25.6-18.112 42.112-18.112s30.56 6.048 42.112 18.112l182.08 190.72L806.176 137.056c11.552-12.064 25.6-18.112 42.112-18.112s30.56 6.048 42.112 18.112l84.224 87.904z"  ></path></symbol><symbol id="aui-icon-ellipsis_h_s" viewBox="0 0 1024 1024"><path d="M192 416a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m320 0a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m320 0a96 96 0 1 1 0 192 96 96 0 0 1 0-192z"  ></path></symbol><symbol id="aui-icon-exclamation_circle_s" viewBox="0 0 1024 1024"><path d="M512 0c282.688 0 512 229.312 512 512s-229.312 512-512 512-512-229.312-512-512 229.312-512 512-512z m85.312 831.36v-126.72c0-11.968-9.344-21.952-20.672-21.952h-128a22.208 22.208 0 0 0-21.952 21.952v126.72c0 11.968 9.984 21.952 21.952 21.952h128c11.392 0 20.672-9.984 20.672-21.952z m-1.28-229.376L608 187.968a13.376 13.376 0 0 0-6.656-11.968 25.664 25.664 0 0 0-16-5.312H438.656a25.664 25.664 0 0 0-16 5.312 13.376 13.376 0 0 0-6.656 12.032l11.328 413.952c0 9.344 9.984 16.64 22.656 16.64h123.328c12.032 0 22.016-7.296 22.656-16.64z"  ></path></symbol><symbol id="aui-icon-check_s" viewBox="0 0 1024 1024"><path d="M169.024 534.976L247.04 456.96a12.8 12.8 0 0 1 18.048 0L416 608l342.976-342.976a12.8 12.8 0 0 1 18.048 0L855.04 343.04a12.8 12.8 0 0 1 0 18.048L424.96 791.04a12.8 12.8 0 0 1-18.048 0L168.96 552.96a12.8 12.8 0 0 1 0-18.048z"  ></path></symbol><symbol id="aui-icon-compress_s" viewBox="0 0 1024 1024"><path d="M512 549.952v265.856c0 10.24-3.776 19.2-11.264 26.688a36.48 36.48 0 0 1-26.688 11.264 36.48 36.48 0 0 1-26.752-11.264L361.856 757.12l-196.992 196.992a18.752 18.752 0 0 1-27.264 0L69.952 886.4a18.752 18.752 0 0 1 0-27.264l196.992-196.992L181.504 576.64a36.48 36.48 0 0 1-11.264-26.752c0-10.24 3.712-19.2 11.264-26.688A36.48 36.48 0 0 1 208.192 512h265.856c10.24 0 19.2 3.776 26.688 11.264A36.48 36.48 0 0 1 512 549.952z m442.048-412.352a18.752 18.752 0 0 1 0 27.264L757.12 361.856l85.44 85.44a36.48 36.48 0 0 1 11.264 26.752c0 10.24-3.712 19.2-11.264 26.688a36.48 36.48 0 0 1-26.688 11.264H549.952a36.48 36.48 0 0 1-26.688-11.264A36.48 36.48 0 0 1 512 474.048V208.192c0-10.24 3.776-19.2 11.264-26.688a36.48 36.48 0 0 1 26.688-11.264c10.304 0 19.2 3.712 26.752 11.264l85.44 85.44 196.992-196.992a18.752 18.752 0 0 1 27.264 0l67.648 67.648z"  ></path></symbol><symbol id="aui-icon-angle_right" viewBox="0 0 1024 1024"><path d="M678.4 512a38.4 38.4 0 0 1-11.264 27.136l-256 256a38.272 38.272 0 0 1-54.272 0 38.272 38.272 0 0 1 0-54.272L585.664 512 356.864 283.136a38.272 38.272 0 0 1 0-54.272 38.272 38.272 0 0 1 54.272 0l256 256A38.4 38.4 0 0 1 678.4 512"  ></path></symbol><symbol id="aui-icon-export" viewBox="0 0 1024 1024"><path d="M729.6 624H448v-96h281.6V452.352a32 32 0 0 1 52.48-24.64l148.48 123.712a32 32 0 0 1 0 49.152l-148.48 123.712a32 32 0 0 1-52.48-24.64V624zM832 384h-64V128H128v768h640v-128h64v128a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h640a64 64 0 0 1 64 64v256z"  ></path></symbol><symbol id="aui-icon-import" viewBox="0 0 1024 1024"><path d="M678.4 528H960v96h-281.6v75.648a32 32 0 0 1-52.48 24.64L477.44 600.576a32 32 0 0 1 0-49.152l148.48-123.712a32 32 0 0 1 52.48 24.64V528zM832 384h-64V128H128v768h640v-128h64v128a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h640a64 64 0 0 1 64 64v256z"  ></path></symbol><symbol id="aui-icon-exclamation_triangle_s" viewBox="0 0 1024 1024"><path d="M585.152 849.792V741.12a18.56 18.56 0 0 0-18.304-18.88H457.152a18.56 18.56 0 0 0-18.304 18.88v108.608c0 10.24 8 18.88 18.304 18.88h109.696a18.56 18.56 0 0 0 18.304-18.88z m-1.152-213.76l10.24-262.272a13.824 13.824 0 0 0-5.632-10.88c-3.456-2.816-8.576-6.272-13.76-6.272H449.152c-5.12 0-10.24 3.456-13.696 6.272-3.968 2.88-5.76 8.576-5.76 12.032l9.792 261.12c0 7.488 8.576 13.184 19.392 13.184h105.728c10.304 0 18.88-5.76 19.456-13.12zM576 102.336l438.912 804.672a73.088 73.088 0 0 1-64 108.032H73.088c-25.664 0-49.664-13.76-62.848-36.032a72 72 0 0 1-1.152-72L448 102.272a72.704 72.704 0 0 1 128 0z"  ></path></symbol><symbol id="aui-icon-expand_s" viewBox="0 0 1024 1024"><path d="M498.56 591.936a18.432 18.432 0 0 1 0 26.816l-193.664 193.664 84.032 84.032a35.84 35.84 0 0 1 11.072 26.24 35.84 35.84 0 0 1-11.072 26.24 35.84 35.84 0 0 1-26.24 11.072H101.312a35.84 35.84 0 0 1-26.24-11.072 35.84 35.84 0 0 1-11.072-26.24v-261.376a35.84 35.84 0 0 1 11.072-26.24 35.84 35.84 0 0 1 26.24-11.072 35.84 35.84 0 0 1 26.24 11.072l84.032 84.032L405.248 525.44a18.432 18.432 0 0 1 26.88 0L498.56 591.936zM960 101.312v261.376a35.84 35.84 0 0 1-11.072 26.24 35.84 35.84 0 0 1-26.24 11.072 35.84 35.84 0 0 1-26.24-11.072l-84.032-84.032L618.752 498.56a18.432 18.432 0 0 1-26.88 0L525.44 432.064a18.432 18.432 0 0 1 0-26.816l193.664-193.664-84.032-84.032a35.84 35.84 0 0 1-11.072-26.24 35.84 35.84 0 0 1 11.072-26.24 35.84 35.84 0 0 1 26.24-11.072h261.376a35.84 35.84 0 0 1 26.24 11.072 35.84 35.84 0 0 1 11.072 26.24z"  ></path></symbol><symbol id="aui-icon-minus_s" viewBox="0 0 1024 1024"><path d="M256 448h512a64 64 0 0 1 0 128H256a64 64 0 0 1 0-128"  ></path></symbol><symbol id="aui-icon-minus" viewBox="0 0 1024 1024"><path d="M904 448H120C86.4 448 64 470.4 64 504s22.4 56 56 56h784c33.6 0 56-22.4 56-56S937.6 448 904 448z"  ></path></symbol><symbol id="aui-icon-info_circle_s" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0zM448 304v32c0 26.368 21.632 48 48 48h32c26.368 0 48-21.632 48-48v-32A48.192 48.192 0 0 0 528 256h-32a48.192 48.192 0 0 0-48 48zM640 768v-64H576V448H384v64h64v192H384v64h256z"  ></path></symbol><symbol id="aui-icon-navigation_expand" viewBox="0 0 1024 1024"><path d="M512 192l256 320-256 320H448V192h64zM256 192h64v640H256V192z"  ></path></symbol><symbol id="aui-icon-copy" viewBox="0 0 1024 1024"><path d="M742.848 865.728v40.768c0 29.44-25.088 53.504-55.936 53.504h-503.04C153.152 960 128 936 128 906.496V226.816c0-29.568 25.088-53.568 55.936-53.568h124.096v-40.96c0-37.76 29.824-68.288 66.624-68.288h271.36C784.192 64 896 178.56 896 320v477.44c0 37.76-29.824 68.288-66.624 68.288h-86.528z m0-51.2h86.528c9.152 0 16.64-7.616 16.64-17.024V319.936c0-113.088-89.536-204.8-199.936-204.8h-271.36c-9.28 0-16.704 7.68-16.704 17.088v41.024h192.768c128 127.744 192.064 192.768 192.064 195.008v446.272z m-52.608 95.104V388.864h-197.12V223.68H180.672v685.952h509.568zM533.44 347.52h126.912L533.504 223.488V347.52z"  ></path></symbol><symbol id="aui-icon-plus" viewBox="0 0 1024 1024"><path d="M904 456h-336v-336C568 86.4 545.6 64 512 64s-56 22.4-56 56v336h-336C86.4 456 64 478.4 64 512s22.4 56 56 56h336v336c0 33.6 22.4 56 56 56s56-22.4 56-56v-336h336c33.6 0 56-22.4 56-56s-22.4-56-56-56z"  ></path></symbol><symbol id="aui-icon-back_top" viewBox="0 0 1024 1024"><path d="M545.07353 181.552571a42.2855 42.2855 0 0 0-34.480914-12.346599l-0.511776 0.063972a37.551571 37.551571 0 0 0-1.471357 0.191916c-0.383832 0-0.703692 0.127944-1.023552 0.191916l-1.023552 0.127944a42.413444 42.413444 0 0 0-1.27944 0.319861l-0.63972 0.127944a37.103767 37.103767 0 0 0-1.471357 0.447804l-0.511776 0.127944a39.150871 39.150871 0 0 0-1.535328 0.511776l-0.447804 0.127944a43.820828 43.820828 0 0 0-1.535328 0.63972l-0.383833 0.063972a36.400075 36.400075 0 0 0-1.5993 0.703692l-0.255888 0.127944a44.460549 44.460549 0 0 0-1.663272 0.831636l-0.191916 0.127944a44.652465 44.652465 0 0 0-10.939214 8.316362L117.804461 551.502718a43.24508 43.24508 0 0 0 0 60.773411c16.632723 16.760667 43.692884 16.760667 60.325607 0l294.271256-296.510277v665.180984a42.861248 42.861248 0 0 0 42.541389 43.053164h-0.191916a42.733304 42.733304 0 0 0 42.477416-43.053164v-665.308928l294.463172 296.446305c16.632723 16.760667 43.692884 16.632723 60.325608-0.255888a42.989192 42.989192 0 0 0 0.063972-60.517523l-367.007435-369.758231zM991.790092 43.181108a42.60536 42.60536 0 0 0-42.477416-42.733304H74.687324C51.209596 0.447804 32.209908 19.575436 32.209908 43.181108c0 23.669645 18.999688 42.861248 42.477416 42.861248h874.625352c23.477728 0 42.477416-19.191604 42.477416-42.861248z"  ></path></symbol><symbol id="aui-icon-moon" viewBox="0 0 1024 1024"><path d="M831.68 749.568c-21.952 3.456-44.224 5.248-66.944 5.248a414.592 414.592 0 0 1-204.992-52.48 396.16 396.16 0 0 1-148.992-142.848 372.224 372.224 0 0 1-54.784-196.48c0-74.56 21.12-144 63.296-208.064a381.44 381.44 0 0 0-199.872 133.504 352.256 352.256 0 0 0-77.504 223.872c0 50.496 10.304 98.752 30.976 144.832 20.672 46.08 48.384 85.696 83.072 118.912 34.624 33.28 76.032 59.776 124.096 79.616 48 19.84 98.432 29.696 151.104 29.696 58.432 0 113.92-11.968 166.4-35.84a386.24 386.24 0 0 0 134.144-99.968z m123.456-49.536c-38.144 78.848-95.616 141.888-172.48 189.12A471.424 471.424 0 0 1 531.2 960a471.552 471.552 0 0 1-181.248-35.584 473.088 473.088 0 0 1-149.056-95.552 451.008 451.008 0 0 1-99.712-142.848A420.032 420.032 0 0 1 64 512.32c0-59.52 11.648-116.352 35.008-170.56a442.112 442.112 0 0 1 94.848-140.8 465.856 465.856 0 0 1 143.232-95.872 481.472 481.472 0 0 1 176.448-39.936c17.856-0.768 30.208 6.784 37.12 22.72 7.296 16 4.224 29.952-9.152 41.984a310.912 310.912 0 0 0-80 105.792 301.952 301.952 0 0 0-27.648 127.36c0 57.6 14.784 110.592 44.416 159.168 29.568 48.64 69.76 87.04 120.384 115.456a334.272 334.272 0 0 0 166.08 42.56c47.872 0 94.08-9.92 138.688-29.76 16.64-6.976 31.232-4.48 43.776 7.616a35.648 35.648 0 0 1 10.688 19.84 36.032 36.032 0 0 1-2.752 22.144z"  ></path></symbol><symbol id="aui-icon-navigation_collapse" viewBox="0 0 1024 1024"><path d="M512 832L256 512l256-320h64v640H512z m192-640h64v640h-64V192z"  ></path></symbol><symbol id="aui-icon-close_circle" viewBox="0 0 1024 1024"><path d="M512 0C229.12 0 0 229.12 0 512s229.12 512 512 512 512-229.12 512-512-229.12-512-512-512z m0 924.928A412.8 412.8 0 0 1 99.072 512 412.8 412.8 0 0 1 512 99.072 412.8 412.8 0 0 1 924.928 512 412.8 412.8 0 0 1 512 924.928z m210.176-541.312L593.728 512l128.448 128.384a24.768 24.768 0 0 1 0 35.136l-46.72 46.656a24.768 24.768 0 0 1-35.072 0L512 593.728l-128.384 128.448a24.768 24.768 0 0 1-35.136 0l-46.656-46.72a24.768 24.768 0 0 1 0-35.072L430.272 512 301.824 383.616a24.768 24.768 0 0 1 0-35.136l46.72-46.656a24.768 24.768 0 0 1 35.072 0L512 430.272l128.384-128.448a24.768 24.768 0 0 1 35.136 0l46.656 46.72a24.768 24.768 0 0 1 0 35.072z"  ></path></symbol><symbol id="aui-icon-sun" viewBox="0 0 1024 1024"><path d="M787.392 623.808c16-35.712 24.064-73.024 24.064-112 0-39.04-7.936-76.352-23.808-111.872a288.96 288.96 0 0 0-64.32-92.032A303.68 303.68 0 0 0 627.2 246.336a305.792 305.792 0 0 0-116.8-22.72c-40.768 0-79.744 7.552-116.864 22.72-37.12 15.168-69.12 35.712-96.192 61.568a288.96 288.96 0 0 0-64.256 92.032 271.296 271.296 0 0 0-23.808 111.808c0 39.04 7.936 76.288 23.808 111.808a288.96 288.96 0 0 0 64.256 92.032c27.008 25.856 59.072 46.4 96.192 61.568 37.12 15.168 76.096 22.784 116.864 22.784s79.68-7.616 116.8-22.784a303.68 303.68 0 0 0 96.192-61.568 286.272 286.272 0 0 0 64-91.776z m168.32 26.496c-1.408 5.056-4.864 8.32-10.432 10.048l-152.704 48v153.088a15.424 15.424 0 0 1-6.784 12.992c-5.184 3.328-10.24 4.032-15.168 2.048l-152.64-47.04-94.08 124.032a16.64 16.64 0 0 1-13.568 6.528 16.64 16.64 0 0 1-13.632-6.528l-94.08-124.032-152.64 47.04c-4.864 1.92-9.92 1.28-15.168-2.048a15.424 15.424 0 0 1-6.784-12.992v-153.088l-152.64-48c-5.568-1.664-9.088-4.992-10.432-10.048-1.792-5.632-1.088-10.496 2.048-14.464l94.08-124.096-94.08-124.032a15.36 15.36 0 0 1-2.048-14.528c1.344-4.992 4.864-8.32 10.432-10.048l152.64-48V162.048c0-5.312 2.24-9.664 6.784-12.992 5.248-3.328 10.24-4.032 15.168-1.984l152.64 46.976 94.08-124.032A16.256 16.256 0 0 1 510.336 64c5.888 0 10.432 1.984 13.568 6.016l94.08 124.032 152.64-46.976c4.928-2.048 9.984-1.344 15.168 1.92 4.544 3.392 6.784 7.68 6.784 13.056v153.088l152.704 48c5.568 1.728 9.024 5.056 10.432 10.048a15.36 15.36 0 0 1-2.112 14.528l-94.08 124.032 94.08 124.096c3.2 3.968 3.84 8.832 2.112 14.464z"  ></path></symbol><symbol id="aui-icon-search_s" viewBox="0 0 1024 1024"><path d="M613.248 613.76c47.36-47.36 71.04-104.32 71.04-170.688 0-66.432-23.552-123.2-70.784-170.432-47.232-47.168-104-70.784-170.432-70.784-66.432 0-123.2 23.616-170.432 70.784-47.168 47.232-70.784 104-70.784 170.432 0 66.432 23.616 123.2 70.784 170.432 47.232 47.232 104 70.784 170.432 70.784A231.872 231.872 0 0 0 613.248 613.76zM960 891.072c0 18.688-6.848 34.816-20.48 48.448-13.632 13.632-29.76 20.48-48.448 20.48a64 64 0 0 1-48.448-20.48l-184.704-184.128a368.704 368.704 0 0 1-214.848 66.752 372.48 372.48 0 0 1-147.264-29.888 379.008 379.008 0 0 1-121.152-80.768 379.008 379.008 0 0 1-80.768-121.152A372.48 372.48 0 0 1 64 443.136c0-51.392 9.984-100.48 29.888-147.328a379.008 379.008 0 0 1 80.768-121.152c33.92-33.92 74.304-60.8 121.152-80.768A372.48 372.48 0 0 1 443.072 64c51.328 0 100.48 9.984 147.264 29.888a379.008 379.008 0 0 1 121.152 80.768c33.92 33.92 60.8 74.304 80.768 121.152a372.48 372.48 0 0 1 29.888 147.264 368.704 368.704 0 0 1-66.752 214.848l184.704 184.704c13.248 13.248 19.904 29.44 19.904 48.448z"  ></path></symbol><symbol id="aui-icon-history_s" viewBox="0 0 1024 1024"><path d="M924.416 338.176A435.84 435.84 0 0 1 960 512a435.84 435.84 0 0 1-35.584 173.824 451.968 451.968 0 0 1-95.68 142.912 451.968 451.968 0 0 1-142.912 95.68A435.84 435.84 0 0 1 512 960a444.8 444.8 0 0 1-190.72-42.24 437.952 437.952 0 0 1-154.048-119.36 20.8 20.8 0 0 1-3.776-13.12 17.28 17.28 0 0 1 4.992-11.968l79.872-80.448a20.992 20.992 0 0 1 14.592-5.312c6.208 0.832 10.688 3.2 13.44 7.04a292.8 292.8 0 0 0 104.384 85.76A294.144 294.144 0 0 0 512 810.688c40.448 0 79.04-7.872 115.84-23.68a300.928 300.928 0 0 0 95.36-63.872c26.816-26.816 48.064-58.624 63.872-95.36 15.744-36.736 23.616-75.328 23.616-115.776 0-40.448-7.872-79.04-23.68-115.84A300.928 300.928 0 0 0 723.2 300.8a300.928 300.928 0 0 0-95.36-63.872A290.944 290.944 0 0 0 512 213.312c-38.08 0-74.688 6.912-109.696 20.736a289.792 289.792 0 0 0-93.312 59.2L388.928 373.76c12.032 11.648 14.72 25.088 8.128 40.256-6.592 15.552-18.048 23.296-34.368 23.296H101.312a35.84 35.84 0 0 1-26.24-11.072A35.84 35.84 0 0 1 64 400V138.688c0-16.384 7.808-27.84 23.36-34.432 15.168-6.592 28.544-3.84 40.192 8.192l75.84 75.2a452.8 452.8 0 0 1 142.656-91.264A439.424 439.424 0 0 1 512 64a435.84 435.84 0 0 1 173.824 35.584c55.232 23.68 102.848 55.616 142.912 95.68a451.968 451.968 0 0 1 95.68 142.912z m-337.728 5.824v261.312a18.176 18.176 0 0 1-5.248 13.44 18.176 18.176 0 0 1-13.44 5.248H381.312a18.176 18.176 0 0 1-13.44-5.248 18.176 18.176 0 0 1-5.184-13.44v-37.312c0-5.44 1.728-9.92 5.248-13.44a18.176 18.176 0 0 1 13.44-5.248H512V344c0-5.44 1.728-9.92 5.248-13.44a18.176 18.176 0 0 1 13.44-5.248h37.312c5.44 0 9.92 1.792 13.44 5.248a18.176 18.176 0 0 1 5.248 13.44z"  ></path></symbol><symbol id="aui-icon-check_circle" viewBox="0 0 24 24"><path d="M12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 Z M12,1 C5.92486775,1 1,5.92486775 1,12 C1,18.0751322 5.92486775,23 12,23 C18.0751322,23 23,18.0751322 23,12 C23,5.92486775 18.0751322,1 12,1 Z M16.5,8 L18,9.588 L11,17 L7,12.765 L8.5,11.176 L11,13.824 L16.5,8 Z"/></symbol><symbol id="aui-icon-sync_circle" viewBox="0 0 24 24"><path d="M11.5,-0.5 C18.127417,-0.5 23.5,4.872583 23.5,11.5 C23.5,18.127417 18.127417,23.5 11.5,23.5 C4.872583,23.5 -0.5,18.127417 -0.5,11.5 C-0.5,4.872583 4.872583,-0.5 11.5,-0.5 Z M11.5,0.5 C5.42486775,0.5 0.5,5.42486775 0.5,11.5 C0.5,17.5751322 5.42486775,22.5 11.5,22.5 C17.5751322,22.5 22.5,17.5751322 22.5,11.5 C22.5,5.42486775 17.5751322,0.5 11.5,0.5 Z M18.0455081,12.4032823 C18.2571452,12.4032823 18.4179194,12.5954153 18.3787702,12.8034113 C17.7680202,16.0465 14.9206008,18.5 11.5,18.5 C9.62445161,18.5 7.92122177,17.7622903 6.66449597,16.5613105 L5.65641129,17.5693952 C5.22966532,17.9961411 4.5,17.6938992 4.5,17.090375 L4.5,13.3064516 C4.5,12.9323185 4.80328629,12.6290323 5.17741935,12.6290323 L8.96134274,12.6290323 C9.56486694,12.6290323 9.86710887,13.3586976 9.4403629,13.7854718 L8.26193548,14.9638992 C9.14433065,15.7901532 10.2895363,16.2430645 11.5044032,16.2419637 C13.6895887,16.2399879 15.5778105,14.7419315 16.0991976,12.6615484 C16.1371331,12.5101734 16.271996,12.4032823 16.4280565,12.4032823 L18.0455081,12.4032823 Z M11.5,4.5 C13.3755484,4.5 15.0787782,5.23770968 16.335504,6.43868952 L17.3435887,5.43060484 C17.7703347,5.00385887 18.5,5.30610081 18.5,5.909625 L18.5,9.69354839 C18.5,10.0676814 18.1967137,10.3709677 17.8225806,10.3709677 L14.0386573,10.3709677 C13.4351331,10.3709677 13.1328911,9.64130242 13.5596371,9.21452823 L14.7380645,8.03612903 C13.8556694,7.20990323 12.7105484,6.75699194 11.4957097,6.75806452 C9.30939516,6.75998387 7.42193548,8.25905645 6.90080242,10.3385081 C6.86286694,10.4898831 6.72800403,10.5967742 6.57194355,10.5967742 L4.95452016,10.5967742 C4.74288306,10.5967742 4.58210887,10.4046411 4.62125806,10.1966452 C5.23197984,6.9535 8.07939919,4.5 11.5,4.5 Z" transform="translate(.5 .5)"></path></symbol><symbol id="aui-icon-close_circle" viewBox="0 0 24 24"><path d="M12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 Z M12,1 C5.92486775,1 1,5.92486775 1,12 C1,18.0751322 5.92486775,23 12,23 C18.0751322,23 23,18.0751322 23,12 C23,5.92486775 18.0751322,1 12,1 Z M15.2301716,6.7 C15.4530454,6.7 15.6759193,6.78894965 15.8368282,6.94985857 L17.0501414,8.16317179 C17.2110503,8.32408071 17.3,8.54695455 17.3,8.7698284 C17.3,8.99270224 17.2110503,9.21557609 17.0501414,9.37648501 L14.4266264,12 L17.0501414,14.623515 C17.2110503,14.7844239 17.3,15.0072978 17.3,15.2301716 C17.3,15.4530454 17.2110503,15.6759193 17.0501414,15.8368282 L15.8368282,17.0501414 C15.6759193,17.2110503 15.4530454,17.3 15.2301716,17.3 C15.0072978,17.3 14.7844239,17.2110503 14.623515,17.0501414 L12,14.4266264 L9.37648501,17.0501414 C9.21557609,17.2110503 8.99270224,17.3 8.7698284,17.3 C8.54695455,17.3 8.32408071,17.2110503 8.16317179,17.0501414 L6.94985857,15.8368282 C6.78894965,15.6759193 6.7,15.4530454 6.7,15.2301716 C6.7,15.0072978 6.78894965,14.7844239 6.94985857,14.623515 L9.57337356,12 L6.94985857,9.37648501 C6.78894965,9.21557609 6.7,8.99270224 6.7,8.7698284 C6.7,8.54695455 6.78894965,8.32408071 6.94985857,8.16317179 L8.16317179,6.94985857 C8.32408071,6.78894965 8.54695455,6.7 8.7698284,6.7 C8.99270224,6.7 9.21557609,6.78894965 9.37648501,6.94985857 L12,9.57337356 L14.623515,6.94985857 C14.7844239,6.78894965 15.0072978,6.7 15.2301716,6.7 Z"></path></symbol><symbol id="aui-icon-sync_circle_s" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m148.032-670.336l-53.888 53.888a30.976 30.976 0 0 0 21.888 52.864h172.992A30.976 30.976 0 0 0 832 429.44V256.448a30.976 30.976 0 0 0-52.864-21.888l-46.08 46.08a320.064 320.064 0 0 0-535.488 171.776 15.488 15.488 0 0 0 15.232 18.304H286.72a15.552 15.552 0 0 0 15.04-11.84 217.024 217.024 0 0 1 210.048-163.648c55.552 0 107.904 20.672 148.224 58.432z m-437.12 209.92A30.976 30.976 0 0 0 192 594.56v172.992c0 27.584 33.344 41.408 52.864 21.888l46.08-46.08a320.128 320.128 0 0 0 535.488-171.776 15.488 15.488 0 0 0-15.232-18.304H737.28a15.552 15.552 0 0 0-15.04 11.84 217.024 217.024 0 0 1-210.048 163.648 215.232 215.232 0 0 1-148.224-58.432l53.888-53.888a30.976 30.976 0 0 0-21.888-52.864H222.976z" p-id="33305"></path></symbol><symbol id="aui-icon-close_circle_s" viewBox="0 0 1024 1024"><path d="M512 0C229.12 0 0 229.12 0 512s229.12 512 512 512 512-229.12 512-512-229.12-512-512-512z m251.072 646.4a24.768 24.768 0 0 1 0 35.072l-81.792 81.6a24.768 24.768 0 0 1-35.072 0L512 627.584l-134.4 135.488a24.768 24.768 0 0 1-35.072 0l-81.6-81.792a24.768 24.768 0 0 1 0-35.072L396.416 512 260.928 377.6a24.768 24.768 0 0 1 0-35.072l81.792-81.792a24.768 24.768 0 0 1 35.072 0L512 396.416l134.4-135.488a24.768 24.768 0 0 1 35.072 0l81.792 81.792a24.768 24.768 0 0 1 0 35.072L627.584 512l135.488 134.4z" p-id="33432"></path></symbol></svg>';
 
-    /**
-     * Header row definition for the aui-table.
-     * Captures the header row's template and other header properties such as the columns to display.
-     */
-    var TableHeaderRowDefDirective = /** @class */ (function (_super) {
-        __extends(TableHeaderRowDefDirective, _super);
-        function TableHeaderRowDefDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TableHeaderRowDefDirective;
-    }(table.CdkHeaderRowDef));
-    TableHeaderRowDefDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableHeaderRowDef]',
-                    providers: [
-                        {
-                            provide: table.CdkHeaderRowDef,
-                            useExisting: TableHeaderRowDefDirective,
-                        },
-                    ],
-                },] }
-    ];
-    TableHeaderRowDefDirective.propDecorators = {
-        columns: [{ type: i0.Input, args: ['auiTableHeaderRowDef',] }],
-        sticky: [{ type: i0.Input, args: ['auiTableHeaderRowDefSticky',] }]
-    };
-
-    /** Header template container that contains the cell outlet. Adds the right class and role. */
-    var TableHeaderRowComponent = /** @class */ (function (_super) {
-        __extends(TableHeaderRowComponent, _super);
-        function TableHeaderRowComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TableHeaderRowComponent;
-    }(table.CdkHeaderRow));
-    TableHeaderRowComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aui-table-header-row',
-                    template: table.CDK_ROW_TEMPLATE,
-                    host: {
-                        class: 'aui-table__header-row',
-                        role: 'row',
-                    },
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    exportAs: 'auiTableHeaderRow',
-                    preserveWhitespaces: false
-                },] }
-    ];
-
-    /**
-     * Data row definition for the aui-table.
-     * Captures the header row's template and other row properties such as the columns to display and
-     * a when predicate that describes when this row should be used.
-     */
-    var TableRowDefDirective = /** @class */ (function (_super) {
-        __extends(TableRowDefDirective, _super);
-        function TableRowDefDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TableRowDefDirective;
-    }(table.CdkRowDef));
-    TableRowDefDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableRowDef]',
-                    providers: [
-                        {
-                            provide: table.CdkRowDef,
-                            useExisting: TableRowDefDirective,
-                        },
-                    ],
-                },] }
-    ];
-    TableRowDefDirective.propDecorators = {
-        columns: [{ type: i0.Input, args: ['auiTableRowDefColumns',] }],
-        when: [{ type: i0.Input, args: ['auiTableRowDefWhen',] }]
-    };
-
-    /** Data row template container that contains the cell outlet. Adds the right class and role. */
-    var TableRowComponent = /** @class */ (function (_super) {
-        __extends(TableRowComponent, _super);
-        function TableRowComponent() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.disabled = false;
-            return _this;
-        }
-        return TableRowComponent;
-    }(table.CdkRow));
-    TableRowComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aui-table-row',
-                    template: table.CDK_ROW_TEMPLATE,
-                    host: {
-                        class: 'aui-table__row',
-                        role: 'row',
-                    },
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    exportAs: 'auiTableRow',
-                    preserveWhitespaces: false
-                },] }
-    ];
-    TableRowComponent.propDecorators = {
-        disabled: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.isDisabled',] }]
-    };
+    function getAuiIconNoHttpProviderError() {
+        return new Error('Could not find HttpClient provider for use with Alauda UI icons. Please include the HttpClientModule from @angular/common/http in your app imports.');
+    }
+    function getAuiIconFailedToLoadCustomIconFile(url) {
+        return new Error("AuiIcon failed to load custom icon file: " + url + ".");
+    }
 
-    var CLASS_PREFIX = 'aui-table';
-    var WRAPPER_CLASS = CLASS_PREFIX + "__scroll-wrapper";
-    var HAS_SCROLL_CLASS = WRAPPER_CLASS + "--has-scroll";
-    var SCROLLING_CLASS = WRAPPER_CLASS + "--scrolling";
-    var SCROLL_BEFORE_END_CLASS = WRAPPER_CLASS + "--before-end";
-    var TableScrollWrapperDirective = /** @class */ (function () {
-        function TableScrollWrapperDirective(el) {
-            this.el = el;
-            this.scrollDis = 0;
-            this.destroy$$ = new rxjs.Subject();
+    var IconRegisterService = /** @class */ (function () {
+        function IconRegisterService(document, httpClient) {
+            this.httpClient = httpClient;
+            this.defaultIconPrefix = 'aui-icon';
+            this.doc = document;
+            this.registerSvgSymbolsByString(auiIcons);
         }
-        TableScrollWrapperDirective.prototype.ngAfterViewChecked = function () {
-            this.scrollDis =
-                this.el.nativeElement.scrollWidth - this.el.nativeElement.offsetWidth;
-            if (this.scrollDis > 0) {
-                this.el.nativeElement.classList.add(HAS_SCROLL_CLASS);
-            }
+        IconRegisterService.prototype.getDefaultIconPrefix = function () {
+            return this.defaultIconPrefix;
         };
-        TableScrollWrapperDirective.prototype.ngAfterViewInit = function () {
+        IconRegisterService.prototype.replaceDefaultIconPrefix = function (prefix) {
+            this.defaultIconPrefix = prefix;
+        };
+        IconRegisterService.prototype.registerSvgSymbolsByUrl = function (url) {
             var _this = this;
-            rxjs.fromEvent(this.el.nativeElement, 'scroll')
-                .pipe(operators.debounceTime(100), operators.takeUntil(this.destroy$$))
-                .subscribe(function () {
-                var scrollLeft = _this.el.nativeElement.scrollLeft;
-                if (scrollLeft > 0) {
-                    _this.el.nativeElement.classList.add(SCROLLING_CLASS);
-                }
-                else {
-                    _this.el.nativeElement.classList.remove(SCROLLING_CLASS);
-                }
-                if (scrollLeft === _this.scrollDis) {
-                    _this.el.nativeElement.classList.remove(SCROLL_BEFORE_END_CLASS);
-                }
-                else {
-                    _this.el.nativeElement.classList.add(SCROLL_BEFORE_END_CLASS);
-                }
+            if (!this.httpClient) {
+                throw getAuiIconNoHttpProviderError();
+            }
+            this.httpClient
+                .get(url, {
+                responseType: 'text',
+            })
+                .subscribe(function (res) {
+                _this.registerSvgSymbolsByString(res);
+            }, function () {
+                throw getAuiIconFailedToLoadCustomIconFile(url);
             });
         };
-        TableScrollWrapperDirective.prototype.ngOnDestroy = function () {
-            this.destroy$$.next();
-            this.destroy$$.complete();
+        IconRegisterService.prototype.registerSvgSymbolsByString = function (str) {
+            this.appendSvg(str);
         };
-        return TableScrollWrapperDirective;
+        IconRegisterService.prototype.appendSvg = function (svgString) {
+            var setEl = this.doc.createElement('div');
+            setEl.className = 'aui-icon-set';
+            setEl.style.display = 'none';
+            setEl.innerHTML = svgString;
+            this.doc.body.append(setEl);
+        };
+        return IconRegisterService;
     }());
-    TableScrollWrapperDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiTableScrollWrapper]',
-                    host: {
-                        class: WRAPPER_CLASS + " " + SCROLL_BEFORE_END_CLASS,
-                    },
-                },] }
+    IconRegisterService.decorators = [
+        { type: i0.Injectable }
     ];
-    TableScrollWrapperDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+    IconRegisterService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [common.DOCUMENT,] }] },
+        { type: http.HttpClient, decorators: [{ type: i0.Optional }] }
     ]; };
-
-    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
-        });
-        return TableComponent;
-    }(table.CdkTable));
-    TableComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aui-table',
-                    exportAs: 'auiTable',
-                    encapsulation: i0.ViewEncapsulation.None,
-                    template: table.CDK_TABLE_TEMPLATE,
-                    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{font-size:14px}.aui-table__scroll-wrapper{overflow:auto}.aui-table__scroll-wrapper .aui-table__row{padding:0;border:none}.aui-table__scroll-wrapper .aui-table__header-cell{background-color:#fafafa;border:1px solid #eee;border-width:1px 0}.aui-table__scroll-wrapper .aui-table__cell{padding:12px 8px;border-bottom:1px solid #eee;background:#fff}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky:after{position:absolute;top:0;bottom:-1px;width:30px;transform:translateX(-100%);transition:box-shadow .3s;content:\"\";pointer-events:none}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-left:after{right:-50px}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-right{overflow:visible}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-right:after{left:0}.aui-table__scroll-wrapper--scrolling .aui-table-sticky-border-elem-left:after{box-shadow:inset 10px 0 8px -8px rgba(0,0,0,.15)}.aui-table__scroll-wrapper--before-end .aui-table-sticky-border-elem-right:after{box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.15)}.aui-table__header-row,.aui-table__row{display:flex;align-items:center;box-sizing:border-box}.aui-table__header-row:after,.aui-table__row:after{display:inline-block;min-height:inherit;content:\"\"}.aui-table__row{padding:12px 0;border:solid #eee;border-width:0 0 1px;background:#fff;position:relative}.aui-table__row.isDisabled:before{content:\"\";z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.7;cursor:not-allowed}.aui-table__header-row{height:42px;padding:0;background-color:#fafafa;border-color:#eee;border-style:solid;border-width:1px 0}.aui-table__cell,.aui-table__header-cell{flex:1;overflow:hidden;word-wrap:break-word;padding:0 8px}.aui-table__header-cell{color:#333;font-weight:500;height:42px;line-height:42px}"]
-                },] }
-    ];
-
-    var TableModule = /** @class */ (function () {
-        function TableModule() {
-        }
-        return TableModule;
-    }());
-    TableModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, table.CdkTableModule],
-                    declarations: [
-                        TableComponent,
-                        TableRowComponent,
-                        TableHeaderRowComponent,
-                        TableCellDirective,
-                        TableHeaderCellDirective,
-                        TableRowDefDirective,
-                        TableHeaderRowDefDirective,
-                        TableCellDefDirective,
-                        TableHeaderCellDefDirective,
-                        TableColumnDefDirective,
-                        TableScrollWrapperDirective,
-                    ],
-                    exports: [
-                        TableComponent,
-                        TableRowComponent,
-                        TableHeaderRowComponent,
-                        TableCellDirective,
-                        TableHeaderCellDirective,
-                        TableRowDefDirective,
-                        TableHeaderRowDefDirective,
-                        TableCellDefDirective,
-                        TableHeaderCellDefDirective,
-                        TableColumnDefDirective,
-                        TableScrollWrapperDirective,
-                    ],
-                },] }
-    ];
-
-    /** @docs-private */
-    function getSortDuplicateSortableIdError(id) {
-        return new Error("Cannot have two MatSortables with the same id (" + id + ").");
-    }
-    /** @docs-private */
-    function getSortHeaderNotContainedWithinSortError() {
-        return new Error("MatSortHeader must be placed within a parent element with the MatSort directive.");
-    }
-    /** @docs-private */
-    function getSortHeaderMissingIdError() {
-        return new Error("MatSortHeader must be provided with a unique id.");
-    }
-    /** @docs-private */
-    function getSortInvalidDirectionError(direction) {
-        return new Error(direction + " is not a valid sort direction ('asc' or 'desc').");
+    function ICON_REGISTER_PROVIDER_FACTORY(parentRegister, document, httpClient) {
+        return parentRegister || new IconRegisterService(document, httpClient);
     }
+    var ICON_REGISTER_SERVICE_PROVIDER = {
+        provide: IconRegisterService,
+        deps: [
+            [new i0.Optional(), new i0.SkipSelf(), IconRegisterService],
+            [new i0.Optional(), common.DOCUMENT],
+            [new i0.Optional(), http.HttpClient],
+        ],
+        useFactory: ICON_REGISTER_PROVIDER_FACTORY,
+    };
 
-    // Original code from material2
-    var SortDirective = /** @class */ (function () {
-        function SortDirective() {
-            this.sortables = new Map();
-            this._stateChanges = new rxjs.Subject();
-            this.start = 'asc';
-            this._direction = '';
-            this.sortChange = new i0.EventEmitter();
+    var id = 0;
+    var IconComponent = /** @class */ (function () {
+        function IconComponent(iconRegisterService) {
+            this.iconRegisterService = iconRegisterService;
+            this.link = '';
+            this.bem = buildBem('aui-icon');
+            this.id = id++;
         }
-        Object.defineProperty(SortDirective.prototype, "direction", {
-            get: function () {
-                return this._direction;
-            },
-            set: function (direction) {
-                if (i0.isDevMode() &&
-                    direction &&
-                    direction !== 'asc' &&
-                    direction !== 'desc') {
-                    throw getSortInvalidDirectionError(direction);
-                }
-                this._direction = direction;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SortDirective.prototype.register = function (sortable) {
-            if (!sortable.id) {
-                throw getSortHeaderMissingIdError();
-            }
-            if (this.sortables.has(sortable.id)) {
-                throw getSortDuplicateSortableIdError(sortable.id);
-            }
-            this.sortables.set(sortable.id, sortable);
-        };
-        SortDirective.prototype.deregister = function (sortable) {
-            this.sortables.delete(sortable.id);
+        IconComponent.prototype.parseIcon = function (icon) {
+            var defaultPrefix = this.iconRegisterService.getDefaultIconPrefix();
+            var arr = (icon || '').split(':');
+            return arr.length < 2 ? [defaultPrefix, arr[0]] : [arr[0], arr[1]];
         };
-        SortDirective.prototype.sort = function (sortable) {
-            if (this.active !== sortable.id) {
-                this.active = sortable.id;
-                this.direction = sortable.start ? sortable.start : this.start;
+        IconComponent.prototype.getWidth = function () {
+            if (!this.size) {
+                return false;
             }
-            else {
-                this.direction = this.direction === 'asc' ? 'desc' : 'asc';
+            return handlePixel((this.size || '').split(',')[0]);
+        };
+        IconComponent.prototype.getHeight = function () {
+            if (!this.size) {
+                return false;
             }
-            this.sortChange.emit({
-                active: this.active,
-                direction: this.direction,
-            });
+            var arr = (this.size || '').split(',');
+            return handlePixel(arr[1] || arr[0]);
         };
-        SortDirective.prototype.ngOnChanges = function () {
-            this._stateChanges.next();
+        IconComponent.prototype.getIconId = function (icon) {
+            var _a = __read(this.parseIcon(icon), 2), prefix = _a[0], name = _a[1];
+            return prefix + "-" + name;
         };
-        SortDirective.prototype.ngOnDestroy = function () {
-            this._stateChanges.complete();
+        IconComponent.prototype.getClass = function (id) {
+            return this.bem.block(this.margin) + " " + id;
         };
-        return SortDirective;
+        return IconComponent;
     }());
-    SortDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[auiSort]',
-                    exportAs: 'auiSort',
+    IconComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-icon',
+                    template: "<svg\n  *ngIf=\"icon === 'spinner'; else icons\"\n  [attr.class]=\"getClass('aui-icon-spinner')\"\n  [style.fill]=\"color\"\n  [style.width]=\"getWidth()\"\n  [style.height]=\"getHeight()\"\n  viewBox=\"0 0 200 200\"\n>\n  <defs>\n    <linearGradient\n      [attr.id]=\"'right-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"150\"\n      y1=\"20\"\n      x2=\"150\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #000\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <linearGradient\n      [attr.id]=\"'left-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"50\"\n      y1=\"0\"\n      x2=\"50\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #fff\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <mask [attr.id]=\"'mask-' + id\">\n      <g>\n        <path\n          [attr.fill]=\"'url(#right-' + id + ')'\"\n          d=\"M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z\"\n        />\n        <path\n          [attr.fill]=\"'url(#left-' + id + ')'\"\n          d=\"M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z\"\n        />\n      </g>\n    </mask>\n  </defs>\n  <rect\n    x=\"0\"\n    y=\"0\"\n    width=\"200\"\n    height=\"200\"\n    [attr.mask]=\"'url(#mask-' + id + ')'\"\n  />\n</svg>\n\n<ng-template #icons>\n  <svg\n    *ngIf=\"\n      getIconId(\n        icon ? icon : ({ light: light, dark: dark } | auiTheme)\n      ) as iconId\n    \"\n    [attr.class]=\"getClass(iconId)\"\n    [style.fill]=\"color\"\n    [style.width]=\"getWidth()\"\n    [style.height]=\"getHeight()\"\n  >\n    <use [attr.xlink:href]=\"link + '#' + iconId\"></use>\n  </svg>\n</ng-template>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    styles: ["aui-icon{vertical-align:bottom}.aui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor}.aui-icon--left{margin-left:var(--aui-spacing-s)}.aui-icon--right{margin-right:var(--aui-spacing-s)}.aui-icon-spinner{-webkit-animation:rotating .5s linear infinite;animation:rotating .5s linear infinite}aui-icon+aui-icon>.aui-icon{margin-left:var(--aui-spacing-s)}@-webkit-keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
                 },] }
     ];
-    SortDirective.propDecorators = {
-        active: [{ type: i0.Input }],
-        start: [{ type: i0.Input }],
-        direction: [{ type: i0.Input }],
-        sortChange: [{ type: i0.Output }]
+    IconComponent.ctorParameters = function () { return [
+        { type: IconRegisterService }
+    ]; };
+    IconComponent.propDecorators = {
+        icon: [{ type: i0.Input }],
+        light: [{ type: i0.Input }],
+        dark: [{ type: i0.Input }],
+        link: [{ type: i0.Input }],
+        margin: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
+        color: [{ type: i0.Input }]
     };
 
-    var SortHeaderComponent = /** @class */ (function () {
-        function SortHeaderComponent(cdr, _sort, _cdkColumnRef) {
+    var ThemeService = /** @class */ (function () {
+        function ThemeService() {
             var _this = this;
-            this._sort = _sort;
-            this._cdkColumnRef = _cdkColumnRef;
-            this.arrowDirection = '';
-            this.bem = buildBem('aui-sort-header');
-            if (!_sort) {
-                throw getSortHeaderNotContainedWithinSortError();
-            }
-            this._rerenderSubscription = rxjs.merge(_sort.sortChange, _sort._stateChanges).subscribe(function () {
-                if (_this._isSorted()) {
-                    _this._updateArrowDirection();
-                }
-                if (!_this._isSorted() && _this._viewState === 'active') {
-                    _this._viewState = '';
+            this.currentAppTheme$$ = new rxjs.ReplaySubject(1);
+            this.currentAppTheme$ = this.currentAppTheme$$
+                .asObservable()
+                .pipe(operators.distinctUntilChanged());
+            this.htmlEl = document.querySelector('html');
+            switch (this.htmlEl.getAttribute('aui-color-mode')) {
+                case 'dark':
+                    this.themeMode = 'dark';
+                    break;
+                case 'light':
+                    this.themeMode = 'light';
+                    break;
+                case 'auto':
+                    this.themeMode = 'auto';
+                    break;
+                default:
+                    this.themeMode = 'light';
+            }
+            var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.browserTheme = darkModeQuery.matches ? 'dark' : 'light';
+            darkModeQuery.addEventListener('change', function (_a) {
+                var matches = _a.matches;
+                _this.browserTheme = matches ? 'dark' : 'light';
+                if (_this.themeMode === 'auto') {
+                    _this.themeChanged();
                 }
+            });
+            this.themeChanged();
+        }
+        ThemeService.prototype.setThemeMode = function (mode) {
+            this.htmlEl.setAttribute('aui-color-mode', mode);
+            this.themeMode = mode;
+            this.themeChanged();
+        };
+        ThemeService.prototype.getAppTheme = function () {
+            return this.themeMode === 'auto' ? this.browserTheme : this.themeMode;
+        };
+        ThemeService.prototype.themeChanged = function () {
+            this.currentAppTheme$$.next(this.getAppTheme());
+        };
+        return ThemeService;
+    }());
+    ThemeService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ThemeService_Factory() { return new ThemeService(); }, token: ThemeService, providedIn: "root" });
+    ThemeService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    ThemeService.ctorParameters = function () { return []; };
+
+    var ThemePipe = /** @class */ (function () {
+        function ThemePipe(themeService, cdr) {
+            var _this = this;
+            this.destroy$$ = new rxjs.Subject();
+            themeService.currentAppTheme$
+                .pipe(operators.takeUntil(this.destroy$$))
+                .subscribe(function (theme) {
+                _this.currentTheme = theme;
                 cdr.markForCheck();
             });
         }
-        SortHeaderComponent.prototype.ngOnInit = function () {
-            if (!this.id && this._cdkColumnRef) {
-                this.id = this._cdkColumnRef.name;
+        ThemePipe.prototype.transform = function (v) {
+            if (v instanceof Function) {
+                return v(this.currentTheme);
             }
-            this._updateArrowDirection();
-            this._viewState = this._isSorted() ? 'active' : '';
-            this._sort.register(this);
-        };
-        SortHeaderComponent.prototype.ngOnDestroy = function () {
-            this._sort.deregister(this);
-            this._rerenderSubscription.unsubscribe();
+            return v[this.currentTheme];
         };
-        SortHeaderComponent.prototype._handleClick = function () {
-            this._sort.sort(this);
-            this._viewState = this._isSorted() ? 'active' : '';
+        ThemePipe.prototype.ngOnDestroy = function () {
+            this.destroy$$.next();
+            this.destroy$$.complete();
         };
-        SortHeaderComponent.prototype._isSorted = function () {
-            return (this._sort.active === this.id &&
-                ['asc', 'desc'].includes(this._sort.direction));
+        return ThemePipe;
+    }());
+    ThemePipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'auiTheme', pure: false },] }
+    ];
+    ThemePipe.ctorParameters = function () { return [
+        { type: ThemeService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    var ThemeModule = /** @class */ (function () {
+        function ThemeModule() {
+        }
+        return ThemeModule;
+    }());
+    ThemeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    declarations: [ThemePipe],
+                    exports: [ThemePipe],
+                },] }
+    ];
+
+    var IconModule = /** @class */ (function () {
+        function IconModule() {
+        }
+        return IconModule;
+    }());
+    IconModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, ThemeModule],
+                    declarations: [IconComponent],
+                    exports: [IconComponent],
+                    providers: [ICON_REGISTER_SERVICE_PROVIDER],
+                },] }
+    ];
+
+    var ButtonGroupComponent = /** @class */ (function () {
+        function ButtonGroupComponent() {
+        }
+        return ButtonGroupComponent;
+    }());
+    ButtonGroupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-button-group',
+                    template: "<div class=\"aui-button-group\"><ng-content></ng-content></div>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    preserveWhitespaces: false,
+                    styles: [".aui-button-group{display:inline-block}.aui-button-group .aui-button{border-radius:0;z-index:1}.aui-button-group .aui-button:first-child{border-top-left-radius:var(--aui-border-radius-m);border-bottom-left-radius:var(--aui-border-radius-m)}.aui-button-group .aui-button:last-child{border-top-right-radius:var(--aui-border-radius-m);border-bottom-right-radius:var(--aui-border-radius-m)}.aui-button-group .aui-button.cdk-keyboard-focused,.aui-button-group .aui-button.isActive,.aui-button-group .aui-button:active,.aui-button-group .aui-button:hover{z-index:2}.aui-button-group .aui-button[disabled]{z-index:0}.aui-button-group .aui-button+.aui-button{margin-left:-1px}.aui-button-group .aui-button:not(.isPlain)+.aui-button:not(.isPlain){margin-left:1px}.aui-button+aui-button-group>.aui-button-group,aui-button-group+.aui-button,aui-button-group+aui-button-group>.aui-button-group{margin-left:var(--aui-spacing-m)}"]
+                },] }
+    ];
+
+    var ButtonType = {
+        Default: 'default',
+        Primary: 'primary',
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger',
+        Text: 'text',
+        Inline: 'inline',
+        /**
+         * represents default internally, @link https://github.com/angular/vscode-ng-language-service/issues/1147
+         */
+        Empty: '',
+        /**
+         * @deprecated use `ButtonType.Danger` instead
+         */
+        Error: 'danger',
+        /**
+         * @deprecated use `ButtonType.Default` instead
+         */
+        Info: 'default',
+    };
+
+    var prefix = 'aui-button--';
+    var ButtonComponent = /** @class */ (function () {
+        function ButtonComponent(el, renderer, focusMonitor) {
+            this.el = el;
+            this.renderer = renderer;
+            this.focusMonitor = focusMonitor;
+            this._type = ButtonType.Default;
+            this._size = ComponentSize.Medium;
+            this._plain = false;
+            this._loading = false;
+            this._round = false;
+            this._square = false;
+            this.renderer.addClass(this.el.nativeElement, 'aui-button');
+            this.renderer.addClass(this.el.nativeElement, prefix + this.type);
+            this.renderer.addClass(this.el.nativeElement, prefix + this.size);
+            this.focusMonitor.monitor(this.el.nativeElement, false);
+        }
+        Object.defineProperty(ButtonComponent.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            set: function (val) {
+                if (!val || val === this._type) {
+                    return;
+                }
+                this.renderer.removeClass(this.el.nativeElement, prefix + this._type);
+                this.renderer.addClass(this.el.nativeElement, prefix + val);
+                this._type = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ButtonComponent.prototype, "size", {
+            get: function () {
+                return this._size;
+            },
+            set: function (val) {
+                // when change from other size to default
+                if (!val) {
+                    val = ComponentSize.Medium;
+                }
+                if (this._size === val) {
+                    return;
+                }
+                this.renderer.removeClass(this.el.nativeElement, prefix + this._size);
+                this.renderer.addClass(this.el.nativeElement, prefix + val);
+                this._size = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ButtonComponent.prototype, "plain", {
+            get: function () {
+                return this._plain;
+            },
+            set: function (val) {
+                if (this._plain === val) {
+                    return;
+                }
+                this.switchAssertClass('isPlain', val);
+                this._plain = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ButtonComponent.prototype, "loading", {
+            get: function () {
+                return this._loading;
+            },
+            set: function (val) {
+                if (this._loading === val) {
+                    return;
+                }
+                this.switchAssertClass('isLoading', val);
+                this._loading = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ButtonComponent.prototype, "round", {
+            get: function () {
+                return this._round;
+            },
+            set: function (val) {
+                if (this._round === val) {
+                    return;
+                }
+                this.switchAssertClass('isRound', val);
+                this._round = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ButtonComponent.prototype, "square", {
+            get: function () {
+                return this._square;
+            },
+            set: function (val) {
+                if (this._square === val) {
+                    return;
+                }
+                this.switchAssertClass('isSquare', val);
+                this._square = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ButtonComponent.prototype.ngOnDestroy = function () {
+            this.focusMonitor.stopMonitoring(this.el.nativeElement);
         };
-        SortHeaderComponent.prototype._updateArrowDirection = function () {
-            this.arrowDirection = this._isSorted()
-                ? this._sort.direction
-                : this.start || this._sort.start;
+        ButtonComponent.prototype.switchAssertClass = function (className, val) {
+            if (val) {
+                this.renderer.addClass(this.el.nativeElement, className);
+            }
+            else {
+                this.renderer.removeClass(this.el.nativeElement, className);
+            }
         };
-        return SortHeaderComponent;
+        return ButtonComponent;
     }());
-    SortHeaderComponent.decorators = [
+    ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
-                    selector: '[aui-sort-header]',
-                    template: "<div [class]=\"bem.block({ active: _isSorted() })\" (click)=\"_handleClick()\">\n  <button [class]=\"bem.element('button')\" type=\"button\">\n    <ng-content></ng-content>\n  </button>\n  <div [class]=\"bem.element('indicator', arrowDirection)\"></div>\n</div>\n",
+                    selector: 'button[aui-button]',
+                    template: "<span class=\"aui-button__content\"><ng-content></ng-content></span>\n<aui-icon *ngIf=\"loading\" icon=\"spinner\"></aui-icon>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".aui-sort-header{display:flex;cursor:pointer}.aui-sort-header__button{border:none;background:0 0;display:flex;align-items:center;padding:0;outline:0;font:inherit;cursor:inherit;color:currentColor}.aui-sort-header__indicator{margin-left:4px;display:flex;flex-direction:column;align-items:center;justify-content:center}.aui-sort-header__indicator:after,.aui-sort-header__indicator:before{content:\"\";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.aui-sort-header__indicator:before{border-bottom:4px solid #ccc;margin-bottom:4px}.aui-sort-header__indicator:after{border-top:4px solid #ccc}.aui-sort-header--active .aui-sort-header__indicator--asc:before{border-bottom-color:#2c2f36}.aui-sort-header--active .aui-sort-header__indicator--desc:after{border-top-color:#2c2f36}"]
+                    preserveWhitespaces: false,
+                    styles: [".aui-button{margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;border-width:1px;border-radius:var(--aui-border-radius-m);border-style:solid;background:none;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;transition:all .3s ease}.aui-button::-moz-focus-inner{border:none}.aui-button[disabled]{cursor:not-allowed}.aui-button__content{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-button aui-icon{display:inline-flex;align-items:center}.aui-button--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-button--large aui-icon{height:var(--aui-line-height-l);font-size:var(--aui-icon-size-l)}.aui-button--large .aui-button__content{padding:0 var(--aui-inline-padding-l)}.aui-button--large.isRound{border-radius:calc(var(--aui-inline-height-l) / 2)}.aui-button--large.isSquare{width:var(--aui-inline-height-l)}.aui-button--large.isSquare .aui-button__content{padding:0}.aui-button--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-button--medium aui-icon{height:var(--aui-line-height-m);font-size:var(--aui-icon-size-m)}.aui-button--medium .aui-button__content{padding:0 var(--aui-inline-padding-m)}.aui-button--medium.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-button--medium.isSquare{width:var(--aui-inline-height-m)}.aui-button--medium.isSquare .aui-button__content{padding:0}.aui-button--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-button--small aui-icon{height:var(--aui-line-height-m);font-size:var(--aui-icon-size-m)}.aui-button--small .aui-button__content{padding:0 var(--aui-inline-padding-s)}.aui-button--small.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-button--small.isSquare{width:var(--aui-inline-height-s)}.aui-button--small.isSquare .aui-button__content{padding:0}.aui-button--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-button--mini aui-icon{height:var(--aui-line-height-s);font-size:var(--aui-icon-size-s)}.aui-button--mini .aui-button__content{padding:0 var(--aui-inline-padding-xs)}.aui-button--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-button--mini.isSquare{width:var(--aui-inline-height-xs)}.aui-button--mini.isSquare .aui-button__content{padding:0}.aui-button--text{color:rgb(var(--aui-color-primary));border:none;background-color:transparent}.aui-button--text .aui-button__content{padding:0 4px}.aui-button--text.aui-button--large:not(.isSquare){height:var(--aui-line-height-l);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-button--text.aui-button--medium:not(.isSquare),.aui-button--text.aui-button--small:not(.isSquare){height:var(--aui-line-height-m);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-button--text.aui-button--mini:not(.isSquare){height:var(--aui-line-height-s);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-button--text.isPlain{color:rgb(var(--aui-color-n-1))}.aui-button--text:hover{color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-6))}.aui-button--text.isActive,.aui-button--text:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--text[disabled]{color:rgb(var(--aui-color-p-4));background-color:transparent}.aui-button--text.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--inline{color:rgb(var(--aui-color-primary));border:none;background-color:none}.aui-button--inline .aui-button__content{padding:0}.aui-button--inline.aui-button--large:not(.isSquare){height:var(--aui-line-height-l);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-button--inline.aui-button--medium:not(.isSquare),.aui-button--inline.aui-button--small:not(.isSquare){height:var(--aui-line-height-m);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-button--inline.aui-button--mini:not(.isSquare){height:var(--aui-line-height-s);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-button--inline.isPlain{color:rgb(var(--aui-color-n-1))}.aui-button--inline:hover{color:rgb(var(--aui-color-p-1))}.aui-button--inline.isActive,.aui-button--inline:active{color:rgb(var(--aui-color-p-0))}.aui-button--inline[disabled]{color:rgb(var(--aui-color-p-4))}.aui-button--inline.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--default{color:rgb(var(--aui-color-n-1));border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9))}.aui-button--default:hover{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-button--default.isActive,.aui-button--default:active{color:rgb(var(--aui-color-p-0));border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--default[disabled]{color:rgb(var(--aui-color-n-6));border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-button--default.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--primary{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-button--primary:hover{border-color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-1))}.aui-button--primary.isActive,.aui-button--primary:active{border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-0))}.aui-button--primary[disabled]{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-button--primary.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--primary.isPlain{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-button--primary.isPlain:hover{color:rgb(var(--aui-color-p-1));border-color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-7))}.aui-button--primary.isPlain.isActive,.aui-button--primary.isPlain:active{color:rgb(var(--aui-color-p-0));border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--primary.isPlain[disabled]{color:rgb(var(--aui-color-p-4));border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-7))}.aui-button--primary.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--success{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-green))}.aui-button--success:hover{border-color:rgb(var(--aui-color-g-1));background-color:rgb(var(--aui-color-g-1))}.aui-button--success.isActive,.aui-button--success:active{border-color:rgb(var(--aui-color-g-0));background-color:rgb(var(--aui-color-g-0))}.aui-button--success[disabled]{border-color:rgb(var(--aui-color-g-4));background-color:rgb(var(--aui-color-g-4))}.aui-button--success.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-green),.16)}.aui-button--success.isPlain{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-button--success.isPlain:hover{color:rgb(var(--aui-color-g-1));border-color:rgb(var(--aui-color-g-1));background-color:rgb(var(--aui-color-g-7))}.aui-button--success.isPlain.isActive,.aui-button--success.isPlain:active{color:rgb(var(--aui-color-g-0));border-color:rgb(var(--aui-color-g-0));background-color:rgb(var(--aui-color-g-5))}.aui-button--success.isPlain[disabled]{color:rgb(var(--aui-color-g-4));border-color:rgb(var(--aui-color-g-4));background-color:rgb(var(--aui-color-g-7))}.aui-button--success.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--warning{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-yellow))}.aui-button--warning:hover{border-color:rgb(var(--aui-color-y-1));background-color:rgb(var(--aui-color-y-1))}.aui-button--warning.isActive,.aui-button--warning:active{border-color:rgb(var(--aui-color-y-0));background-color:rgb(var(--aui-color-y-0))}.aui-button--warning[disabled]{border-color:rgb(var(--aui-color-y-4));background-color:rgb(var(--aui-color-y-4))}.aui-button--warning.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-yellow),.16)}.aui-button--warning.isPlain{color:rgb(var(--aui-color-yellow));border-color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-button--warning.isPlain:hover{color:rgb(var(--aui-color-y-1));border-color:rgb(var(--aui-color-y-1));background-color:rgb(var(--aui-color-y-7))}.aui-button--warning.isPlain.isActive,.aui-button--warning.isPlain:active{color:rgb(var(--aui-color-y-0));border-color:rgb(var(--aui-color-y-0));background-color:rgb(var(--aui-color-y-5))}.aui-button--warning.isPlain[disabled]{color:rgb(var(--aui-color-y-4));border-color:rgb(var(--aui-color-y-4));background-color:rgb(var(--aui-color-y-7))}.aui-button--warning.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--danger{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-red))}.aui-button--danger:hover{border-color:rgb(var(--aui-color-r-1));background-color:rgb(var(--aui-color-r-1))}.aui-button--danger.isActive,.aui-button--danger:active{border-color:rgb(var(--aui-color-r-0));background-color:rgb(var(--aui-color-r-0))}.aui-button--danger[disabled]{border-color:rgb(var(--aui-color-r-4));background-color:rgb(var(--aui-color-r-4))}.aui-button--danger.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}.aui-button--danger.isPlain{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-button--danger.isPlain:hover{color:rgb(var(--aui-color-r-1));border-color:rgb(var(--aui-color-r-1));background-color:rgb(var(--aui-color-r-7))}.aui-button--danger.isPlain.isActive,.aui-button--danger.isPlain:active{color:rgb(var(--aui-color-r-0));border-color:rgb(var(--aui-color-r-0));background-color:rgb(var(--aui-color-r-5))}.aui-button--danger.isPlain[disabled]{color:rgb(var(--aui-color-r-4));border-color:rgb(var(--aui-color-r-4));background-color:rgb(var(--aui-color-r-7))}.aui-button--danger.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button.isLoading .aui-button__content{opacity:0}.aui-button.isLoading aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.aui-button+.aui-button,.aui-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button{margin-left:var(--aui-spacing-m)}.aui-button--text+.aui-button--text{margin-left:var(--aui-spacing-s)}"]
                 },] }
     ];
-    SortHeaderComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: SortDirective, decorators: [{ type: i0.Optional }] },
-        { type: table.CdkColumnDef, decorators: [{ type: i0.Optional }] }
+    ButtonComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: a11y.FocusMonitor }
     ]; };
-    SortHeaderComponent.propDecorators = {
-        id: [{ type: i0.Input, args: ['aui-sort-header',] }],
-        start: [{ type: i0.Input }]
+    ButtonComponent.propDecorators = {
+        type: [{ type: i0.Input, args: ['aui-button',] }],
+        size: [{ type: i0.Input }],
+        plain: [{ type: i0.Input }],
+        loading: [{ type: i0.Input }],
+        round: [{ type: i0.Input }],
+        square: [{ type: i0.Input }]
     };
 
-    var SortModule = /** @class */ (function () {
-        function SortModule() {
+    var ButtonModule = /** @class */ (function () {
+        function ButtonModule() {
         }
-        return SortModule;
+        return ButtonModule;
     }());
-    SortModule.decorators = [
+    ButtonModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    declarations: [SortDirective, SortHeaderComponent],
-                    exports: [SortDirective, SortHeaderComponent],
+                    imports: [common.CommonModule, IconModule],
+                    declarations: [ButtonComponent, ButtonGroupComponent],
+                    exports: [ButtonComponent, ButtonGroupComponent],
                 },] }
     ];
 
-    var auiIcons = '<svg><symbol id="aui-icon-time" viewBox="0 0 1024 1024"><path d="M567.678 277.319v278.584a20.735 20.735 0 0 1-5.951 15.36 20.735 20.735 0 0 1-15.36 5.951h-192.25a20.735 20.735 0 0 1-15.36-6.016 20.735 20.735 0 0 1-5.952-15.36V523.2c0-6.208 1.984-11.328 6.016-15.36a20.735 20.735 0 0 1 15.36-5.952h145.915v-224.57c0-6.207 1.92-11.327 5.952-15.359a20.735 20.735 0 0 1 15.36-5.952h24.959c6.208 0 11.328 1.984 15.36 6.016a20.735 20.735 0 0 1 6.015 15.36z m318.327 451.443A422.26 422.26 0 0 0 943.988 512a422.26 422.26 0 0 0-57.983-216.762 430.644 430.644 0 0 0-157.243-157.243A422.26 422.26 0 0 0 512 80.012a422.26 422.26 0 0 0-216.762 57.983 430.644 430.644 0 0 0-157.243 157.243A422.26 422.26 0 0 0 80.012 512c0 78.334 19.328 150.588 57.983 216.762a430.644 430.644 0 0 0 157.243 157.243A422.26 422.26 0 0 0 512 943.988a422.26 422.26 0 0 0 216.762-57.983 430.644 430.644 0 0 0 157.243-157.243z m69.31-473.395A499.058 499.058 0 0 1 1023.985 512c0 92.861-22.911 178.555-68.67 257.017a509.681 509.681 0 0 1-186.298 186.298A500.85 500.85 0 0 1 512 1023.985a500.85 500.85 0 0 1-257.017-68.67A509.681 509.681 0 0 1 68.685 769.017 500.85 500.85 0 0 1 0.015 512c0-92.861 22.911-178.555 68.67-257.017A509.681 509.681 0 0 1 254.983 68.685 500.85 500.85 0 0 1 512 0.015c92.861 0 178.555 22.911 257.017 68.67a508.913 508.913 0 0 1 186.298 186.682z"  ></path></symbol><symbol id="aui-icon-calendar" viewBox="0 0 1024 1024"><path d="M332.8 25.6L332.736 128h358.4L691.2 25.6H768L767.936 128H947.2v870.4H76.8V128h179.136L256 25.6h76.8zM255.936 209.6H158.4v707.2h707.2V209.6h-97.664L768 256h-76.8l-0.064-46.4h-358.4L332.8 256H256l-0.064-46.4zM704 601.6v76.8H320V601.6h384z m0-192v76.8H320V409.6h384z"  ></path></symbol><symbol id="aui-icon-check_circle_s" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM248 536l192 192 336-336L704 320 440 584 320 464 248 536z"  ></path></symbol><symbol id="aui-icon-close" viewBox="0 0 1024 1024"><path d="M802.24 131.2L512 421.44 221.696 131.2 131.2 221.76l290.304 290.304-290.304 290.24 90.496 90.496L512 602.56l290.24 290.24 90.56-90.496-290.304-290.24 290.304-290.304z"  ></path></symbol><symbol id="aui-icon-close_small" viewBox="0 0 1024 1024"><path d="M597.333333 512l170.666667-170.666667a60.672 60.672 0 0 0 0-85.333333 60.672 60.672 0 0 0-85.333333 0L512 426.666667 341.333333 256a60.672 60.672 0 0 0-85.333333 0 60.672 60.672 0 0 0 0 85.333333l170.666667 170.666667-170.666667 170.666667a60.672 60.672 0 0 0 0 85.333333 60.672 60.672 0 0 0 85.333333 0l170.666667-170.666667 170.666667 170.666667a60.672 60.672 0 0 0 85.333333 0 60.672 60.672 0 0 0 0-85.333333L597.333333 512z"  ></path></symbol><symbol id="aui-icon-close_medium" viewBox="0 0 1024 1024"><path d="M597.333333 512l341.333334-341.333333a60.672 60.672 0 0 0 0-85.333334 60.672 60.672 0 0 0-85.333334 0L512 426.666667 170.666667 85.333333a60.672 60.672 0 0 0-85.333334 0 60.672 60.672 0 0 0 0 85.333334l341.333334 341.333333-341.333334 341.333333a60.672 60.672 0 0 0 0 85.333334 60.672 60.672 0 0 0 85.333334 0l341.333333-341.333334 341.333333 341.333334a60.672 60.672 0 0 0 85.333334 0 60.672 60.672 0 0 0 0-85.333334L597.333333 512z"  ></path></symbol><symbol id="aui-icon-close_circle_small_s" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m85.333333-512l170.666667-170.666667a60.672 60.672 0 0 0 0-85.333333 60.672 60.672 0 0 0-85.333333 0L512 426.666667 341.333333 256a60.672 60.672 0 0 0-85.333333 0 60.672 60.672 0 0 0 0 85.333333l170.666667 170.666667-170.666667 170.666667a60.672 60.672 0 0 0 0 85.333333 60.672 60.672 0 0 0 85.333333 0l170.666667-170.666667 170.666667 170.666667a60.672 60.672 0 0 0 85.333333 0 60.672 60.672 0 0 0 0-85.333333L597.333333 512z"  ></path></symbol><symbol id="aui-icon-angle_down" viewBox="0 0 1024 1024"><path d="M512 678.4a38.4 38.4 0 0 1-27.136-11.264l-256-256a38.272 38.272 0 0 1 0-54.272 38.272 38.272 0 0 1 54.272 0L512 585.664l228.864-228.8a38.272 38.272 0 0 1 54.272 0 38.272 38.272 0 0 1 0 54.272l-256 256A38.4 38.4 0 0 1 512 678.4"  ></path></symbol><symbol id="aui-icon-angle_double_left" viewBox="0 0 1024 1024"><path d="M568.64 749.44a19.776 19.776 0 0 1-5.696 13.12l-28.544 28.544a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696L241.856 524.8a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12L508.16 232.256a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l28.544 28.544a19.584 19.584 0 0 1 5.696 13.12 19.776 19.776 0 0 1-5.696 13.12L338.368 511.616l224.576 224.576a19.584 19.584 0 0 1 5.696 13.12v0.128z m219.456 0a19.776 19.776 0 0 1-5.696 13.12l-28.544 28.544a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696L461.312 524.8a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l266.304-266.304a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l28.544 28.544a19.584 19.584 0 0 1 5.696 13.12 19.776 19.776 0 0 1-5.696 13.12L557.824 511.616l224.576 224.576a19.584 19.584 0 0 1 5.696 13.12v0.128z"  ></path></symbol><symbol id="aui-icon-angle_double_right" viewBox="0 0 1024 1024"><path d="M568.64 511.552a19.776 19.776 0 0 1-5.696 13.12l-266.304 266.304a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696l-28.544-28.544a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l224.576-224.576-224.576-224.576a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l28.544-28.544a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696L562.944 498.56a19.584 19.584 0 0 1 5.696 13.12v-0.128z m219.392 0a19.776 19.776 0 0 1-5.696 13.12l-266.304 266.304a19.584 19.584 0 0 1-13.12 5.696 19.776 19.776 0 0 1-13.12-5.696l-28.544-28.544a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l224.576-224.576-224.576-224.576a19.584 19.584 0 0 1-5.696-13.12c0-4.544 2.304-9.728 5.696-13.12l28.544-28.544a19.584 19.584 0 0 1 13.12-5.696c4.544 0 9.728 2.304 13.12 5.696l266.304 266.304a19.584 19.584 0 0 1 5.696 13.12v-0.128z"  ></path></symbol><symbol id="aui-icon-caret_down_s" viewBox="0 0 1024 1024"><path d="M269.248 384h485.504a32 32 0 0 1 22.592 54.656l-242.688 242.688a32 32 0 0 1-45.312 0L246.656 438.656A32 32 0 0 1 269.248 384z"  ></path></symbol><symbol id="aui-icon-angle_left" viewBox="0 0 1024 1024"><path d="M345.6 512a38.4 38.4 0 0 1 11.264-27.136l256-256a38.272 38.272 0 0 1 54.272 0 38.272 38.272 0 0 1 0 54.272L438.336 512l228.8 228.864a38.272 38.272 0 0 1 0 54.272 38.272 38.272 0 0 1-54.272 0l-256-256A38.4 38.4 0 0 1 345.6 512"  ></path></symbol><symbol id="aui-icon-check_triangle_s" viewBox="0 0 1024 1024"><path d="M1024 1024H0L1024 0v1024z m-544-288L640 896l256-256-64-64-192 192-96-96-64 64z"  ></path></symbol><symbol id="aui-icon-check" viewBox="0 0 1024 1024"><path d="M974.656 224.96c11.552 12.064 17.344 26.72 17.344 43.968s-5.792 31.904-17.344 43.968L442.016 868.864c-11.552 12.064-25.6 18.112-42.112 18.112s-30.56-6.048-42.112-18.112L49.344 546.912C37.792 534.848 32 520.192 32 502.944s5.792-31.904 17.344-43.968l84.224-87.904c11.552-12.064 25.6-18.112 42.112-18.112s30.56 6.048 42.112 18.112l182.08 190.72L806.176 137.056c11.552-12.064 25.6-18.112 42.112-18.112s30.56 6.048 42.112 18.112l84.224 87.904z"  ></path></symbol><symbol id="aui-icon-ellipsis_h_s" viewBox="0 0 1024 1024"><path d="M192 416a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m320 0a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m320 0a96 96 0 1 1 0 192 96 96 0 0 1 0-192z"  ></path></symbol><symbol id="aui-icon-exclamation_circle_s" viewBox="0 0 1024 1024"><path d="M512 0c282.688 0 512 229.312 512 512s-229.312 512-512 512-512-229.312-512-512 229.312-512 512-512z m85.312 831.36v-126.72c0-11.968-9.344-21.952-20.672-21.952h-128a22.208 22.208 0 0 0-21.952 21.952v126.72c0 11.968 9.984 21.952 21.952 21.952h128c11.392 0 20.672-9.984 20.672-21.952z m-1.28-229.376L608 187.968a13.376 13.376 0 0 0-6.656-11.968 25.664 25.664 0 0 0-16-5.312H438.656a25.664 25.664 0 0 0-16 5.312 13.376 13.376 0 0 0-6.656 12.032l11.328 413.952c0 9.344 9.984 16.64 22.656 16.64h123.328c12.032 0 22.016-7.296 22.656-16.64z"  ></path></symbol><symbol id="aui-icon-check_s" viewBox="0 0 1024 1024"><path d="M169.024 534.976L247.04 456.96a12.8 12.8 0 0 1 18.048 0L416 608l342.976-342.976a12.8 12.8 0 0 1 18.048 0L855.04 343.04a12.8 12.8 0 0 1 0 18.048L424.96 791.04a12.8 12.8 0 0 1-18.048 0L168.96 552.96a12.8 12.8 0 0 1 0-18.048z"  ></path></symbol><symbol id="aui-icon-compress_s" viewBox="0 0 1024 1024"><path d="M512 549.952v265.856c0 10.24-3.776 19.2-11.264 26.688a36.48 36.48 0 0 1-26.688 11.264 36.48 36.48 0 0 1-26.752-11.264L361.856 757.12l-196.992 196.992a18.752 18.752 0 0 1-27.264 0L69.952 886.4a18.752 18.752 0 0 1 0-27.264l196.992-196.992L181.504 576.64a36.48 36.48 0 0 1-11.264-26.752c0-10.24 3.712-19.2 11.264-26.688A36.48 36.48 0 0 1 208.192 512h265.856c10.24 0 19.2 3.776 26.688 11.264A36.48 36.48 0 0 1 512 549.952z m442.048-412.352a18.752 18.752 0 0 1 0 27.264L757.12 361.856l85.44 85.44a36.48 36.48 0 0 1 11.264 26.752c0 10.24-3.712 19.2-11.264 26.688a36.48 36.48 0 0 1-26.688 11.264H549.952a36.48 36.48 0 0 1-26.688-11.264A36.48 36.48 0 0 1 512 474.048V208.192c0-10.24 3.776-19.2 11.264-26.688a36.48 36.48 0 0 1 26.688-11.264c10.304 0 19.2 3.712 26.752 11.264l85.44 85.44 196.992-196.992a18.752 18.752 0 0 1 27.264 0l67.648 67.648z"  ></path></symbol><symbol id="aui-icon-angle_right" viewBox="0 0 1024 1024"><path d="M678.4 512a38.4 38.4 0 0 1-11.264 27.136l-256 256a38.272 38.272 0 0 1-54.272 0 38.272 38.272 0 0 1 0-54.272L585.664 512 356.864 283.136a38.272 38.272 0 0 1 0-54.272 38.272 38.272 0 0 1 54.272 0l256 256A38.4 38.4 0 0 1 678.4 512"  ></path></symbol><symbol id="aui-icon-export" viewBox="0 0 1024 1024"><path d="M729.6 624H448v-96h281.6V452.352a32 32 0 0 1 52.48-24.64l148.48 123.712a32 32 0 0 1 0 49.152l-148.48 123.712a32 32 0 0 1-52.48-24.64V624zM832 384h-64V128H128v768h640v-128h64v128a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h640a64 64 0 0 1 64 64v256z"  ></path></symbol><symbol id="aui-icon-import" viewBox="0 0 1024 1024"><path d="M678.4 528H960v96h-281.6v75.648a32 32 0 0 1-52.48 24.64L477.44 600.576a32 32 0 0 1 0-49.152l148.48-123.712a32 32 0 0 1 52.48 24.64V528zM832 384h-64V128H128v768h640v-128h64v128a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h640a64 64 0 0 1 64 64v256z"  ></path></symbol><symbol id="aui-icon-exclamation_triangle_s" viewBox="0 0 1024 1024"><path d="M585.152 849.792V741.12a18.56 18.56 0 0 0-18.304-18.88H457.152a18.56 18.56 0 0 0-18.304 18.88v108.608c0 10.24 8 18.88 18.304 18.88h109.696a18.56 18.56 0 0 0 18.304-18.88z m-1.152-213.76l10.24-262.272a13.824 13.824 0 0 0-5.632-10.88c-3.456-2.816-8.576-6.272-13.76-6.272H449.152c-5.12 0-10.24 3.456-13.696 6.272-3.968 2.88-5.76 8.576-5.76 12.032l9.792 261.12c0 7.488 8.576 13.184 19.392 13.184h105.728c10.304 0 18.88-5.76 19.456-13.12zM576 102.336l438.912 804.672a73.088 73.088 0 0 1-64 108.032H73.088c-25.664 0-49.664-13.76-62.848-36.032a72 72 0 0 1-1.152-72L448 102.272a72.704 72.704 0 0 1 128 0z"  ></path></symbol><symbol id="aui-icon-expand_s" viewBox="0 0 1024 1024"><path d="M498.56 591.936a18.432 18.432 0 0 1 0 26.816l-193.664 193.664 84.032 84.032a35.84 35.84 0 0 1 11.072 26.24 35.84 35.84 0 0 1-11.072 26.24 35.84 35.84 0 0 1-26.24 11.072H101.312a35.84 35.84 0 0 1-26.24-11.072 35.84 35.84 0 0 1-11.072-26.24v-261.376a35.84 35.84 0 0 1 11.072-26.24 35.84 35.84 0 0 1 26.24-11.072 35.84 35.84 0 0 1 26.24 11.072l84.032 84.032L405.248 525.44a18.432 18.432 0 0 1 26.88 0L498.56 591.936zM960 101.312v261.376a35.84 35.84 0 0 1-11.072 26.24 35.84 35.84 0 0 1-26.24 11.072 35.84 35.84 0 0 1-26.24-11.072l-84.032-84.032L618.752 498.56a18.432 18.432 0 0 1-26.88 0L525.44 432.064a18.432 18.432 0 0 1 0-26.816l193.664-193.664-84.032-84.032a35.84 35.84 0 0 1-11.072-26.24 35.84 35.84 0 0 1 11.072-26.24 35.84 35.84 0 0 1 26.24-11.072h261.376a35.84 35.84 0 0 1 26.24 11.072 35.84 35.84 0 0 1 11.072 26.24z"  ></path></symbol><symbol id="aui-icon-minus_s" viewBox="0 0 1024 1024"><path d="M256 448h512a64 64 0 0 1 0 128H256a64 64 0 0 1 0-128"  ></path></symbol><symbol id="aui-icon-minus" viewBox="0 0 1024 1024"><path d="M904 448H120C86.4 448 64 470.4 64 504s22.4 56 56 56h784c33.6 0 56-22.4 56-56S937.6 448 904 448z"  ></path></symbol><symbol id="aui-icon-info_circle_s" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0zM448 304v32c0 26.368 21.632 48 48 48h32c26.368 0 48-21.632 48-48v-32A48.192 48.192 0 0 0 528 256h-32a48.192 48.192 0 0 0-48 48zM640 768v-64H576V448H384v64h64v192H384v64h256z"  ></path></symbol><symbol id="aui-icon-navigation_expand" viewBox="0 0 1024 1024"><path d="M512 192l256 320-256 320H448V192h64zM256 192h64v640H256V192z"  ></path></symbol><symbol id="aui-icon-copy" viewBox="0 0 1024 1024"><path d="M742.848 865.728v40.768c0 29.44-25.088 53.504-55.936 53.504h-503.04C153.152 960 128 936 128 906.496V226.816c0-29.568 25.088-53.568 55.936-53.568h124.096v-40.96c0-37.76 29.824-68.288 66.624-68.288h271.36C784.192 64 896 178.56 896 320v477.44c0 37.76-29.824 68.288-66.624 68.288h-86.528z m0-51.2h86.528c9.152 0 16.64-7.616 16.64-17.024V319.936c0-113.088-89.536-204.8-199.936-204.8h-271.36c-9.28 0-16.704 7.68-16.704 17.088v41.024h192.768c128 127.744 192.064 192.768 192.064 195.008v446.272z m-52.608 95.104V388.864h-197.12V223.68H180.672v685.952h509.568zM533.44 347.52h126.912L533.504 223.488V347.52z"  ></path></symbol><symbol id="aui-icon-plus" viewBox="0 0 1024 1024"><path d="M904 456h-336v-336C568 86.4 545.6 64 512 64s-56 22.4-56 56v336h-336C86.4 456 64 478.4 64 512s22.4 56 56 56h336v336c0 33.6 22.4 56 56 56s56-22.4 56-56v-336h336c33.6 0 56-22.4 56-56s-22.4-56-56-56z"  ></path></symbol><symbol id="aui-icon-back_top" viewBox="0 0 1024 1024"><path d="M545.07353 181.552571a42.2855 42.2855 0 0 0-34.480914-12.346599l-0.511776 0.063972a37.551571 37.551571 0 0 0-1.471357 0.191916c-0.383832 0-0.703692 0.127944-1.023552 0.191916l-1.023552 0.127944a42.413444 42.413444 0 0 0-1.27944 0.319861l-0.63972 0.127944a37.103767 37.103767 0 0 0-1.471357 0.447804l-0.511776 0.127944a39.150871 39.150871 0 0 0-1.535328 0.511776l-0.447804 0.127944a43.820828 43.820828 0 0 0-1.535328 0.63972l-0.383833 0.063972a36.400075 36.400075 0 0 0-1.5993 0.703692l-0.255888 0.127944a44.460549 44.460549 0 0 0-1.663272 0.831636l-0.191916 0.127944a44.652465 44.652465 0 0 0-10.939214 8.316362L117.804461 551.502718a43.24508 43.24508 0 0 0 0 60.773411c16.632723 16.760667 43.692884 16.760667 60.325607 0l294.271256-296.510277v665.180984a42.861248 42.861248 0 0 0 42.541389 43.053164h-0.191916a42.733304 42.733304 0 0 0 42.477416-43.053164v-665.308928l294.463172 296.446305c16.632723 16.760667 43.692884 16.632723 60.325608-0.255888a42.989192 42.989192 0 0 0 0.063972-60.517523l-367.007435-369.758231zM991.790092 43.181108a42.60536 42.60536 0 0 0-42.477416-42.733304H74.687324C51.209596 0.447804 32.209908 19.575436 32.209908 43.181108c0 23.669645 18.999688 42.861248 42.477416 42.861248h874.625352c23.477728 0 42.477416-19.191604 42.477416-42.861248z"  ></path></symbol><symbol id="aui-icon-moon" viewBox="0 0 1024 1024"><path d="M831.68 749.568c-21.952 3.456-44.224 5.248-66.944 5.248a414.592 414.592 0 0 1-204.992-52.48 396.16 396.16 0 0 1-148.992-142.848 372.224 372.224 0 0 1-54.784-196.48c0-74.56 21.12-144 63.296-208.064a381.44 381.44 0 0 0-199.872 133.504 352.256 352.256 0 0 0-77.504 223.872c0 50.496 10.304 98.752 30.976 144.832 20.672 46.08 48.384 85.696 83.072 118.912 34.624 33.28 76.032 59.776 124.096 79.616 48 19.84 98.432 29.696 151.104 29.696 58.432 0 113.92-11.968 166.4-35.84a386.24 386.24 0 0 0 134.144-99.968z m123.456-49.536c-38.144 78.848-95.616 141.888-172.48 189.12A471.424 471.424 0 0 1 531.2 960a471.552 471.552 0 0 1-181.248-35.584 473.088 473.088 0 0 1-149.056-95.552 451.008 451.008 0 0 1-99.712-142.848A420.032 420.032 0 0 1 64 512.32c0-59.52 11.648-116.352 35.008-170.56a442.112 442.112 0 0 1 94.848-140.8 465.856 465.856 0 0 1 143.232-95.872 481.472 481.472 0 0 1 176.448-39.936c17.856-0.768 30.208 6.784 37.12 22.72 7.296 16 4.224 29.952-9.152 41.984a310.912 310.912 0 0 0-80 105.792 301.952 301.952 0 0 0-27.648 127.36c0 57.6 14.784 110.592 44.416 159.168 29.568 48.64 69.76 87.04 120.384 115.456a334.272 334.272 0 0 0 166.08 42.56c47.872 0 94.08-9.92 138.688-29.76 16.64-6.976 31.232-4.48 43.776 7.616a35.648 35.648 0 0 1 10.688 19.84 36.032 36.032 0 0 1-2.752 22.144z"  ></path></symbol><symbol id="aui-icon-navigation_collapse" viewBox="0 0 1024 1024"><path d="M512 832L256 512l256-320h64v640H512z m192-640h64v640h-64V192z"  ></path></symbol><symbol id="aui-icon-close_circle" viewBox="0 0 1024 1024"><path d="M512 0C229.12 0 0 229.12 0 512s229.12 512 512 512 512-229.12 512-512-229.12-512-512-512z m0 924.928A412.8 412.8 0 0 1 99.072 512 412.8 412.8 0 0 1 512 99.072 412.8 412.8 0 0 1 924.928 512 412.8 412.8 0 0 1 512 924.928z m210.176-541.312L593.728 512l128.448 128.384a24.768 24.768 0 0 1 0 35.136l-46.72 46.656a24.768 24.768 0 0 1-35.072 0L512 593.728l-128.384 128.448a24.768 24.768 0 0 1-35.136 0l-46.656-46.72a24.768 24.768 0 0 1 0-35.072L430.272 512 301.824 383.616a24.768 24.768 0 0 1 0-35.136l46.72-46.656a24.768 24.768 0 0 1 35.072 0L512 430.272l128.384-128.448a24.768 24.768 0 0 1 35.136 0l46.656 46.72a24.768 24.768 0 0 1 0 35.072z"  ></path></symbol><symbol id="aui-icon-sun" viewBox="0 0 1024 1024"><path d="M787.392 623.808c16-35.712 24.064-73.024 24.064-112 0-39.04-7.936-76.352-23.808-111.872a288.96 288.96 0 0 0-64.32-92.032A303.68 303.68 0 0 0 627.2 246.336a305.792 305.792 0 0 0-116.8-22.72c-40.768 0-79.744 7.552-116.864 22.72-37.12 15.168-69.12 35.712-96.192 61.568a288.96 288.96 0 0 0-64.256 92.032 271.296 271.296 0 0 0-23.808 111.808c0 39.04 7.936 76.288 23.808 111.808a288.96 288.96 0 0 0 64.256 92.032c27.008 25.856 59.072 46.4 96.192 61.568 37.12 15.168 76.096 22.784 116.864 22.784s79.68-7.616 116.8-22.784a303.68 303.68 0 0 0 96.192-61.568 286.272 286.272 0 0 0 64-91.776z m168.32 26.496c-1.408 5.056-4.864 8.32-10.432 10.048l-152.704 48v153.088a15.424 15.424 0 0 1-6.784 12.992c-5.184 3.328-10.24 4.032-15.168 2.048l-152.64-47.04-94.08 124.032a16.64 16.64 0 0 1-13.568 6.528 16.64 16.64 0 0 1-13.632-6.528l-94.08-124.032-152.64 47.04c-4.864 1.92-9.92 1.28-15.168-2.048a15.424 15.424 0 0 1-6.784-12.992v-153.088l-152.64-48c-5.568-1.664-9.088-4.992-10.432-10.048-1.792-5.632-1.088-10.496 2.048-14.464l94.08-124.096-94.08-124.032a15.36 15.36 0 0 1-2.048-14.528c1.344-4.992 4.864-8.32 10.432-10.048l152.64-48V162.048c0-5.312 2.24-9.664 6.784-12.992 5.248-3.328 10.24-4.032 15.168-1.984l152.64 46.976 94.08-124.032A16.256 16.256 0 0 1 510.336 64c5.888 0 10.432 1.984 13.568 6.016l94.08 124.032 152.64-46.976c4.928-2.048 9.984-1.344 15.168 1.92 4.544 3.392 6.784 7.68 6.784 13.056v153.088l152.704 48c5.568 1.728 9.024 5.056 10.432 10.048a15.36 15.36 0 0 1-2.112 14.528l-94.08 124.032 94.08 124.096c3.2 3.968 3.84 8.832 2.112 14.464z"  ></path></symbol><symbol id="aui-icon-search_s" viewBox="0 0 1024 1024"><path d="M613.248 613.76c47.36-47.36 71.04-104.32 71.04-170.688 0-66.432-23.552-123.2-70.784-170.432-47.232-47.168-104-70.784-170.432-70.784-66.432 0-123.2 23.616-170.432 70.784-47.168 47.232-70.784 104-70.784 170.432 0 66.432 23.616 123.2 70.784 170.432 47.232 47.232 104 70.784 170.432 70.784A231.872 231.872 0 0 0 613.248 613.76zM960 891.072c0 18.688-6.848 34.816-20.48 48.448-13.632 13.632-29.76 20.48-48.448 20.48a64 64 0 0 1-48.448-20.48l-184.704-184.128a368.704 368.704 0 0 1-214.848 66.752 372.48 372.48 0 0 1-147.264-29.888 379.008 379.008 0 0 1-121.152-80.768 379.008 379.008 0 0 1-80.768-121.152A372.48 372.48 0 0 1 64 443.136c0-51.392 9.984-100.48 29.888-147.328a379.008 379.008 0 0 1 80.768-121.152c33.92-33.92 74.304-60.8 121.152-80.768A372.48 372.48 0 0 1 443.072 64c51.328 0 100.48 9.984 147.264 29.888a379.008 379.008 0 0 1 121.152 80.768c33.92 33.92 60.8 74.304 80.768 121.152a372.48 372.48 0 0 1 29.888 147.264 368.704 368.704 0 0 1-66.752 214.848l184.704 184.704c13.248 13.248 19.904 29.44 19.904 48.448z"  ></path></symbol><symbol id="aui-icon-history_s" viewBox="0 0 1024 1024"><path d="M924.416 338.176A435.84 435.84 0 0 1 960 512a435.84 435.84 0 0 1-35.584 173.824 451.968 451.968 0 0 1-95.68 142.912 451.968 451.968 0 0 1-142.912 95.68A435.84 435.84 0 0 1 512 960a444.8 444.8 0 0 1-190.72-42.24 437.952 437.952 0 0 1-154.048-119.36 20.8 20.8 0 0 1-3.776-13.12 17.28 17.28 0 0 1 4.992-11.968l79.872-80.448a20.992 20.992 0 0 1 14.592-5.312c6.208 0.832 10.688 3.2 13.44 7.04a292.8 292.8 0 0 0 104.384 85.76A294.144 294.144 0 0 0 512 810.688c40.448 0 79.04-7.872 115.84-23.68a300.928 300.928 0 0 0 95.36-63.872c26.816-26.816 48.064-58.624 63.872-95.36 15.744-36.736 23.616-75.328 23.616-115.776 0-40.448-7.872-79.04-23.68-115.84A300.928 300.928 0 0 0 723.2 300.8a300.928 300.928 0 0 0-95.36-63.872A290.944 290.944 0 0 0 512 213.312c-38.08 0-74.688 6.912-109.696 20.736a289.792 289.792 0 0 0-93.312 59.2L388.928 373.76c12.032 11.648 14.72 25.088 8.128 40.256-6.592 15.552-18.048 23.296-34.368 23.296H101.312a35.84 35.84 0 0 1-26.24-11.072A35.84 35.84 0 0 1 64 400V138.688c0-16.384 7.808-27.84 23.36-34.432 15.168-6.592 28.544-3.84 40.192 8.192l75.84 75.2a452.8 452.8 0 0 1 142.656-91.264A439.424 439.424 0 0 1 512 64a435.84 435.84 0 0 1 173.824 35.584c55.232 23.68 102.848 55.616 142.912 95.68a451.968 451.968 0 0 1 95.68 142.912z m-337.728 5.824v261.312a18.176 18.176 0 0 1-5.248 13.44 18.176 18.176 0 0 1-13.44 5.248H381.312a18.176 18.176 0 0 1-13.44-5.248 18.176 18.176 0 0 1-5.184-13.44v-37.312c0-5.44 1.728-9.92 5.248-13.44a18.176 18.176 0 0 1 13.44-5.248H512V344c0-5.44 1.728-9.92 5.248-13.44a18.176 18.176 0 0 1 13.44-5.248h37.312c5.44 0 9.92 1.792 13.44 5.248a18.176 18.176 0 0 1 5.248 13.44z"  ></path></symbol><symbol id="aui-icon-more_gray" viewBox="0 0 1024 1024"><path d="M832 704a64 64 0 0 1 0 128H384a64 64 0 0 1 0-128h448z m-128-256a64 64 0 0 1 0 128H384a64 64 0 1 1 0-128h320z m128-256a64 64 0 0 1 0 128H384a64 64 0 1 1 0-128h448z" fill="#96989B" p-id="33244"></path><path d="M192 704a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m0-256a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m0-256a64 64 0 1 1 0 128 64 64 0 0 1 0-128z" fill="#C8CACD" p-id="33245"></path></symbol><symbol id="aui-icon-more_active" viewBox="0 0 1024 1024"><path d="M832 704a64 64 0 0 1 0 128H384a64 64 0 0 1 0-128h448z m-128-256a64 64 0 0 1 0 128H384a64 64 0 1 1 0-128h320z m128-256a64 64 0 0 1 0 128H384a64 64 0 1 1 0-128h448z" fill="#007AF5" p-id="784"></path><path d="M192 704a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m0-256a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m0-256a64 64 0 1 1 0 128 64 64 0 0 1 0-128z" fill="#99C9FB" p-id="785"></path></symbol></svg>';
+    /**
+     * Cell definition for the aui-table.
+     * Captures the template of a column's data row cell as well as cell-specific properties.
+     */
+    var TableCellDefDirective = /** @class */ (function (_super) {
+        __extends(TableCellDefDirective, _super);
+        function TableCellDefDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TableCellDefDirective;
+    }(table.CdkCellDef));
+    TableCellDefDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableCellDef]',
+                    providers: [
+                        {
+                            provide: table.CdkCellDef,
+                            useExisting: TableCellDefDirective,
+                        },
+                    ],
+                },] }
+    ];
 
-    function getAuiIconNoHttpProviderError() {
-        return new Error('Could not find HttpClient provider for use with Alauda UI icons. Please include the HttpClientModule from @angular/common/http in your app imports.');
-    }
-    function getAuiIconFailedToLoadCustomIconFile(url) {
-        return new Error("AuiIcon failed to load custom icon file: " + url + ".");
-    }
+    var TableCellComponent = /** @class */ (function (_super) {
+        __extends(TableCellComponent, _super);
+        function TableCellComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.expandChange = new i0.EventEmitter();
+            return _this;
+        }
+        Object.defineProperty(TableCellComponent.prototype, "expanded", {
+            get: function () {
+                return this.expand ? 'expanded' : null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TableCellComponent;
+    }(table.CdkCell));
+    TableCellComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-table-cell[expand]',
+                    template: "\n    <ng-container *ngIf=\"!template\">\n      <button\n        (click)=\"expandChange.next()\"\n        class=\"aui-table__cell-expand-button\"\n        [class.expanded]=\"expand\"\n        [class.collapsed]=\"!expand\"\n        aui-button=\"primary\"\n        size=\"mini\"\n        [square]=\"true\"\n        [round]=\"true\"\n      >\n        <aui-icon [icon]=\"expand ? 'angle_down' : 'angle_right'\"></aui-icon>\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"expand && template\">\n      <div class=\"aui-table__cell-expand-detail\" [@expand]=\"expanded\">\n        <ng-content></ng-content>\n      </div>\n    </ng-container>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    exportAs: 'auiTableCell',
+                    preserveWhitespaces: false,
+                    animations: [
+                        animations.trigger('expand', [
+                            animations.state('*', animations.style({ height: 0 })),
+                            animations.state('expanded', animations.style({ height: '*' })),
+                            animations.transition('* => expanded', [animations.animate(250)]),
+                            animations.transition('expanded => *', [animations.animate(250)]),
+                        ]),
+                    ]
+                },] }
+    ];
+    TableCellComponent.propDecorators = {
+        expand: [{ type: i0.Input }],
+        template: [{ type: i0.Input }],
+        expandChange: [{ type: i0.Output }]
+    };
 
-    var IconRegisterService = /** @class */ (function () {
-        function IconRegisterService(document, httpClient) {
-            this.httpClient = httpClient;
-            this.defaultIconPrefix = 'aui-icon';
-            this.doc = document;
-            this.registerSvgSymbolsByString(auiIcons);
+    var bem = buildBem('aui-table');
+    /** Cell template container that adds the right classes and role. */
+    var TableCellDirective = /** @class */ (function (_super) {
+        __extends(TableCellDirective, _super);
+        function TableCellDirective(columnDef, elementRef) {
+            var _this = _super.call(this, columnDef, elementRef) || this;
+            elementRef.nativeElement.classList.add(bem.element("column-" + columnDef.cssClassFriendlyName));
+            return _this;
         }
-        IconRegisterService.prototype.getDefaultIconPrefix = function () {
-            return this.defaultIconPrefix;
-        };
-        IconRegisterService.prototype.replaceDefaultIconPrefix = function (prefix) {
-            this.defaultIconPrefix = prefix;
-        };
-        IconRegisterService.prototype.registerSvgSymbolsByUrl = function (url) {
-            var _this = this;
-            if (!this.httpClient) {
-                throw getAuiIconNoHttpProviderError();
-            }
-            this.httpClient
-                .get(url, {
-                responseType: 'text',
-            })
-                .subscribe(function (res) {
-                _this.registerSvgSymbolsByString(res);
-            }, function () {
-                throw getAuiIconFailedToLoadCustomIconFile(url);
-            });
-        };
-        IconRegisterService.prototype.registerSvgSymbolsByString = function (str) {
-            this.appendSvg(str);
-        };
-        IconRegisterService.prototype.appendSvg = function (svgString) {
-            var setEl = this.doc.createElement('div');
-            setEl.className = 'aui-icon-set';
-            setEl.style.display = 'none';
-            setEl.innerHTML = svgString;
-            this.doc.body.append(setEl);
-        };
-        return IconRegisterService;
-    }());
-    IconRegisterService.decorators = [
-        { type: i0.Injectable }
+        return TableCellDirective;
+    }(table.CdkCell));
+    TableCellDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: 'aui-table-cell',
+                    host: {
+                        class: 'aui-table__cell',
+                        role: 'gridcell',
+                    },
+                },] }
+    ];
+    TableCellDirective.ctorParameters = function () { return [
+        { type: table.CdkColumnDef },
+        { type: i0.ElementRef }
+    ]; };
+
+    /**
+     * Column definition for the aui-table.
+     * Defines a set of cells available for a table column.
+     */
+    var TableColumnDefDirective = /** @class */ (function (_super) {
+        __extends(TableColumnDefDirective, _super);
+        function TableColumnDefDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(TableColumnDefDirective.prototype, "auiTableColumnDef", {
+            // Unique name for this column
+            // Why it does not work in `inputs` property?
+            set: function (value) {
+                this.name = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TableColumnDefDirective;
+    }(table.CdkColumnDef));
+    TableColumnDefDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableColumnDef]',
+                    providers: [
+                        {
+                            provide: table.CdkColumnDef,
+                            useExisting: TableColumnDefDirective,
+                        },
+                    ],
+                    inputs: ['sticky'],
+                },] }
+    ];
+    TableColumnDefDirective.propDecorators = {
+        auiTableColumnDef: [{ type: i0.Input }]
+    };
+
+    /**
+     * Header cell definition for the aui-table.
+     * Captures the template of a column's header cell and as well as cell-specific properties.
+     */
+    var TableHeaderCellDefDirective = /** @class */ (function (_super) {
+        __extends(TableHeaderCellDefDirective, _super);
+        function TableHeaderCellDefDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TableHeaderCellDefDirective;
+    }(table.CdkHeaderCellDef));
+    TableHeaderCellDefDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableHeaderCellDef]',
+                    providers: [
+                        {
+                            provide: table.CdkHeaderCellDef,
+                            useExisting: TableHeaderCellDefDirective,
+                        },
+                    ],
+                },] }
+    ];
+
+    var bem$1 = buildBem('aui-table');
+    /** Header cell template container that adds the right classes and role. */
+    var TableHeaderCellDirective = /** @class */ (function (_super) {
+        __extends(TableHeaderCellDirective, _super);
+        function TableHeaderCellDirective(columnDef, elementRef) {
+            var _this = _super.call(this, columnDef, elementRef) || this;
+            elementRef.nativeElement.classList.add(bem$1.element("column-" + columnDef.cssClassFriendlyName));
+            return _this;
+        }
+        return TableHeaderCellDirective;
+    }(table.CdkHeaderCell));
+    TableHeaderCellDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: 'aui-table-header-cell',
+                    host: {
+                        class: 'aui-table__header-cell',
+                        role: 'columnheader',
+                    },
+                },] }
     ];
-    IconRegisterService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [common.DOCUMENT,] }] },
-        { type: http.HttpClient, decorators: [{ type: i0.Optional }] }
+    TableHeaderCellDirective.ctorParameters = function () { return [
+        { type: table.CdkColumnDef },
+        { type: i0.ElementRef }
     ]; };
-    function ICON_REGISTER_PROVIDER_FACTORY(parentRegister, document, httpClient) {
-        return parentRegister || new IconRegisterService(document, httpClient);
-    }
-    var ICON_REGISTER_SERVICE_PROVIDER = {
-        provide: IconRegisterService,
-        deps: [
-            [new i0.Optional(), new i0.SkipSelf(), IconRegisterService],
-            [new i0.Optional(), common.DOCUMENT],
-            [new i0.Optional(), http.HttpClient],
-        ],
-        useFactory: ICON_REGISTER_PROVIDER_FACTORY,
+
+    /**
+     * Header row definition for the aui-table.
+     * Captures the header row's template and other header properties such as the columns to display.
+     */
+    var TableHeaderRowDefDirective = /** @class */ (function (_super) {
+        __extends(TableHeaderRowDefDirective, _super);
+        function TableHeaderRowDefDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TableHeaderRowDefDirective;
+    }(table.CdkHeaderRowDef));
+    TableHeaderRowDefDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableHeaderRowDef]',
+                    providers: [
+                        {
+                            provide: table.CdkHeaderRowDef,
+                            useExisting: TableHeaderRowDefDirective,
+                        },
+                    ],
+                },] }
+    ];
+    TableHeaderRowDefDirective.propDecorators = {
+        columns: [{ type: i0.Input, args: ['auiTableHeaderRowDef',] }],
+        sticky: [{ type: i0.Input, args: ['auiTableHeaderRowDefSticky',] }]
     };
 
-    var id = 0;
-    var IconComponent = /** @class */ (function () {
-        function IconComponent(iconRegistryService) {
-            this.iconRegistryService = iconRegistryService;
-            this.icon = 'none';
-            this.link = '';
-            this.bem = buildBem('aui-icon');
-            this.id = id++;
+    /** Header template container that contains the cell outlet. Adds the right class and role. */
+    var TableHeaderRowComponent = /** @class */ (function (_super) {
+        __extends(TableHeaderRowComponent, _super);
+        function TableHeaderRowComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        IconComponent.prototype.parseIcon = function () {
-            var defaultPrefix = this.iconRegistryService.getDefaultIconPrefix();
-            var arr = (this.icon || '').split(':');
-            return arr.length < 2 ? [defaultPrefix, arr[0]] : [arr[0], arr[1]];
-        };
-        IconComponent.prototype.getWidth = function () {
-            if (!this.size) {
-                return false;
-            }
-            return handlePixel((this.size || '').split(',')[0]);
-        };
-        IconComponent.prototype.getHeight = function () {
-            if (!this.size) {
-                return false;
-            }
-            var arr = (this.size || '').split(',');
-            return handlePixel(arr[1] || arr[0]);
-        };
-        IconComponent.prototype.getIconId = function () {
-            var _a = __read(this.parseIcon(), 2), prefix = _a[0], name = _a[1];
-            return prefix + "-" + name;
-        };
-        IconComponent.prototype.getClass = function () {
-            return this.bem.block(this.margin) + " " + this.getIconId();
-        };
-        return IconComponent;
-    }());
-    IconComponent.decorators = [
+        return TableHeaderRowComponent;
+    }(table.CdkHeaderRow));
+    TableHeaderRowComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aui-icon',
-                    template: "<svg\n  *ngIf=\"icon === 'spinner'; else icons\"\n  [attr.class]=\"getClass()\"\n  [style.fill]=\"color\"\n  [style.width]=\"getWidth()\"\n  [style.height]=\"getHeight()\"\n  viewBox=\"0 0 200 200\"\n>\n  <defs>\n    <linearGradient\n      [attr.id]=\"'right-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"150\"\n      y1=\"20\"\n      x2=\"150\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #000\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <linearGradient\n      [attr.id]=\"'left-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"50\"\n      y1=\"0\"\n      x2=\"50\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #fff\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <mask [attr.id]=\"'mask-' + id\">\n      <g>\n        <path\n          [attr.fill]=\"'url(#right-' + id + ')'\"\n          d=\"M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z\"\n        />\n        <path\n          [attr.fill]=\"'url(#left-' + id + ')'\"\n          d=\"M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z\"\n        />\n      </g>\n    </mask>\n  </defs>\n  <rect\n    x=\"0\"\n    y=\"0\"\n    width=\"200\"\n    height=\"200\"\n    [attr.mask]=\"'url(#mask-' + id + ')'\"\n  />\n</svg>\n\n<ng-template #icons>\n  <svg\n    [attr.class]=\"getClass()\"\n    [style.fill]=\"color\"\n    [style.width]=\"getWidth()\"\n    [style.height]=\"getHeight()\"\n  >\n    <use [attr.xlink:href]=\"link + '#' + getIconId()\"></use>\n  </svg>\n</ng-template>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
+                    selector: 'aui-table-header-row',
+                    template: table.CDK_ROW_TEMPLATE,
+                    host: {
+                        class: 'aui-table__header-row',
+                        role: 'row',
+                    },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                    styles: ["aui-icon{vertical-align:bottom}.aui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor}.aui-icon--left{margin-left:var(--aui-spacing-s)}.aui-icon--right{margin-right:var(--aui-spacing-s)}.aui-icon-spinner{-webkit-animation:rotating .5s linear infinite;animation:rotating .5s linear infinite}aui-icon+aui-icon>.aui-icon{margin-left:var(--aui-spacing-s)}@-webkit-keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
+                    encapsulation: i0.ViewEncapsulation.None,
+                    exportAs: 'auiTableHeaderRow',
+                    preserveWhitespaces: false
                 },] }
     ];
-    IconComponent.ctorParameters = function () { return [
-        { type: IconRegisterService }
-    ]; };
-    IconComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        link: [{ type: i0.Input }],
-        margin: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
-        color: [{ type: i0.Input }]
-    };
 
-    var IconModule = /** @class */ (function () {
-        function IconModule() {
+    /**
+     * Data row definition for the aui-table.
+     * Captures the header row's template and other row properties such as the columns to display and
+     * a when predicate that describes when this row should be used.
+     */
+    var TableRowDefDirective = /** @class */ (function (_super) {
+        __extends(TableRowDefDirective, _super);
+        function TableRowDefDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        return IconModule;
-    }());
-    IconModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    declarations: [IconComponent],
-                    exports: [IconComponent],
-                    providers: [ICON_REGISTER_SERVICE_PROVIDER],
+        return TableRowDefDirective;
+    }(table.CdkRowDef));
+    TableRowDefDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableRowDef]',
+                    providers: [
+                        {
+                            provide: table.CdkRowDef,
+                            useExisting: TableRowDefDirective,
+                        },
+                    ],
                 },] }
     ];
+    TableRowDefDirective.propDecorators = {
+        columns: [{ type: i0.Input, args: ['auiTableRowDefColumns',] }],
+        when: [{ type: i0.Input, args: ['auiTableRowDefWhen',] }]
+    };
 
-    var ButtonGroupComponent = /** @class */ (function () {
-        function ButtonGroupComponent() {
+    /** Data row template container that contains the cell outlet. Adds the right class and role. */
+    var TableRowComponent = /** @class */ (function (_super) {
+        __extends(TableRowComponent, _super);
+        function TableRowComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.disabled = false;
+            return _this;
         }
-        return ButtonGroupComponent;
-    }());
-    ButtonGroupComponent.decorators = [
+        return TableRowComponent;
+    }(table.CdkRow));
+    TableRowComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aui-button-group',
-                    template: "<div class=\"aui-button-group\"><ng-content></ng-content></div>\n",
+                    selector: 'aui-table-row',
+                    template: table.CDK_ROW_TEMPLATE,
+                    host: {
+                        class: 'aui-table__row',
+                        role: 'row',
+                    },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    preserveWhitespaces: false,
-                    styles: [".aui-button-group{display:inline-block}.aui-button-group .aui-button{border-radius:0;z-index:1}.aui-button-group .aui-button:first-child{border-top-left-radius:var(--aui-border-radius-m);border-bottom-left-radius:var(--aui-border-radius-m)}.aui-button-group .aui-button:last-child{border-top-right-radius:var(--aui-border-radius-m);border-bottom-right-radius:var(--aui-border-radius-m)}.aui-button-group .aui-button.cdk-keyboard-focused,.aui-button-group .aui-button.isActive,.aui-button-group .aui-button:active,.aui-button-group .aui-button:hover{z-index:2}.aui-button-group .aui-button[disabled]{z-index:0}.aui-button-group .aui-button.isPlain:not(:last-child){margin-right:-1px}.aui-button-group .aui-button:not(:last-child){margin-right:1px}aui-button-group:not(:last-child){margin:0 var(--aui-spacing-m) 0 0}"]
+                    exportAs: 'auiTableRow',
+                    preserveWhitespaces: false
                 },] }
     ];
-
-    var ButtonType = {
-        Default: 'default',
-        Primary: 'primary',
-        Success: 'success',
-        Warning: 'warning',
-        Danger: 'danger',
-        Text: 'text',
-        Inline: 'inline',
-        /**
-         * represents default internally, @link https://github.com/angular/vscode-ng-language-service/issues/1147
-         */
-        Empty: '',
-        /**
-         * @deprecated use `ButtonType.Danger` instead
-         */
-        Error: 'danger',
-        /**
-         * @deprecated use `ButtonType.Default` instead
-         */
-        Info: 'default',
+    TableRowComponent.propDecorators = {
+        disabled: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.isDisabled',] }]
     };
 
-    var prefix = 'aui-button--';
-    var ButtonComponent = /** @class */ (function () {
-        function ButtonComponent(el, renderer, focusMonitor) {
-            this.el = el;
-            this.renderer = renderer;
-            this.focusMonitor = focusMonitor;
-            this._type = ButtonType.Default;
-            this._size = ComponentSize.Medium;
-            this._plain = false;
-            this._loading = false;
-            this._round = false;
-            this._square = false;
-            this.renderer.addClass(this.el.nativeElement, 'aui-button');
-            this.renderer.addClass(this.el.nativeElement, prefix + this.type);
-            this.renderer.addClass(this.el.nativeElement, prefix + this.size);
-            this.focusMonitor.monitor(this.el.nativeElement, false);
-        }
-        Object.defineProperty(ButtonComponent.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (val) {
-                if (!val || val === this._type) {
-                    return;
-                }
-                this.renderer.removeClass(this.el.nativeElement, prefix + this._type);
-                this.renderer.addClass(this.el.nativeElement, prefix + val);
-                this._type = val;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ButtonComponent.prototype, "size", {
-            get: function () {
-                return this._size;
-            },
-            set: function (val) {
-                // when change from other size to default
-                if (!val) {
-                    val = ComponentSize.Medium;
-                }
-                if (this._size === val) {
-                    return;
-                }
-                this.renderer.removeClass(this.el.nativeElement, prefix + this._size);
-                this.renderer.addClass(this.el.nativeElement, prefix + val);
-                this._size = val;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ButtonComponent.prototype, "plain", {
-            get: function () {
-                return this._plain;
-            },
-            set: function (val) {
-                if (this._plain === val) {
-                    return;
-                }
-                this.switchAssertClass('isPlain', val);
-                this._plain = val;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ButtonComponent.prototype, "loading", {
+    var CLASS_PREFIX = 'aui-table';
+    var WRAPPER_CLASS = CLASS_PREFIX + "__scroll-wrapper";
+    var HAS_SCROLL_CLASS = WRAPPER_CLASS + "--has-scroll";
+    var SCROLLING_CLASS = WRAPPER_CLASS + "--scrolling";
+    var SCROLL_BEFORE_END_CLASS = WRAPPER_CLASS + "--before-end";
+    var TableScrollWrapperDirective = /** @class */ (function () {
+        function TableScrollWrapperDirective(el) {
+            this.el = el;
+            this.destroy$$ = new rxjs.Subject();
+        }
+        Object.defineProperty(TableScrollWrapperDirective.prototype, "containerEl", {
             get: function () {
-                return this._loading;
-            },
-            set: function (val) {
-                if (this._loading === val) {
-                    return;
-                }
-                this.switchAssertClass('isLoading', val);
-                this._loading = val;
+                return this.el.nativeElement;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ButtonComponent.prototype, "round", {
+        TableScrollWrapperDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            requestAnimationFrame(function () {
+                _this.viewMutation();
+            });
+        };
+        TableScrollWrapperDirective.prototype.viewMutation = function () {
+            var _this = this;
+            rxjs.merge(observeResizeOn(this.containerEl), rxjs.fromEvent(this.containerEl, 'scroll'))
+                .pipe(operators.startWith(null), operators.takeUntil(this.destroy$$))
+                .subscribe(function () {
+                var scrollDis = _this.containerEl.scrollWidth - _this.containerEl.offsetWidth;
+                _this.placeClassList(_this.containerEl.classList, scrollDis > 0, HAS_SCROLL_CLASS);
+                var scrollLeft = _this.containerEl.scrollLeft;
+                _this.placeClassList(_this.containerEl.classList, scrollLeft > 0, SCROLLING_CLASS);
+                _this.placeClassList(_this.containerEl.classList, scrollLeft !== scrollDis, SCROLL_BEFORE_END_CLASS);
+            });
+        };
+        TableScrollWrapperDirective.prototype.placeClassList = function (classList, condition, className) {
+            classList[condition ? 'add' : 'remove'](className);
+        };
+        TableScrollWrapperDirective.prototype.ngOnDestroy = function () {
+            this.destroy$$.next();
+        };
+        return TableScrollWrapperDirective;
+    }());
+    TableScrollWrapperDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTableScrollWrapper]',
+                    host: {
+                        class: "" + SCROLL_BEFORE_END_CLASS,
+                    },
+                },] }
+    ];
+    TableScrollWrapperDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    TableScrollWrapperDirective.propDecorators = {
+        auiTableScrollWrapper: [{ type: i0.HostBinding, args: ["class." + WRAPPER_CLASS,] }, { type: i0.Input, args: ['auiTableScrollWrapper',] }]
+    };
+
+    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 this._round;
+                return 'aui-table-sticky';
             },
-            set: function (val) {
-                if (this._round === val) {
-                    return;
-                }
-                this.switchAssertClass('isRound', val);
-                this._round = val;
+            set: function (_stickyCssClass) {
+                //
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ButtonComponent.prototype, "square", {
+        return TableComponent;
+    }(table.CdkTable));
+    TableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-table',
+                    exportAs: 'auiTable',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    template: "<div\n    class=\"aui-table__content\"\n    [auiTableScrollWrapper]=\"enableScrollWrapper\"\n  >\n    " + table.CDK_TABLE_TEMPLATE + "\n  </div>",
+                    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;color:rgb(var(--aui-color-n-1));font-size:var(--aui-font-size-m);background-color:rgb(var(--aui-color-n-9));padding:0 var(--aui-table-margin) var(--aui-table-margin);border-radius:var(--aui-border-radius-m)}.aui-table__header-row.aui-table-sticky{flex-wrap:wrap;margin:0 calc(var(--aui-table-margin) * -1);padding:0}.aui-table__header-row.aui-table-sticky .aui-table__header-cell{z-index:1}.aui-table__header-row.aui-table-sticky .aui-table__header-cell:first-of-type{padding-left:calc(var(--aui-table-margin) + var(--aui-table-cell-padding-lr))}.aui-table__header-row.aui-table-sticky .aui-table__header-cell:last-of-type{padding-right:calc(var(--aui-table-margin) + var(--aui-table-cell-padding-lr))}.aui-table__header-row.aui-table-sticky:after{box-shadow:0 4px 16px -4px rgba(var(--aui-color-n-1),.16);position:-webkit-sticky;position:sticky;width:100%;height:30px;top:calc(var(--aui-table-header-height) - 30px);margin-top:calc(var(--aui-table-header-height) * -1);content:\"\"}.aui-table__scroll-wrapper{overflow:auto}.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-bottom:0}.aui-table__scroll-wrapper .aui-table__row{border:none;padding:0;align-items:stretch}.aui-table__scroll-wrapper .aui-table__row .aui-table__cell{border-left:0 solid #eee;border-bottom:var(--aui-table-border-width) solid #eee;border-right:0 solid #eee;border-top:var(--aui-table-border-width) solid #eee}.aui-table__scroll-wrapper .aui-table__row .aui-table__cell:first-of-type{border-left-width:var(--aui-table-border-width);padding-left:var(--aui-table-cell-padding-lr)}.aui-table__scroll-wrapper .aui-table__row .aui-table__cell:last-of-type{border-right-width:var(--aui-table-border-width);padding-right:var(--aui-table-cell-padding-lr)}.aui-table__scroll-wrapper .aui-table__row:first-of-type .aui-table__cell:first-of-type{border-top-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper .aui-table__row:first-of-type .aui-table__cell:last-of-type{border-top-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper .aui-table__row:last-of-type .aui-table__cell:first-of-type{border-bottom-left-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper .aui-table__row:last-of-type .aui-table__cell:last-of-type{border-bottom-right-radius:var(--aui-border-radius-l)}.aui-table__scroll-wrapper .aui-table__row:not(.aui-table__scroll-wrapper .aui-table__row:last-child) .aui-table__cell{border-bottom-width:0}.aui-table__scroll-wrapper .aui-table__header-row{padding:0;align-items:stretch}.aui-table__scroll-wrapper .aui-table__header-row .aui-table__header-cell:first-of-type{padding-left:var(--aui-table-cell-padding-lr)}.aui-table__scroll-wrapper .aui-table__header-row .aui-table__header-cell:last-of-type{padding-right:var(--aui-table-cell-padding-lr)}.aui-table__scroll-wrapper .aui-table__cell{padding:var(--aui-table-cell-padding-tb-m) calc(var(--aui-table-cell-padding-lr) / 2)}.aui-table__scroll-wrapper--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-wrapper--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-wrapper--has-scroll .aui-table-sticky-border-elem-left{padding-right:calc(var(--aui-table-cell-padding-lr) / 2 * 3)}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-left:after{right:calc((var(--aui-table-cell-padding-lr) / 2) * -1)}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-left:before{right:calc(var(--aui-table-cell-padding-lr) / 2)}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-right{padding-left:calc(var(--aui-table-cell-padding-lr) / 2 * 3)}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-right:after{left:calc((var(--aui-table-cell-padding-lr) / 2) * -1)}.aui-table__scroll-wrapper--has-scroll .aui-table-sticky-border-elem-right:before{left:calc(var(--aui-table-cell-padding-lr) / 2)}.aui-table__scroll-wrapper--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-wrapper--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-wrapper--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-wrapper--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%}.aui-table__header-row,.aui-table__row{display:flex;align-items:center}.aui-table__row{position:relative;border:var(--aui-table-border-width) solid #eee;border-bottom:0 solid #eee;background-color:rgb(var(--aui-color-n-10));padding:var(--aui-table-cell-padding-tb-m) calc(var(--aui-table-cell-padding-lr) / 2);min-height:calc(var(--aui-table-border-width) + var(--aui-table-row-min-height-m))}.aui-table__row:first-of-type{border-top-left-radius:var(--aui-border-radius-l);border-top-right-radius:var(--aui-border-radius-l)}.aui-table__row:last-of-type{border-bottom-width:var(--aui-table-border-width);min-height:calc(var(--aui-table-border-width) + var(--aui-table-row-min-height-m));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:#fff;opacity:.7;cursor:not-allowed}.aui-table__header-row{background-color:rgb(var(--aui-color-n-9));padding:0 calc(var(--aui-table-cell-padding-lr) / 2)}.aui-table__cell,.aui-table__header-cell{flex:1}.aui-table__cell{padding:0 calc(var(--aui-table-cell-padding-lr) / 2);background-color:rgb(var(--aui-color-n-10));overflow:hidden;word-wrap:break-word}.aui-table__header-cell{padding:var(--aui-table-header-cell-padding-tb) calc(var(--aui-table-cell-padding-lr) / 2);font-weight:500;height:var(--aui-table-header-height);line-height:var(--aui-line-height-m);background-color:rgb(var(--aui-color-n-9));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+                },] }
+    ];
+    TableComponent.propDecorators = {
+        enableScrollWrapper: [{ type: i0.Input }]
+    };
+
+    var TableModule = /** @class */ (function () {
+        function TableModule() {
+        }
+        return TableModule;
+    }());
+    TableModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, ButtonModule, IconModule, table.CdkTableModule],
+                    declarations: [
+                        TableComponent,
+                        TableRowComponent,
+                        TableHeaderRowComponent,
+                        TableCellComponent,
+                        TableCellDirective,
+                        TableHeaderCellDirective,
+                        TableRowDefDirective,
+                        TableHeaderRowDefDirective,
+                        TableCellDefDirective,
+                        TableHeaderCellDefDirective,
+                        TableColumnDefDirective,
+                        TableScrollWrapperDirective,
+                    ],
+                    exports: [
+                        TableComponent,
+                        TableRowComponent,
+                        TableHeaderRowComponent,
+                        TableCellComponent,
+                        TableCellDirective,
+                        TableHeaderCellDirective,
+                        TableRowDefDirective,
+                        TableHeaderRowDefDirective,
+                        TableCellDefDirective,
+                        TableHeaderCellDefDirective,
+                        TableColumnDefDirective,
+                        TableScrollWrapperDirective,
+                    ],
+                },] }
+    ];
+
+    /** @docs-private */
+    function getSortDuplicateSortableIdError(id) {
+        return new Error("Cannot have two MatSortables with the same id (" + id + ").");
+    }
+    /** @docs-private */
+    function getSortHeaderNotContainedWithinSortError() {
+        return new Error("MatSortHeader must be placed within a parent element with the MatSort directive.");
+    }
+    /** @docs-private */
+    function getSortHeaderMissingIdError() {
+        return new Error("MatSortHeader must be provided with a unique id.");
+    }
+    /** @docs-private */
+    function getSortInvalidDirectionError(direction) {
+        return new Error(direction + " is not a valid sort direction ('asc' or 'desc').");
+    }
+
+    // Original code from material2
+    var SortDirective = /** @class */ (function () {
+        function SortDirective() {
+            this.sortables = new Map();
+            this._stateChanges = new rxjs.Subject();
+            this.start = 'asc';
+            this._direction = '';
+            this.sortChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(SortDirective.prototype, "direction", {
             get: function () {
-                return this._square;
+                return this._direction;
             },
-            set: function (val) {
-                if (this._square === val) {
-                    return;
+            set: function (direction) {
+                if (i0.isDevMode() &&
+                    direction &&
+                    direction !== 'asc' &&
+                    direction !== 'desc') {
+                    throw getSortInvalidDirectionError(direction);
                 }
-                this.switchAssertClass('isSquare', val);
-                this._square = val;
+                this._direction = direction;
             },
             enumerable: false,
             configurable: true
         });
-        ButtonComponent.prototype.ngOnDestroy = function () {
-            this.focusMonitor.stopMonitoring(this.el.nativeElement);
+        SortDirective.prototype.register = function (sortable) {
+            if (!sortable.id) {
+                throw getSortHeaderMissingIdError();
+            }
+            if (this.sortables.has(sortable.id)) {
+                throw getSortDuplicateSortableIdError(sortable.id);
+            }
+            this.sortables.set(sortable.id, sortable);
+        };
+        SortDirective.prototype.deregister = function (sortable) {
+            this.sortables.delete(sortable.id);
+        };
+        SortDirective.prototype.sort = function (sortable) {
+            if (this.active !== sortable.id) {
+                this.active = sortable.id;
+                this.direction = sortable.start ? sortable.start : this.start;
+            }
+            else {
+                this.direction = this.direction === 'asc' ? 'desc' : 'asc';
+            }
+            this.sortChange.emit({
+                active: this.active,
+                direction: this.direction,
+            });
+        };
+        SortDirective.prototype.ngOnChanges = function () {
+            this._stateChanges.next();
+        };
+        SortDirective.prototype.ngOnDestroy = function () {
+            this._stateChanges.complete();
+        };
+        return SortDirective;
+    }());
+    SortDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiSort]',
+                    exportAs: 'auiSort',
+                },] }
+    ];
+    SortDirective.propDecorators = {
+        active: [{ type: i0.Input }],
+        start: [{ type: i0.Input }],
+        direction: [{ type: i0.Input }],
+        sortChange: [{ type: i0.Output }]
+    };
+
+    var SortHeaderComponent = /** @class */ (function () {
+        function SortHeaderComponent(cdr, _sort, _cdkColumnRef) {
+            var _this = this;
+            this._sort = _sort;
+            this._cdkColumnRef = _cdkColumnRef;
+            this.arrowDirection = '';
+            this.bem = buildBem('aui-sort-header');
+            if (!_sort) {
+                throw getSortHeaderNotContainedWithinSortError();
+            }
+            this._rerenderSubscription = rxjs.merge(_sort.sortChange, _sort._stateChanges).subscribe(function () {
+                if (_this._isSorted()) {
+                    _this._updateArrowDirection();
+                }
+                if (!_this._isSorted() && _this._viewState === 'active') {
+                    _this._viewState = '';
+                }
+                cdr.markForCheck();
+            });
+        }
+        SortHeaderComponent.prototype.ngOnInit = function () {
+            if (!this.id && this._cdkColumnRef) {
+                this.id = this._cdkColumnRef.name;
+            }
+            this._updateArrowDirection();
+            this._viewState = this._isSorted() ? 'active' : '';
+            this._sort.register(this);
+        };
+        SortHeaderComponent.prototype.ngOnDestroy = function () {
+            this._sort.deregister(this);
+            this._rerenderSubscription.unsubscribe();
+        };
+        SortHeaderComponent.prototype._handleClick = function () {
+            this._sort.sort(this);
+            this._viewState = this._isSorted() ? 'active' : '';
+        };
+        SortHeaderComponent.prototype._isSorted = function () {
+            return (this._sort.active === this.id &&
+                ['asc', 'desc'].includes(this._sort.direction));
         };
-        ButtonComponent.prototype.switchAssertClass = function (className, val) {
-            if (val) {
-                this.renderer.addClass(this.el.nativeElement, className);
-            }
-            else {
-                this.renderer.removeClass(this.el.nativeElement, className);
-            }
+        SortHeaderComponent.prototype._updateArrowDirection = function () {
+            this.arrowDirection = this._isSorted()
+                ? this._sort.direction
+                : this.start || this._sort.start;
         };
-        return ButtonComponent;
+        return SortHeaderComponent;
     }());
-    ButtonComponent.decorators = [
+    SortHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
-                    selector: 'button[aui-button]',
-                    template: "<span class=\"aui-button__content\"><ng-content></ng-content></span>\n<aui-icon *ngIf=\"loading\" icon=\"spinner\"></aui-icon>\n",
+                    selector: '[aui-sort-header]',
+                    template: "<div [class]=\"bem.block({ active: _isSorted() })\" (click)=\"_handleClick()\">\n  <button [class]=\"bem.element('button')\" type=\"button\">\n    <ng-content></ng-content>\n  </button>\n  <div [class]=\"bem.element('indicator', arrowDirection)\"></div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: [".aui-button{margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;border-width:1px;border-radius:var(--aui-border-radius-m);border-style:solid;background:none;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;transition:all .3s ease}.aui-button::-moz-focus-inner{border:none}.aui-button[disabled]{cursor:not-allowed}.aui-button__content{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-button--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-button--large aui-icon{font-size:var(--aui-icon-size-l)}.aui-button--large .aui-button__content{padding:0 var(--aui-inline-padding-l)}.aui-button--large.isRound{border-radius:calc(var(--aui-inline-height-l) / 2)}.aui-button--large.isSquare{width:var(--aui-inline-height-l)}.aui-button--large.isSquare .aui-button__content{padding:0}.aui-button--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-button--medium aui-icon{font-size:var(--aui-icon-size-m)}.aui-button--medium .aui-button__content{padding:0 var(--aui-inline-padding-m)}.aui-button--medium.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-button--medium.isSquare{width:var(--aui-inline-height-m)}.aui-button--medium.isSquare .aui-button__content{padding:0}.aui-button--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-button--small aui-icon{font-size:var(--aui-icon-size-m)}.aui-button--small .aui-button__content{padding:0 var(--aui-inline-padding-s)}.aui-button--small.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-button--small.isSquare{width:var(--aui-inline-height-s)}.aui-button--small.isSquare .aui-button__content{padding:0}.aui-button--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-button--mini aui-icon{font-size:var(--aui-icon-size-s)}.aui-button--mini .aui-button__content{padding:0 var(--aui-inline-padding-xs)}.aui-button--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-button--mini.isSquare{width:var(--aui-inline-height-xs)}.aui-button--mini.isSquare .aui-button__content{padding:0}.aui-button--text{color:rgb(var(--aui-color-primary));border:none;background-color:transparent}.aui-button--text .aui-button__content{padding:0 4px}.aui-button--text.aui-button--large:not(.isSquare){height:var(--aui-line-height-l);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-button--text.aui-button--medium:not(.isSquare),.aui-button--text.aui-button--small:not(.isSquare){height:var(--aui-line-height-m);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-button--text.aui-button--mini:not(.isSquare){height:var(--aui-line-height-s);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-button--text.isPlain{color:rgb(var(--aui-color-n-1))}.aui-button--text:hover{color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-6))}.aui-button--text.isActive,.aui-button--text:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--text[disabled]{color:rgb(var(--aui-color-p-4));background-color:transparent}.aui-button--text.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--inline{color:rgb(var(--aui-color-primary));border:none;background-color:none}.aui-button--inline .aui-button__content{padding:0}.aui-button--inline.aui-button--large:not(.isSquare){height:var(--aui-line-height-l);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-button--inline.aui-button--medium:not(.isSquare),.aui-button--inline.aui-button--small:not(.isSquare){height:var(--aui-line-height-m);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-button--inline.aui-button--mini:not(.isSquare){height:var(--aui-line-height-s);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-button--inline.isPlain{color:rgb(var(--aui-color-n-1))}.aui-button--inline:hover{color:rgb(var(--aui-color-p-1))}.aui-button--inline.isActive,.aui-button--inline:active{color:rgb(var(--aui-color-p-0))}.aui-button--inline[disabled]{color:rgb(var(--aui-color-p-4))}.aui-button--inline.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--default{color:rgb(var(--aui-color-n-1));border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9))}.aui-button--default:hover{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-button--default.isActive,.aui-button--default:active{color:rgb(var(--aui-color-p-0));border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--default[disabled]{color:rgb(var(--aui-color-n-6));border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-button--default.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--primary{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-button--primary:hover{border-color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-1))}.aui-button--primary.isActive,.aui-button--primary:active{border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-0))}.aui-button--primary[disabled]{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-button--primary.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--primary.isPlain{color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-button--primary.isPlain:hover{color:rgb(var(--aui-color-p-1));border-color:rgb(var(--aui-color-p-1));background-color:rgb(var(--aui-color-p-7))}.aui-button--primary.isPlain.isActive,.aui-button--primary.isPlain:active{color:rgb(var(--aui-color-p-0));border-color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-button--primary.isPlain[disabled]{color:rgb(var(--aui-color-p-4));border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-7))}.aui-button--primary.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--success{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-green))}.aui-button--success:hover{border-color:rgb(var(--aui-color-g-1));background-color:rgb(var(--aui-color-g-1))}.aui-button--success.isActive,.aui-button--success:active{border-color:rgb(var(--aui-color-g-0));background-color:rgb(var(--aui-color-g-0))}.aui-button--success[disabled]{border-color:rgb(var(--aui-color-g-4));background-color:rgb(var(--aui-color-g-4))}.aui-button--success.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-green),.16)}.aui-button--success.isPlain{color:rgb(var(--aui-color-green));border-color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-button--success.isPlain:hover{color:rgb(var(--aui-color-g-1));border-color:rgb(var(--aui-color-g-1));background-color:rgb(var(--aui-color-g-7))}.aui-button--success.isPlain.isActive,.aui-button--success.isPlain:active{color:rgb(var(--aui-color-g-0));border-color:rgb(var(--aui-color-g-0));background-color:rgb(var(--aui-color-g-5))}.aui-button--success.isPlain[disabled]{color:rgb(var(--aui-color-g-4));border-color:rgb(var(--aui-color-g-4));background-color:rgb(var(--aui-color-g-7))}.aui-button--success.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--warning{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-yellow))}.aui-button--warning:hover{border-color:rgb(var(--aui-color-y-1));background-color:rgb(var(--aui-color-y-1))}.aui-button--warning.isActive,.aui-button--warning:active{border-color:rgb(var(--aui-color-y-0));background-color:rgb(var(--aui-color-y-0))}.aui-button--warning[disabled]{border-color:rgb(var(--aui-color-y-4));background-color:rgb(var(--aui-color-y-4))}.aui-button--warning.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-yellow),.16)}.aui-button--warning.isPlain{color:rgb(var(--aui-color-yellow));border-color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-button--warning.isPlain:hover{color:rgb(var(--aui-color-y-1));border-color:rgb(var(--aui-color-y-1));background-color:rgb(var(--aui-color-y-7))}.aui-button--warning.isPlain.isActive,.aui-button--warning.isPlain:active{color:rgb(var(--aui-color-y-0));border-color:rgb(var(--aui-color-y-0));background-color:rgb(var(--aui-color-y-5))}.aui-button--warning.isPlain[disabled]{color:rgb(var(--aui-color-y-4));border-color:rgb(var(--aui-color-y-4));background-color:rgb(var(--aui-color-y-7))}.aui-button--warning.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button--danger{color:rgb(var(--aui-color-n-10));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-red))}.aui-button--danger:hover{border-color:rgb(var(--aui-color-r-1));background-color:rgb(var(--aui-color-r-1))}.aui-button--danger.isActive,.aui-button--danger:active{border-color:rgb(var(--aui-color-r-0));background-color:rgb(var(--aui-color-r-0))}.aui-button--danger[disabled]{border-color:rgb(var(--aui-color-r-4));background-color:rgb(var(--aui-color-r-4))}.aui-button--danger.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}.aui-button--danger.isPlain{color:rgb(var(--aui-color-red));border-color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-button--danger.isPlain:hover{color:rgb(var(--aui-color-r-1));border-color:rgb(var(--aui-color-r-1));background-color:rgb(var(--aui-color-r-7))}.aui-button--danger.isPlain.isActive,.aui-button--danger.isPlain:active{color:rgb(var(--aui-color-r-0));border-color:rgb(var(--aui-color-r-0));background-color:rgb(var(--aui-color-r-5))}.aui-button--danger.isPlain[disabled]{color:rgb(var(--aui-color-r-4));border-color:rgb(var(--aui-color-r-4));background-color:rgb(var(--aui-color-r-7))}.aui-button--danger.isPlain.cdk-focused:not(.cdk-mouse-focused){box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-button.isLoading .aui-button__content{opacity:0}.aui-button.isLoading aui-icon{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.aui-button:not(:last-child){margin:0 var(--aui-spacing-m) 0 0}.aui-button--text:not(:last-child){margin:0 var(--aui-spacing-s) 0 0}"]
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".aui-sort-header{display:flex;cursor:pointer}.aui-sort-header__button{border:none;background:0 0;display:flex;align-items:center;padding:0;outline:0;font:inherit;cursor:inherit;color:currentColor}.aui-sort-header__indicator{margin-left:4px;display:flex;flex-direction:column;align-items:center;justify-content:center}.aui-sort-header__indicator:after,.aui-sort-header__indicator:before{content:\"\";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.aui-sort-header__indicator:before{border-bottom:4px solid #ccc;margin-bottom:4px}.aui-sort-header__indicator:after{border-top:4px solid #ccc}.aui-sort-header--active .aui-sort-header__indicator--asc:before{border-bottom-color:#2c2f36}.aui-sort-header--active .aui-sort-header__indicator--desc:after{border-top-color:#2c2f36}"]
                 },] }
     ];
-    ButtonComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 },
-        { type: a11y.FocusMonitor }
+    SortHeaderComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: SortDirective, decorators: [{ type: i0.Optional }] },
+        { type: table.CdkColumnDef, decorators: [{ type: i0.Optional }] }
     ]; };
-    ButtonComponent.propDecorators = {
-        type: [{ type: i0.Input, args: ['aui-button',] }],
-        size: [{ type: i0.Input }],
-        plain: [{ type: i0.Input }],
-        loading: [{ type: i0.Input }],
-        round: [{ type: i0.Input }],
-        square: [{ type: i0.Input }]
+    SortHeaderComponent.propDecorators = {
+        id: [{ type: i0.Input, args: ['aui-sort-header',] }],
+        start: [{ type: i0.Input }]
     };
 
-    var ButtonModule = /** @class */ (function () {
-        function ButtonModule() {
+    var SortModule = /** @class */ (function () {
+        function SortModule() {
         }
-        return ButtonModule;
+        return SortModule;
     }());
-    ButtonModule.decorators = [
+    SortModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, IconModule],
-                    declarations: [ButtonComponent, ButtonGroupComponent],
-                    exports: [ButtonComponent, ButtonGroupComponent],
+                    imports: [common.CommonModule],
+                    declarations: [SortDirective, SortHeaderComponent],
+                    exports: [SortDirective, SortHeaderComponent],
                 },] }
     ];
 
@@ -1443,7 +1586,7 @@
                 },] }
     ];
     BackTopComponent.ctorParameters = function () { return [
-        { type: overlay.CdkScrollable, decorators: [{ type: i0.Optional }] }
+        { type: i1.CdkScrollable, decorators: [{ type: i0.Optional }] }
     ]; };
     BackTopComponent.propDecorators = {
         visibilityHeight: [{ type: i0.Input }],
@@ -1484,9 +1627,11 @@
         function TooltipComponent(elRef, cdr) {
             this.elRef = elRef;
             this.cdr = cdr;
+            this.bem = buildBem('aui-tooltip');
             this.hover$ = new rxjs.Subject();
         }
         TooltipComponent.prototype.setupInputs = function (inputs) {
+            var _this = this;
             Object.assign(this, inputs);
             this.text$ = this.inputContent$.pipe(operators.map(function (val) {
                 if (typeof val === 'string') {
@@ -1506,7 +1651,7 @@
                 this.inputClass$.pipe(operators.startWith('')),
             ]).pipe(operators.map(function (_a) {
                 var _b = __read(_a, 3), inputPosition = _b[0], inputType = _b[1], inputClass = _b[2];
-                var b = 'aui-tooltip';
+                var b = _this.bem.block();
                 var dir = inputPosition.split(' ')[0];
                 return inputType === exports.TooltipType.Plain
                     ? b + "--" + dir + " " + inputClass
@@ -1523,7 +1668,7 @@
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.aui-tooltip{padding:7px 15px;line-height:16px;font-size:12px;border-radius:2px;border-width:1px;border-style:solid;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2);max-width:416px;word-wrap:break-word}.aui-tooltip--default{color:#fff;background-color:rgba(0,0,0,.85);border-color:rgba(0,0,0,.85)}.aui-tooltip--primary{color:#007af5;background-color:#fff;border-color:#007af5}.aui-tooltip--success{color:#00c261;background-color:#fff;border-color:#00c261}.aui-tooltip--warning{color:#f5a300;background-color:#fff;border-color:#f5a300}.aui-tooltip--error{color:#eb0027;background-color:#fff;border-color:#eb0027}.aui-tooltip--info{padding:15px;background-color:#fff;border-color:#fff}.aui-tooltip--end,.aui-tooltip--start{margin:0 4px}.aui-tooltip--bottom,.aui-tooltip--top{margin:4px 0}"]
+                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.aui-tooltip{position:relative;padding:var(--aui-spacing-m) var(--aui-spacing-xl);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s);border-radius:var(--aui-border-radius-m);box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2);max-width:400px;word-wrap:break-word}.aui-tooltip--default{color:rgb(var(--aui-color-n-10));background-color:rgba(var(--aui-color-n-0),.85)}.aui-tooltip--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-10))}.aui-tooltip--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-n-10))}.aui-tooltip--warning{color:rgb(var(--aui-color-yellow))}.aui-tooltip--error,.aui-tooltip--warning{background-color:rgb(var(--aui-color-n-10))}.aui-tooltip--error{color:rgb(var(--aui-color-red))}.aui-tooltip--info{color:rgb(var(--aui-color-n-0));background-color:rgb(var(--aui-color-n-10))}.aui-tooltip--bottom,.aui-tooltip--top{margin:var(--aui-spacing-s) 0}.aui-tooltip--end,.aui-tooltip--start{margin:0 var(--aui-spacing-s)}"]
                 },] }
     ];
     TooltipComponent.ctorParameters = function () { return [
@@ -1802,7 +1947,7 @@
                 Object.assign(Object.assign({}, originPosition.fallback), overlayPosition.fallback),
             ]);
             var scrollStrategy = this.overlay.scrollStrategies.reposition();
-            var config = new overlay.OverlayConfig({
+            var config = new i1.OverlayConfig({
                 positionStrategy: positionStrategy,
                 scrollStrategy: scrollStrategy,
             });
@@ -1885,7 +2030,7 @@
         { type: i0.Directive }
     ];
     BaseTooltip.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2052,7 +2197,7 @@
                 },] }
     ];
     TooltipCopyDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2099,7 +2244,7 @@
                 },] }
     ];
     TooltipDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -2119,7 +2264,7 @@
     }());
     TooltipModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, overlay.OverlayModule],
+                    imports: [common.CommonModule, i1.OverlayModule],
                     declarations: [
                         TooltipDirective,
                         TooltipComponent,
@@ -2144,7 +2289,7 @@
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: [".aui-section{padding:16px 0;font-size:14px}.aui-section__title{margin-bottom:16px;font-size:16px;font-weight:500}aui-section:first-child>.aui-section{padding-top:0}aui-section:last-child>.aui-section{padding-bottom:0}aui-section+aui-section>.aui-section{border-top:1px dashed #ededed}"]
+                    styles: [".aui-section{padding:var(--aui-spacing-xl) 0;font-size:var(--aui-font-size-m)}.aui-section__title{margin-bottom:var(--aui-spacing-xl);font-size:var(--aui-font-size-l);font-weight:var(--aui-font-weight-bold)}aui-section:first-child>.aui-section{padding-top:0}aui-section:last-child>.aui-section{padding-bottom:0}"]
                 },] }
     ];
 
@@ -2161,7 +2306,7 @@
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: [".aui-card{padding:20px;border:1px solid #ededed;border-radius:2px;background-color:#fff;font-size:14px}.aui-card__header{padding:0;font-size:18px;line-height:24px}.aui-card__header+.aui-card__content{margin:12px 0 0}.aui-card__content{padding:0}.aui-card__content+.aui-card__footer{margin:12px 0 0}.aui-card__footer{padding:0}.aui-card.hasDivider>.aui-card__header{padding-bottom:12px;border-bottom:1px solid #ededed}.aui-card.hasDivider>.aui-card__header+.aui-card__content{margin-top:16px}.aui-card.hasDivider>.aui-card__content+.aui-card__footer{margin-top:20px}.aui-card.hasDivider>.aui-card__footer{padding-top:20px;border-top:1px solid #ededed}aui-card+aui-card>.aui-card{margin-top:16px}"]
+                    styles: [".aui-card{padding:20px;border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-n-10));font-size:var(--aui-font-size-m);box-shadow:0 0 4px 0 rgba(var(--aui-color-n-1),.1)}.aui-card__header{padding:0;font-size:var(--aui-font-size-xxl);line-height:normal;color:rgb(var(--aui-color-n-1));font-weight:var(--aui-font-weight-bold)}.aui-card__header+.aui-card__content{margin-top:var(--aui-spacing-xl)}.aui-card__content{padding:0}.aui-card__content+.aui-card__footer{margin-top:var(--aui-spacing-xl)}.aui-card__footer{padding:0}.aui-card.hasDivider>.aui-card__header{padding-bottom:var(--aui-spacing-xl);border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-card.hasDivider>.aui-card__content+.aui-card__footer,.aui-card.hasDivider>.aui-card__header+.aui-card__content{margin-top:var(--aui-spacing-xl)}.aui-card.hasDivider>.aui-card__footer{padding-top:var(--aui-spacing-xl);border-top:1px solid rgb(var(--aui-color-n-8))}aui-card+aui-card>.aui-card{margin-top:var(--aui-spacing-xl)}"]
                 },] }
     ];
     CardComponent.propDecorators = {
@@ -2243,7 +2388,7 @@
             this.afterOpen$ = new rxjs.Subject();
             this.afterClosed$ = new rxjs.Subject();
             dialogInstance.id = this.id;
-            this.scrollable = new overlay.CdkScrollable({ nativeElement: overlayRef.overlayElement }, scrollDispatcher, ngZone);
+            this.scrollable = new i1.CdkScrollable({ nativeElement: overlayRef.overlayElement }, scrollDispatcher, ngZone);
             this.scrollable.ngOnInit();
         }
         DialogRef.prototype.close = function (result) {
@@ -2631,9 +2776,9 @@
         { type: i0.Injectable }
     ];
     DialogService.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.Injector },
-        { type: overlay.ScrollDispatcher },
+        { type: i1.ScrollDispatcher },
         { type: i0.NgZone }
     ]; };
 
@@ -2678,7 +2823,7 @@
             return _this;
         }
         return DialogContentComponent;
-    }(overlay.CdkScrollable));
+    }(i1.CdkScrollable));
     DialogContentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dialog-content',
@@ -2690,7 +2835,7 @@
     ];
     DialogContentComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: overlay.ScrollDispatcher },
+        { type: i1.ScrollDispatcher },
         { type: i0.NgZone },
         { type: bidi.Directionality }
     ]; };
@@ -2757,7 +2902,7 @@
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        overlay.OverlayModule,
+                        i1.OverlayModule,
                         portal.PortalModule,
                         IconModule,
                         ButtonModule,
@@ -3634,7 +3779,7 @@
     CheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-checkbox',
-                    template: "<div\n  #elRef\n  class=\"aui-checkbox\"\n  [class.isDisabled]=\"disabled\"\n  [class.isChecked]=\"value$ | async\"\n  [class.isIndeterminate]=\"indeterminate\"\n  [class.isTag]=\"type === 'tag'\"\n>\n  <input\n    [name]=\"name\"\n    [id]=\"id\"\n    class=\"aui-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"value$ | async\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    (blur)=\"onBlur()\"\n  />\n  <label class=\"aui-checkbox__label\" [for]=\"id\">\n    <i class=\"aui-checkbox__pointer\">\n      <aui-icon\n        icon=\"check_s\"\n        [hidden]=\"!(value$ | async) || indeterminate\"\n      ></aui-icon>\n      <i class=\"aui-checkbox__icon-indeterminate\" [hidden]=\"!indeterminate\"></i>\n    </i>\n    <span class=\"aui-checkbox__content\"><ng-content></ng-content></span>\n  </label>\n</div>\n",
+                    template: "<div\n  #elRef\n  class=\"aui-checkbox\"\n  [class.isDisabled]=\"disabled\"\n  [class.isChecked]=\"value$ | async\"\n  [class.isIndeterminate]=\"indeterminate\"\n  [class.isTag]=\"type === 'tag'\"\n>\n  <input\n    [name]=\"name\"\n    [id]=\"id\"\n    class=\"aui-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"value$ | async\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    (blur)=\"onBlur()\"\n  />\n  <label class=\"aui-checkbox__label\" [for]=\"id\">\n    <i class=\"aui-checkbox__pointer\">\n      <aui-icon\n        [icon]=\"indeterminate ? 'square_s' : 'check_s'\"\n        [hidden]=\"!(value$ | async) && !indeterminate\"\n      ></aui-icon>\n    </i>\n    <span class=\"aui-checkbox__content\"><ng-content></ng-content></span>\n  </label>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
@@ -3645,7 +3790,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".aui-checkbox{margin-right:var(--aui-spacing-xxxl);display:inline-block;color:rgb(var(--aui-color-n-1));font-size:var(--aui-font-size-m);line-height:var(--aui-inline-height-m);position:relative}.aui-checkbox__label{display:flex;align-items:center;cursor:pointer}.aui-checkbox__label:hover .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary))}.aui-checkbox.isTag{margin-right:var(--aui-spacing-m);height:var(--aui-inline-height-s);padding:0 var(--aui-spacing-l);line-height:var(--aui-inline-height-s);background-color:rgb(var(--aui-color-n-8));border-radius:calc(var(--aui-inline-height-s) / 2);font-size:var(--aui-font-size-m)}.aui-checkbox.isTag:hover .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary))}.aui-checkbox.isTag.isChecked,.aui-checkbox.isTag:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-checkbox__input{position:absolute;opacity:0;z-index:-1}.aui-checkbox__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-checkbox__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-checkbox.cdk-keyboard-focused .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-checkbox.isChecked .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-checkbox.isChecked.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-checkbox.isDisabled .aui-checkbox__label{cursor:not-allowed}.aui-checkbox.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-checkbox.isIndeterminate .aui-checkbox__pointer{display:inline-flex;align-items:center;justify-content:center;border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-9))}.aui-checkbox__icon-indeterminate{height:var(--aui-spacing-m);width:var(--aui-spacing-m);background-color:rgb(var(--aui-color-primary))}.aui-checkbox.isIndeterminate.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-p-4))}.aui-checkbox.isDisabled .aui-checkbox__icon-indeterminate{background-color:rgb(var(--aui-color-p-4))}"]
+                    styles: [".aui-checkbox{margin-right:var(--aui-spacing-xxxl);display:inline-block;color:rgb(var(--aui-color-n-1));font-size:var(--aui-font-size-m);line-height:var(--aui-inline-height-m);position:relative}.aui-checkbox__label{display:flex;align-items:center;cursor:pointer}.aui-checkbox__label:hover .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary))}.aui-checkbox__content{line-height:var(--aui-font-size-m)}.aui-checkbox.isTag{margin-right:var(--aui-spacing-m);height:var(--aui-inline-height-s);padding:0 var(--aui-spacing-l);line-height:var(--aui-inline-height-s);background-color:rgb(var(--aui-color-n-8));border-radius:calc(var(--aui-inline-height-s) / 2);font-size:var(--aui-font-size-m)}.aui-checkbox.isTag:hover .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary))}.aui-checkbox.isTag.isChecked,.aui-checkbox.isTag:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-checkbox__input{position:absolute;opacity:0;z-index:-1}.aui-checkbox__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-checkbox__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-checkbox.cdk-keyboard-focused .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-checkbox.isChecked .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-checkbox.isChecked.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-checkbox.isDisabled .aui-checkbox__label{cursor:not-allowed}.aui-checkbox.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-checkbox.isIndeterminate .aui-checkbox__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-checkbox.isIndeterminate.isDisabled .aui-checkbox__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}"]
                 },] }
     ];
     CheckboxComponent.ctorParameters = function () { return [
@@ -3808,7 +3953,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-input-group{display:inline-block;width:100%;color:rgb(var(--aui-color-n-1))}.aui-input-group.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input-group--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-input-group--large .aui-input-group__prefix aui-icon,.aui-input-group--large .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-l)}.aui-input-group--large.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l))}.aui-input-group--large.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l))}.aui-input-group--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-input-group--medium .aui-input-group__prefix aui-icon,.aui-input-group--medium .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-m)}.aui-input-group--medium.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--medium.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-input-group--small .aui-input-group__prefix aui-icon,.aui-input-group--small .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-m)}.aui-input-group--small.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--small.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-input-group--mini .aui-input-group__prefix aui-icon,.aui-input-group--mini .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-s)}.aui-input-group--mini.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s))}.aui-input-group--mini.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s))}.aui-input-group__inner-wrapper{display:flex;height:100%}.aui-input-group__input-wrapper{width:100%;position:relative}.aui-input-group__input-wrapper:hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-input-group__addon{display:flex;align-items:center;flex-shrink:0;height:100%;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-input-group__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-input-group__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-input-group__prefix{left:var(--aui-inline-padding-xs)}.aui-input-group__prefix,.aui-input-group__suffix{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-n-6))}.aui-input-group__suffix{right:var(--aui-inline-padding-xs)}.aui-input-group.hasAddonBefore .aui-input{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.aui-input-group.hasAddonAfter .aui-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}"]
+                    styles: [".aui-input-group{display:inline-block;width:100%;color:rgb(var(--aui-color-n-1))}.aui-input-group.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input-group--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-input-group--large .aui-input-group__prefix aui-icon,.aui-input-group--large .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-l)}.aui-input-group--large.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l))}.aui-input-group--large.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l))}.aui-input-group--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-input-group--medium .aui-input-group__prefix aui-icon,.aui-input-group--medium .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-m)}.aui-input-group--medium.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--medium.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-input-group--small .aui-input-group__prefix aui-icon,.aui-input-group--small .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-m)}.aui-input-group--small.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--small.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m))}.aui-input-group--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-input-group--mini .aui-input-group__prefix aui-icon,.aui-input-group--mini .aui-input-group__suffix aui-icon{font-size:var(--aui-icon-size-s)}.aui-input-group--mini.hasPrefix .aui-input{padding-left:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s))}.aui-input-group--mini.hasSuffix .aui-input{padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s))}.aui-input-group__inner-wrapper{display:flex;height:100%}.aui-input-group__input-wrapper{width:100%;position:relative}.aui-input-group__input-wrapper:focus-within{z-index:2}.aui-input-group__input-wrapper:hover{z-index:2}.aui-input-group__input-wrapper:hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-input-group__addon{display:flex;align-items:center;flex-shrink:0;height:100%;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));z-index:1}.aui-input-group__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-input-group__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-input-group__prefix{left:var(--aui-inline-padding-xs)}.aui-input-group__prefix,.aui-input-group__suffix{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-n-6))}.aui-input-group__suffix{right:var(--aui-inline-padding-xs)}.aui-input-group.hasAddonBefore .aui-input-group__input-wrapper{margin-left:-1px}.aui-input-group.hasAddonBefore .aui-input{border-top-left-radius:0;border-bottom-left-radius:0}.aui-input-group.hasAddonAfter .aui-input-group__input-wrapper{margin-right:-1px}.aui-input-group.hasAddonAfter .aui-input{border-top-right-radius:0;border-bottom-right-radius:0}"]
                 },] }
     ];
     InputGroupComponent.propDecorators = {
@@ -3885,7 +4030,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-search{display:inline-block;width:100%;position:relative;color:rgb(var(--aui-color-n-1))}.aui-search:hover:not(.isDisabled) .aui-input{border-color:#007af5}.aui-search.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-search--large{font-size:16px}.aui-search--large .aui-search__clear,.aui-search--large .aui-search__spinner{right:12px}.aui-search--large .aui-search__icon{left:12px}.aui-search--large .aui-search__button-icon{padding:0 11px}.aui-search--large.isClearable .aui-search__input,.aui-search--large.isSearching .aui-search__input{padding-right:39px}.aui-search--large.hasIcon .aui-search__input{padding-left:39px}.aui-search--large.hasButton .aui-search__input{padding-right:51px}.aui-search--large.hasButton .aui-search__clear{right:51px}.aui-search--large.hasButton.isClearable .aui-search__input{padding-right:79px}.aui-search--medium{font-size:14px}.aui-search--medium .aui-search__clear,.aui-search--medium .aui-search__spinner{right:8px}.aui-search--medium .aui-search__icon{left:8px}.aui-search--medium .aui-search__button-icon{padding:0 7px}.aui-search--medium.isClearable .aui-search__input,.aui-search--medium.isSearching .aui-search__input{padding-right:29px}.aui-search--medium.hasIcon .aui-search__input{padding-left:29px}.aui-search--medium.hasButton .aui-search__input{padding-right:37px}.aui-search--medium.hasButton .aui-search__clear{right:37px}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:59px}.aui-search--small{font-size:14px}.aui-search--small .aui-search__clear,.aui-search--small .aui-search__spinner{right:8px}.aui-search--small .aui-search__icon{left:8px}.aui-search--small .aui-search__button-icon{padding:0 7px}.aui-search--small.isClearable .aui-search__input,.aui-search--small.isSearching .aui-search__input{padding-right:29px}.aui-search--small.hasIcon .aui-search__input{padding-left:29px}.aui-search--small.hasButton .aui-search__input{padding-right:37px}.aui-search--small.hasButton .aui-search__clear{right:37px}.aui-search--small.hasButton.isClearable .aui-search__input{padding-right:59px}.aui-search--mini{font-size:12px}.aui-search--mini .aui-search__clear,.aui-search--mini .aui-search__spinner{right:6px}.aui-search--mini .aui-search__icon{left:6px}.aui-search--mini .aui-search__button-icon{padding:0 5px}.aui-search--mini.isClearable .aui-search__input,.aui-search--mini.isSearching .aui-search__input{padding-right:23px}.aui-search--mini.hasIcon .aui-search__input{padding-left:23px}.aui-search--mini.hasButton .aui-search__input{padding-right:29px}.aui-search--mini.hasButton .aui-search__clear{right:29px}.aui-search--mini.hasButton.isClearable .aui-search__input{padding-right:47px}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-n-6))}.aui-search__button{position:absolute;top:0;right:1px;height:100%;display:flex;align-items:center;color:rgb(var(--aui-color-n-4))}.aui-search:not(.isDisabled):not(.isSearching) .aui-search__button:hover{color:#007af5;cursor:pointer}.aui-search__button-icon{border-left:1px solid #c8cacd}.aui-search__clear,.aui-search__spinner{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-n-4))}.aui-search__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
+                    styles: [".aui-search{display:inline-block;width:100%;position:relative;color:rgb(var(--aui-color-n-4))}.aui-search.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-search--medium{line-height:var(--aui-line-height-m)}.aui-search--medium aui-icon{font-size:var(--aui-icon-size-m)}.aui-search--medium .aui-search__clear,.aui-search--medium .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + var(--aui-border-m))}.aui-search--medium .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + var(--aui-border-m))}.aui-search--medium .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--medium.isClearable .aui-search__input,.aui-search--medium.isSearching .aui-search__input{padding-right:var(--aui-inline-padding-xs)}.aui-search--medium.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + var(--aui-border-m))}.aui-search--medium.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs))}.aui-search--medium.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + var(--aui-border-m) * 2)}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) * 2)}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-n-6))}.aui-search__button{position:absolute;top:0;right:var(--aui-border-m);height:100%;display:flex;align-items:center}.aui-search:not(.isDisabled):not(.isSearching) .aui-search__button{cursor:pointer}.aui-search:not(.isDisabled):not(.isSearching) .aui-search__button:hover{color:rgb(var(--aui-color-primary))}.aui-search__button-icon{border-left:var(--aui-border-m) solid rgb(var(--aui-color-n-7))}.aui-search__clear,.aui-search__spinner{position:absolute;top:50%;transform:translateY(-50%)}.aui-search__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
                 },] }
     ];
     SearchComponent.propDecorators = {
@@ -4073,6 +4218,7 @@
         };
         TagsInputComponent.prototype.onInput = function () {
             var _this = this;
+            var _a, _b, _c;
             var value = this.inputRef.nativeElement.value;
             // make sure value sync to span element
             requestAnimationFrame(function () {
@@ -4083,8 +4229,13 @@
                     _this.renderer.setStyle(_this.inputRef.nativeElement, 'width', _this.inputValueMirror.nativeElement.scrollWidth + 'px');
                 }
             });
+            if (((_c = (_b = (_a = this.controlContainer) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[INPUT_ERROR_KEY]) &&
+                Object.keys(this.controlContainer.control.errors).length === 1) {
+                this.controlContainer.control.setErrors(null);
+            }
         };
         TagsInputComponent.prototype.onKeyDown = function (event) {
+            var _this = this;
             var inputEl = event.target;
             if (event.key === 'Backspace' && inputEl.value === '') {
                 this.onRemove(this.snapshot.value.length - 1);
@@ -4092,9 +4243,11 @@
                 event.preventDefault();
             }
             else if (event.key === 'Enter') {
-                this.pushValue(inputEl.value);
                 event.stopPropagation();
                 event.preventDefault();
+                requestAnimationFrame(function () {
+                    _this.pushValue(inputEl.value);
+                });
             }
         };
         TagsInputComponent.prototype.onInputFocus = function () {
@@ -4191,7 +4344,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));outline:none;text-overflow:ellipsis}@-webkit-keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}.aui-input:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-inner-spin-button,.aui-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.aui-input[type=number]{-moz-appearance:textfield}.aui-input::-moz-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:-ms-input-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input::placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input.isFocused,.aui-input:focus,.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input.isFocused,.aui-input:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-input[readonly]{cursor:default}.aui-input[disabled],.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important}.aui-input[disabled]{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}.aui-input.ng-invalid.ng-dirty.isFocused,.aui-input.ng-invalid.ng-dirty:focus,.ng-submitted .aui-input.ng-invalid.isFocused,.ng-submitted .aui-input.ng-invalid:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:#007af5;background-color:#e6f2fe}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:#00c261;background-color:#e6f9ef}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:#f5a300;background-color:#fef6e6}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:#eb0027;background-color:#fde6e9}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-2))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.hasBorder.aui-tag--primary{border-color:#007af5}.aui-tag.hasBorder.aui-tag--success{border-color:#00c261}.aui-tag.hasBorder.aui-tag--warning{border-color:#f5a300}.aui-tag.hasBorder.aui-tag--error{border-color:#eb0027}.aui-tag.hasBorder.aui-tag--info{background-color:#fafafa;border-color:#c8cacd}.aui-tag.isSolid.aui-tag--primary{background-color:#007af5}.aui-tag.isSolid.aui-tag--success{background-color:#00c261}.aui-tag.isSolid.aui-tag--warning{background-color:#f5a300}.aui-tag.isSolid.aui-tag--error{background-color:#eb0027}.aui-tag.isSolid.aui-tag--info{background-color:#c8cacd}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}", ".aui-tags-input{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-n-1));vertical-align:middle}.aui-tags-input:hover{cursor:text}.aui-tags-input .aui-tag{max-width:100%}.aui-tags-input.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:#c8cacd;cursor:not-allowed}.aui-tags-input.isDisabled .aui-tag{color:#c8cacd;background-color:rgb(var(--aui-color-n-8))}.aui-tags-input__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-n-6));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;margin-left:1px}.aui-tags-input__placeholder[hidden]{display:none}.aui-tags-input__mirror{opacity:0;left:0;z-index:-99;position:absolute;font-size:12px;padding-left:1px}.aui-tags-input--large{min-height:40px;font-size:16px;padding:5px 11px 0}.aui-tags-input--large .aui-tag{margin:0 4px 5px 0}.aui-tags-input--medium{min-height:32px;font-size:14px;padding:5px 7px 0}.aui-tags-input--medium .aui-tag{margin:0 4px 5px 0}.aui-tags-input--small{min-height:28px;font-size:14px;padding:3px 7px 0}.aui-tags-input--small .aui-tag{margin:0 4px 3px 0}.aui-tags-input--mini{min-height:24px;font-size:12px;padding:1px 5px 0}.aui-tags-input--mini .aui-tag{margin:0 4px 1px 0}.aui-tags-input__suffix{position:absolute;top:50%;right:7px;transform:translateY(-50%)}.aui-tags-input .aui-tag.aui-tags-input__input{width:1em;padding:0;border:none;outline:none;background:none;color:rgb(var(--aui-color-n-1));font-family:inherit;margin-top:-2px}.aui-tags-input .aui-tag.aui-tags-input__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}.ng-submitted aui-tags-input.ng-invalid .aui-input,.ng-submitted aui-tags-input.ng-invalid .aui-tags-input,aui-tags-input.ng-invalid.ng-dirty .aui-input,aui-tags-input.ng-invalid.ng-dirty .aui-tags-input{border-color:#eb0027!important}.aui-tags-input.withHeightLimit{overflow:auto;position:static}.aui-tags-input.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-tags-input.withHeightLimit::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}"]
+                    styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));outline:none;text-overflow:ellipsis}@-webkit-keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}.aui-input:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-inner-spin-button,.aui-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.aui-input[type=number]{-moz-appearance:textfield}.aui-input::-moz-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:-ms-input-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input::placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input.isFocused,.aui-input:focus,.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input.isFocused,.aui-input:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-input[readonly]{cursor:default}.aui-input[disabled],.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important}.aui-input[disabled]{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}.aui-input.ng-invalid.ng-dirty.isFocused,.aui-input.ng-invalid.ng-dirty:focus,.ng-submitted .aui-input.ng-invalid.isFocused,.ng-submitted .aui-input.ng-invalid:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-2))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.isSolid.aui-tag--primary{background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--success{background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--warning{background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--error{background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--info{background-color:rgb(var(--aui-color-n))}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}", ".aui-tags-input{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-n-1));vertical-align:middle}.aui-tags-input:hover{cursor:text}.aui-tags-input .aui-tag{max-width:100%}.aui-tags-input.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:#c8cacd;cursor:not-allowed}.aui-tags-input.isDisabled .aui-tag{color:#c8cacd;background-color:rgb(var(--aui-color-n-8))}.aui-tags-input__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-n-6));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;margin-left:1px}.aui-tags-input__placeholder[hidden]{display:none}.aui-tags-input__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-tags-input--large{min-height:40px;font-size:16px;padding:5px 11px 0}.aui-tags-input--large .aui-tag{margin:0 4px 5px 0}.aui-tags-input--medium{min-height:32px;font-size:14px;padding:5px 7px 0}.aui-tags-input--medium .aui-tag{margin:0 4px 5px 0}.aui-tags-input--small{min-height:28px;font-size:14px;padding:3px 7px 0}.aui-tags-input--small .aui-tag{margin:0 4px 3px 0}.aui-tags-input--mini{min-height:24px;font-size:12px;padding:1px 5px 0}.aui-tags-input--mini .aui-tag{margin:0 4px 1px 0}.aui-tags-input__suffix{position:absolute;top:50%;right:7px;transform:translateY(-50%)}.aui-tags-input .aui-tag.aui-tags-input__input{width:1em;padding:0;border:none;outline:none;background:none;color:rgb(var(--aui-color-n-1));font-family:inherit;font-size:inherit;margin-top:-2px}.aui-tags-input .aui-tag.aui-tags-input__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}.ng-submitted aui-tags-input.ng-invalid .aui-input,.ng-submitted aui-tags-input.ng-invalid .aui-tags-input,aui-tags-input.ng-invalid.ng-dirty .aui-input,aui-tags-input.ng-invalid.ng-dirty .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}.ng-submitted aui-tags-input.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-tags-input.ng-invalid .aui-tags-input .aui-tags-input__input,aui-tags-input.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-tags-input.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.ng-submitted aui-tags-input.ng-invalid .aui-input.isFocused,.ng-submitted aui-tags-input.ng-invalid .aui-tags-input.isFocused,aui-tags-input.ng-invalid.ng-dirty .aui-input.isFocused,aui-tags-input.ng-invalid.ng-dirty .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}.aui-tags-input.withHeightLimit{overflow:auto;position:static}.aui-tags-input.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-tags-input.withHeightLimit::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}"]
                 },] }
     ];
     TagsInputComponent.ctorParameters = function () { return [
@@ -4274,11 +4427,20 @@
             this.invalid = false;
             this.round = true;
             this.color = '';
+            this.allowClick = false;
             this.close = new i0.EventEmitter();
         }
         Object.defineProperty(TagComponent.prototype, "rootClass", {
             get: function () {
-                return this.bem.block(this.type || TagType.Primary, this.size || ComponentSize.Medium) + " " + (this.solid ? 'isSolid' : '') + " " + (this.border ? 'hasBorder' : '') + " " + (this.invalid ? 'isInvalid' : '') + " " + (this.round ? 'isRound' : '');
+                return this.bem.block(this.type || TagType.Primary, this.size || ComponentSize.Medium) + " " + (this.solid ? 'isSolid' : '') + " " + (this.border ? 'hasBorder' : '') + " " + (this.invalid ? 'isInvalid' : '') + " " + (this.round ? 'isRound' : '') + " " + (this.allowClick && this.isNormalTag ? 'allowClick' : '');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TagComponent.prototype, "isNormalTag", {
+            // 只有常规标签支持单击样式
+            get: function () {
+                return !this.solid && !this.closeable && !this.invalid;
             },
             enumerable: false,
             configurable: true
@@ -4304,7 +4466,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:#007af5;background-color:#e6f2fe}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:#00c261;background-color:#e6f9ef}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:#f5a300;background-color:#fef6e6}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:#eb0027;background-color:#fde6e9}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-2))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.hasBorder.aui-tag--primary{border-color:#007af5}.aui-tag.hasBorder.aui-tag--success{border-color:#00c261}.aui-tag.hasBorder.aui-tag--warning{border-color:#f5a300}.aui-tag.hasBorder.aui-tag--error{border-color:#eb0027}.aui-tag.hasBorder.aui-tag--info{background-color:#fafafa;border-color:#c8cacd}.aui-tag.isSolid.aui-tag--primary{background-color:#007af5}.aui-tag.isSolid.aui-tag--success{background-color:#00c261}.aui-tag.isSolid.aui-tag--warning{background-color:#f5a300}.aui-tag.isSolid.aui-tag--error{background-color:#eb0027}.aui-tag.isSolid.aui-tag--info{background-color:#c8cacd}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}"]
+                    styles: [".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-2))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.isSolid.aui-tag--primary{background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--success{background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--warning{background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--error{background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--info{background-color:rgb(var(--aui-color-n))}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}"]
                 },] }
     ];
     TagComponent.propDecorators = {
@@ -4316,12 +4478,14 @@
         invalid: [{ type: i0.Input }],
         round: [{ type: i0.Input }],
         color: [{ type: i0.Input }],
+        allowClick: [{ type: i0.Input }],
         close: [{ type: i0.Output }]
     };
 
     var CheckTagComponent = /** @class */ (function () {
         function CheckTagComponent() {
             this.bem = buildBem('aui-tag');
+            this.hovered = false;
             this.checked = false;
             this.size = ComponentSize.Medium;
             this.round = true;
@@ -4329,7 +4493,7 @@
         }
         Object.defineProperty(CheckTagComponent.prototype, "rootClass", {
             get: function () {
-                return "aui-check-tag " + this.bem.block(this.size, this.checked ? TagType.Primary : TagType.Info) + " " + (this.round ? 'isRound' : '');
+                return "aui-check-tag " + this.bem.block(this.size, this.checked || this.hovered ? TagType.Primary : TagType.Info) + " " + (this.round ? 'isRound' : '');
             },
             enumerable: false,
             configurable: true
@@ -4339,11 +4503,11 @@
     CheckTagComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-check-tag',
-                    template: "<div [class]=\"rootClass\" (click)=\"checkedChange.emit(!checked)\">\n  <span class=\"aui-tag__content\"><ng-content></ng-content></span>\n</div>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  (click)=\"checkedChange.emit(!checked)\"\n  (mouseenter)=\"hovered = true\"\n  (mouseleave)=\"hovered = false\"\n  [class.isSolid]=\"checked\"\n>\n  <span class=\"aui-tag__content\"><ng-content></ng-content></span>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-check-tag{cursor:pointer}.aui-check-tag .aui-tag__content{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aui-check-tag .aui-tag__checkbox{align-self:center}.aui-check-tag.aui-tag--medium{height:28px;line-height:28px;font-size:14px;margin:0 8px}.aui-check-tag.aui-tag--medium.isRound{border-radius:14px}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:#007af5;background-color:#e6f2fe}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:#00c261;background-color:#e6f9ef}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:#f5a300;background-color:#fef6e6}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:#eb0027;background-color:#fde6e9}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-2))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.hasBorder.aui-tag--primary{border-color:#007af5}.aui-tag.hasBorder.aui-tag--success{border-color:#00c261}.aui-tag.hasBorder.aui-tag--warning{border-color:#f5a300}.aui-tag.hasBorder.aui-tag--error{border-color:#eb0027}.aui-tag.hasBorder.aui-tag--info{background-color:#fafafa;border-color:#c8cacd}.aui-tag.isSolid.aui-tag--primary{background-color:#007af5}.aui-tag.isSolid.aui-tag--success{background-color:#00c261}.aui-tag.isSolid.aui-tag--warning{background-color:#f5a300}.aui-tag.isSolid.aui-tag--error{background-color:#eb0027}.aui-tag.isSolid.aui-tag--info{background-color:#c8cacd}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}"]
+                    styles: [".aui-check-tag{cursor:pointer}.aui-check-tag .aui-tag__content{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aui-check-tag .aui-tag__checkbox{align-self:center}.aui-check-tag.aui-tag--medium{height:28px;line-height:28px;font-size:14px;margin:0 8px}.aui-check-tag.aui-tag--medium.isRound{border-radius:14px}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-2))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.isSolid.aui-tag--primary{background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--success{background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--warning{background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--error{background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--info{background-color:rgb(var(--aui-color-n))}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}"]
                 },] }
     ];
     CheckTagComponent.propDecorators = {
@@ -4555,7 +4719,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".aui-number-input{display:flex;width:140px;padding:3px;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:var(--aui-line-height-m);height:var(--aui-line-height-m)}.aui-number-input.is-focus,.aui-number-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input.is-focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-number-input.is-disabled{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.is-disabled:hover{cursor:not-allowed}.aui-number-input.is-disabled .aui-number-input__input{color:rgb(var(--aui-color-n-6))}.aui-number-input.is-disabled .aui-number-input__input:hover{cursor:not-allowed}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{background-color:rgb(var(--aui-color-n-8));border:unset;width:var(--aui-icon-size-xl);height:var(--aui-icon-size-xl)}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:unset}.aui-number-input__decrease.aui-button:not(:last-child),.aui-number-input__increase.aui-button:not(:last-child){margin:unset}.aui-number-input__input{min-width:0;line-height:var(--aui-line-height-m);border:unset;padding:unset;margin:0 var(--aui-spacing-s);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));text-align:center}.aui-number-input__input:focus{border:unset}.aui-number-input__input:focus-visible{outline:unset}.ng-submitted aui-number-input.ng-invalid,aui-number-input.ng-invalid.ng-dirty{border-color:rgb(var(--aui-color-red))}"]
+                    styles: [".aui-number-input{display:flex;width:140px;padding:3px;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:var(--aui-line-height-m);height:var(--aui-line-height-m)}.aui-number-input.is-focus,.aui-number-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input.is-focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-number-input.is-disabled{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.is-disabled:hover{cursor:not-allowed}.aui-number-input.is-disabled .aui-number-input__input{color:rgb(var(--aui-color-n-6))}.aui-number-input.is-disabled .aui-number-input__input:hover{cursor:not-allowed}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{background-color:rgb(var(--aui-color-n-8));border:unset;width:var(--aui-icon-size-xl);height:var(--aui-icon-size-xl)}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:unset}.aui-number-input__input{min-width:0;line-height:var(--aui-line-height-m);border:unset;padding:unset;margin:0 var(--aui-spacing-s);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));text-align:center}.aui-number-input__input:focus{border:unset}.aui-number-input__input:focus-visible{outline:unset}.ng-submitted aui-number-input.ng-invalid,aui-number-input.ng-invalid.ng-dirty{border-color:rgb(var(--aui-color-red))}"]
                 },] }
     ];
     NumberInputComponent.propDecorators = {
@@ -4634,6 +4798,7 @@
             sunday: 'Sun',
             now: 'Now',
             select_all: 'Select All',
+            today: 'Today',
         },
     };
 
@@ -4735,6 +4900,7 @@
             sunday: '日',
             now: '此刻',
             select_all: '全选',
+            today: '今天',
         },
     };
 
@@ -4814,7 +4980,7 @@
                 },] }
     ];
     DropdownDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -4871,7 +5037,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-menu-item{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 12px;height:32px;font-size:14px;color:rgb(var(--aui-color-n-1));background-color:#fff;border-radius:2px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-menu-item--default.isActive,.aui-menu-item--default:hover{color:#007af5;background-color:#e6f2fe}.aui-menu-item--primary{color:#007af5}.aui-menu-item--primary.isActive,.aui-menu-item--primary:hover{background-color:#e6f2fe}.aui-menu-item--success{color:#00c261}.aui-menu-item--success.isActive,.aui-menu-item--success:hover{background-color:#e6f2fe}.aui-menu-item--warning{color:#f5a300}.aui-menu-item--warning.isActive,.aui-menu-item--warning:hover{background-color:#fef6e6}.aui-menu-item--danger{color:#eb0027}.aui-menu-item--danger.isActive,.aui-menu-item--danger:hover{background-color:#fde6e9}.aui-menu-item[disabled],.aui-menu-item[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-menu-item aui-icon:first-child{margin-right:8px}aui-menu-item:not(:first-child) .hasDivider{overflow:visible;margin-top:16px}aui-menu-item:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:-8px;height:1px;background:#ededed;pointer-events:none}"]
+                    styles: [".aui-menu-item{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 var(--aui-spacing-l);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-menu-item--default.isActive,.aui-menu-item--default:hover{background-color:rgb(var(--aui-color-p-6))}.aui-menu-item--default.isActive,.aui-menu-item--primary{color:rgb(var(--aui-color-primary))}.aui-menu-item--primary.isActive,.aui-menu-item--primary:hover{background-color:rgb(var(--aui-color-p-6))}.aui-menu-item--success{color:rgb(var(--aui-color-green))}.aui-menu-item--success.isActive,.aui-menu-item--success:hover{background-color:rgb(var(--aui-color-p-6))}.aui-menu-item--warning{color:rgb(var(--aui-color-yellow))}.aui-menu-item--warning.isActive,.aui-menu-item--warning:hover{background-color:rgb(var(--aui-color-y-6))}.aui-menu-item--danger{color:rgb(var(--aui-color-red))}.aui-menu-item--danger.isActive,.aui-menu-item--danger:hover{background-color:rgb(var(--aui-color-r-6))}.aui-menu-item[disabled],.aui-menu-item[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-menu-item aui-icon:first-child{margin-right:var(--aui-spacing-m)}aui-menu-item:not(:first-child) .hasDivider{overflow:visible;margin-top:var(--aui-spacing-xl)}aui-menu-item:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:calc(0px - var(--aui-spacing-m));height:1px;background:rgb(var(--aui-color-n-8));pointer-events:none}"]
                 },] }
     ];
     MenuItemComponent.propDecorators = {
@@ -4955,7 +5121,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: ["aui-menu{display:none}.aui-menu{padding:8px;max-width:280px;border-radius:2px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-menu--large .aui-menu-item,.aui-menu--large .aui-submenu{height:40px;font-size:16px}.aui-menu--medium .aui-menu-item,.aui-menu--medium .aui-submenu{height:32px;font-size:14px}.aui-menu--small .aui-menu-item,.aui-menu--small .aui-submenu{height:28px;font-size:14px}.aui-menu--mini .aui-menu-item,.aui-menu--mini .aui-submenu{height:24px;font-size:12px}"]
+                    styles: ["aui-menu{display:none}.aui-menu{padding:var(--aui-spacing-m);max-width:280px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.16)}.aui-menu--large .aui-menu-item,.aui-menu--large .aui-submenu{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-menu--medium .aui-menu-item,.aui-menu--medium .aui-submenu{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-l)}.aui-menu--small .aui-menu-item,.aui-menu--small .aui-submenu{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-menu--mini .aui-menu-item,.aui-menu--mini .aui-submenu{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}"]
                 },] }
     ];
     MenuComponent.propDecorators = {
@@ -5002,7 +5168,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-dropdown-button{display:inline-block}.aui-dropdown-button--large .aui-dropdown-button__trigger .aui-button__content{padding:0 7px}.aui-dropdown-button--medium .aui-dropdown-button__trigger .aui-button__content{padding:0 5px}.aui-dropdown-button--mini .aui-dropdown-button__trigger .aui-button__content,.aui-dropdown-button--small .aui-dropdown-button__trigger .aui-button__content{padding:0 3px}.aui-dropdown-button__content.aui-button{border-bottom-right-radius:0;border-top-right-radius:0}.aui-dropdown-button__content.aui-button:not([disabled]):active,.aui-dropdown-button__content.aui-button:not([disabled]):focus,.aui-dropdown-button__content.aui-button:not([disabled]):hover{z-index:1}.aui-dropdown-button__trigger.aui-button{border-bottom-left-radius:0;border-top-left-radius:0}.aui-dropdown-button__trigger.aui-button[disabled]{z-index:-1}.aui-dropdown-button__trigger.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button{margin-left:1px}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button.isPlain{margin-left:-1px}.aui-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button{margin-left:8px}"]
+                    styles: [".aui-dropdown-button{display:inline-block}.aui-dropdown-button--large .aui-dropdown-button__trigger .aui-button__content{padding:0 7px}.aui-dropdown-button--medium .aui-dropdown-button__trigger .aui-button__content{padding:0 5px}.aui-dropdown-button--mini .aui-dropdown-button__trigger .aui-button__content,.aui-dropdown-button--small .aui-dropdown-button__trigger .aui-button__content{padding:0 3px}.aui-dropdown-button__content.aui-button{border-bottom-right-radius:0;border-top-right-radius:0}.aui-dropdown-button__content.aui-button:not([disabled]):active,.aui-dropdown-button__content.aui-button:not([disabled]):focus,.aui-dropdown-button__content.aui-button:not([disabled]):hover{z-index:1}.aui-dropdown-button__trigger.aui-button{border-bottom-left-radius:0;border-top-left-radius:0}.aui-dropdown-button__trigger.aui-button[disabled]{z-index:-1}.aui-dropdown-button__trigger.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button{margin-left:var(--aui-border-m)}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button.isPlain{margin-left:-1px}.aui-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button{margin-left:var(--aui-spacing-m)}"]
                 },] }
     ];
     DropdownButtonComponent.propDecorators = {
@@ -5027,7 +5193,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-menu-group__title{display:inline-block;margin:0 0 4px;padding:4px 0;font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}aui-menu-group:not(:first-child) .aui-menu-group{margin-top:8px;padding-top:8px;border-top:1px solid #ededed}"]
+                    styles: [".aui-menu-group__title{display:inline-block;margin:0 0 var(--aui-spacing-s) 0;padding:var(--aui-spacing-s) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);color:rgb(var(--aui-color-n-4));font-weight:var(--aui-font-weight-bold)}aui-menu-group:not(:first-child) .aui-menu-group{margin-top:var(--aui-spacing-m);padding-top:var(--aui-spacing-m);border-top:1px solid rgb(var(--aui-color-n-8))}"]
                 },] }
     ];
 
@@ -5037,7 +5203,7 @@
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.bem = buildBem('aui-submenu');
             _this.trigger = exports.TooltipTrigger.Hover;
-            _this.size = ComponentSize.Medium;
+            _this.size = ComponentSize.Small;
             return _this;
         }
         Object.defineProperty(SubmenuComponent.prototype, "disabled", {
@@ -5064,7 +5230,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-submenu{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 12px;height:32px;font-size:14px;color:rgb(var(--aui-color-n-1));background-color:#fff;border-radius:2px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-submenu--default.isActive,.aui-submenu--default:hover{color:#007af5;background-color:#e6f2fe}.aui-submenu--primary{color:#007af5}.aui-submenu--primary.isActive,.aui-submenu--primary:hover{background-color:#e6f2fe}.aui-submenu--success{color:#00c261}.aui-submenu--success.isActive,.aui-submenu--success:hover{background-color:#e6f2fe}.aui-submenu--warning{color:#f5a300}.aui-submenu--warning.isActive,.aui-submenu--warning:hover{background-color:#fef6e6}.aui-submenu--danger{color:#eb0027}.aui-submenu--danger.isActive,.aui-submenu--danger:hover{background-color:#fde6e9}.aui-submenu[disabled],.aui-submenu[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-submenu aui-icon:first-child{margin-right:8px}aui-submenu:not(:first-child) .hasDivider{overflow:visible;margin-top:16px}aui-submenu:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:-8px;height:1px;background:#ededed;pointer-events:none}.aui-submenu{display:flex;justify-content:space-between;align-items:center;padding-right:4px}.aui-submenu__title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aui-submenu__arrow{margin-left:12px}.aui-sub-dropdown.aui-tooltip--end,.aui-sub-dropdown.aui-tooltip--start{margin:-8px 8px}"]
+                    styles: [".aui-submenu{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 var(--aui-spacing-l);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-submenu--default.isActive,.aui-submenu--default:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--default.isActive,.aui-submenu--primary{color:rgb(var(--aui-color-primary))}.aui-submenu--primary.isActive,.aui-submenu--primary:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--success{color:rgb(var(--aui-color-green))}.aui-submenu--success.isActive,.aui-submenu--success:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--warning{color:rgb(var(--aui-color-yellow))}.aui-submenu--warning.isActive,.aui-submenu--warning:hover{background-color:rgb(var(--aui-color-y-6))}.aui-submenu--danger{color:rgb(var(--aui-color-red))}.aui-submenu--danger.isActive,.aui-submenu--danger:hover{background-color:rgb(var(--aui-color-r-6))}.aui-submenu[disabled],.aui-submenu[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-submenu aui-icon:first-child{margin-right:var(--aui-spacing-m)}aui-submenu:not(:first-child) .hasDivider{overflow:visible;margin-top:var(--aui-spacing-xl)}aui-submenu:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:calc(0px - var(--aui-spacing-m));height:1px;background:rgb(var(--aui-color-n-8));pointer-events:none}.aui-submenu{display:flex;justify-content:space-between;align-items:center;padding-right:var(--aui-spacing-s)}.aui-submenu__title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aui-submenu__arrow{margin-left:var(--aui-spacing-l)}.aui-submenu--default.isActive{color:unset}.aui-sub-dropdown.aui-tooltip--end,.aui-sub-dropdown.aui-tooltip--start{margin:calc(0px - var(--aui-spacing-m)) var(--aui-spacing-m)}"]
                 },] }
     ];
     SubmenuComponent.propDecorators = {
@@ -5262,7 +5428,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-option{padding:0 7px;color:rgb(var(--aui-color-n-1));background-color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-option--large{height:40px;line-height:40px;font-size:16px}.aui-option--medium{height:32px;line-height:32px;font-size:14px}.aui-option--small{height:28px;line-height:28px;font-size:14px}.aui-option--mini{height:24px;line-height:24px;font-size:12px}.aui-option:not(.isMulti).isSelected{color:#007af5;background-color:#e6f2fe}.aui-option.isFocused,.aui-option:hover{background-color:#f2f8ff}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-option__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled).isFocused .aui-option__pointer,.aui-option:not(.isDisabled):hover .aui-option__pointer{border-color:#007af5}"]
+                    styles: [".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{height:var(--aui-inline-height-l);line-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{height:var(--aui-inline-height-m);line-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{height:var(--aui-inline-height-s);line-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-option--mini{height:var(--aui-inline-height-xs);line-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary))}.aui-option.isFocused,.aui-option:hover,.aui-option:not(.isMulti).isSelected{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-option__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled).isFocused .aui-option__pointer,.aui-option:not(.isDisabled):hover .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}"]
                 },] }
     ];
     OptionComponent.ctorParameters = function () { return [
@@ -5924,7 +6090,7 @@
     MultiSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-multi-select',
-                    template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <aui-icon\n      *ngIf=\"displayClearBtn\"\n      class=\"aui-multi-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      class=\"aui-multi-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n  </div>\n  <span\n    [hidden]=\"selectedValues.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span #inputValueMirror [class]=\"bem.element('mirror')\">\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              [icon]=\"\n                (selectAllStatus$ | async) === 'checked' ? 'check_s' : 'minus_s'\n              \"\n              [hidden]=\"!(selectAllStatus$ | async)\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <aui-icon\n      *ngIf=\"displayClearBtn\"\n      class=\"aui-multi-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      class=\"aui-multi-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n  </div>\n  <span\n    [hidden]=\"selectedValues.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span #inputValueMirror [class]=\"bem.element('mirror')\">\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              [icon]=\"\n                (selectAllStatus$ | async) === 'checked'\n                  ? 'check_s'\n                  : 'square_s'\n              \"\n              [hidden]=\"!(selectAllStatus$ | async)\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -5939,7 +6105,7 @@
                             useExisting: MultiSelectComponent,
                         },
                     ],
-                    styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));outline:none;text-overflow:ellipsis}@-webkit-keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}.aui-input:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-inner-spin-button,.aui-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.aui-input[type=number]{-moz-appearance:textfield}.aui-input::-moz-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:-ms-input-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input::placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input.isFocused,.aui-input:focus,.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input.isFocused,.aui-input:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-input[readonly]{cursor:default}.aui-input[disabled],.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important}.aui-input[disabled]{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}.aui-input.ng-invalid.ng-dirty.isFocused,.aui-input.ng-invalid.ng-dirty:focus,.ng-submitted .aui-input.ng-invalid.isFocused,.ng-submitted .aui-input.ng-invalid:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:#007af5;background-color:#e6f2fe}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:#00c261;background-color:#e6f9ef}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:#f5a300;background-color:#fef6e6}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:#eb0027;background-color:#fde6e9}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-2))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.hasBorder.aui-tag--primary{border-color:#007af5}.aui-tag.hasBorder.aui-tag--success{border-color:#00c261}.aui-tag.hasBorder.aui-tag--warning{border-color:#f5a300}.aui-tag.hasBorder.aui-tag--error{border-color:#eb0027}.aui-tag.hasBorder.aui-tag--info{background-color:#fafafa;border-color:#c8cacd}.aui-tag.isSolid.aui-tag--primary{background-color:#007af5}.aui-tag.isSolid.aui-tag--success{background-color:#00c261}.aui-tag.isSolid.aui-tag--warning{background-color:#f5a300}.aui-tag.isSolid.aui-tag--error{background-color:#eb0027}.aui-tag.isSolid.aui-tag--info{background-color:#c8cacd}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}", ".aui-option{padding:0 7px;color:rgb(var(--aui-color-n-1));background-color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-option--large{height:40px;line-height:40px;font-size:16px}.aui-option--medium{height:32px;line-height:32px;font-size:14px}.aui-option--small{height:28px;line-height:28px;font-size:14px}.aui-option--mini{height:24px;line-height:24px;font-size:12px}.aui-option:not(.isMulti).isSelected{color:#007af5;background-color:#e6f2fe}.aui-option.isFocused,.aui-option:hover{background-color:#f2f8ff}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-option__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled).isFocused .aui-option__pointer,.aui-option:not(.isDisabled):hover .aui-option__pointer{border-color:#007af5}.aui-option-container{padding:7px 0;border-radius:2px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-option-container__content{max-height:256px;position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-option-container__content .divider{border:none;border-top:1px solid #ededed}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-6));font-size:14px;text-align:center}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-n-1));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:#c8cacd;cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:#c8cacd;background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-n-6));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;font-size:12px;padding-left:1px}.aui-multi-select--large{min-height:40px;font-size:16px;padding:5px 11px 0}.aui-multi-select--large .aui-tag{margin:0 4px 5px 0}.aui-multi-select--medium{min-height:32px;font-size:14px;padding:5px 7px 0}.aui-multi-select--medium .aui-tag{margin:0 4px 5px 0}.aui-multi-select--small{min-height:28px;font-size:14px;padding:3px 7px 0}.aui-multi-select--small .aui-tag{margin:0 4px 3px 0}.aui-multi-select--mini{min-height:24px;font-size:12px;padding:1px 5px 0}.aui-multi-select--mini .aui-tag{margin:0 4px 1px 0}.aui-multi-select__suffix{right:7px}.aui-multi-select .aui-tag.aui-multi-select__input{width:1em;padding:0;border:none;outline:none;background:none;color:rgb(var(--aui-color-n-1));font-family:inherit;margin-top:-2px}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input,aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input{border-color:#eb0027!important}.aui-multi-select--large{padding-right:39px}.aui-multi-select--large .aui-multi-select__suffix{right:12px}.aui-multi-select--large.isClearable{padding-right:59px}.aui-multi-select--medium{padding-right:29px}.aui-multi-select--medium .aui-multi-select__suffix{right:8px}.aui-multi-select--medium.isClearable{padding-right:47px}.aui-multi-select--small{padding-right:29px}.aui-multi-select--small .aui-multi-select__suffix{right:8px}.aui-multi-select--small.isClearable{padding-right:47px}.aui-multi-select--mini{padding-right:23px}.aui-multi-select--mini .aui-multi-select__suffix{right:6px}.aui-multi-select--mini.isClearable{padding-right:39px}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-multi-select__indicator{color:rgb(var(--aui-color-n-4));cursor:default}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-multi-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-1))}"]
+                    styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1));outline:none;text-overflow:ellipsis}@-webkit-keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-n-1))}}.aui-input:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both;animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-inner-spin-button,.aui-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.aui-input[type=number]{-moz-appearance:textfield}.aui-input::-moz-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:-ms-input-placeholder{color:rgb(var(--aui-color-n-6))}.aui-input::placeholder{color:rgb(var(--aui-color-n-6))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input.isFocused,.aui-input:focus,.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input.isFocused,.aui-input:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-input[readonly]{cursor:default}.aui-input[disabled],.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important}.aui-input[disabled]{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}.aui-input.ng-invalid.ng-dirty.isFocused,.aui-input.ng-invalid.ng-dirty:focus,.ng-submitted .aui-input.ng-invalid.isFocused,.ng-submitted .aui-input.ng-invalid:focus{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}", ".aui-tag{display:inline-flex;border-radius:2px;border:1px solid transparent;max-width:300px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{height:32px;line-height:30px;font-size:14px;padding:0 15px}.aui-tag--large.isRound{border-radius:16px}.aui-tag--medium{height:28px;line-height:26px;font-size:14px;padding:0 11px}.aui-tag--medium.isRound{border-radius:14px}.aui-tag--small{height:24px;line-height:22px;font-size:12px;padding:0 7px}.aui-tag--small.isRound{border-radius:12px}.aui-tag--mini{height:20px;line-height:18px;font-size:12px;padding:0 7px}.aui-tag--mini.isRound{border-radius:10px}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:#e6f2fe;background-color:#007af5}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:#e6f9ef;background-color:#00c261}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:#fef6e6;background-color:#f5a300}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:#fde6e9;background-color:#eb0027}.aui-tag--info{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-2))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-8));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid,.aui-tag.isSolid .aui-tag__close .aui-icon:hover{color:#fff}.aui-tag.isSolid.aui-tag--primary{background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--success{background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--warning{background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--error{background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--info{background-color:rgb(var(--aui-color-n))}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:8px}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}", ".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{height:var(--aui-inline-height-l);line-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{height:var(--aui-inline-height-m);line-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{height:var(--aui-inline-height-s);line-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-option--mini{height:var(--aui-inline-height-xs);line-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary))}.aui-option.isFocused,.aui-option:hover,.aui-option:not(.isMulti).isSelected{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-option__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled).isFocused .aui-option__pointer,.aui-option:not(.isDisabled):hover .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}.aui-option-container{padding:var(--aui-select-options-padding) 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-option-container__content .divider{border:none;border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-n-1));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:#c8cacd;cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:#c8cacd;background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-n-6));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-multi-select--large{min-height:40px;font-size:16px;padding:5px 11px 0}.aui-multi-select--large .aui-tag{margin:0 4px 5px 0}.aui-multi-select--medium{min-height:32px;font-size:14px;padding:5px 7px 0}.aui-multi-select--medium .aui-tag{margin:0 4px 5px 0}.aui-multi-select--small{min-height:28px;font-size:14px;padding:3px 7px 0}.aui-multi-select--small .aui-tag{margin:0 4px 3px 0}.aui-multi-select--mini{min-height:24px;font-size:12px;padding:1px 5px 0}.aui-multi-select--mini .aui-tag{margin:0 4px 1px 0}.aui-multi-select__suffix{right:7px}.aui-multi-select .aui-tag.aui-multi-select__input{width:1em;padding:0;border:none;outline:none;background:none;color:rgb(var(--aui-color-n-1));font-family:inherit;font-size:inherit;margin-top:-2px}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input,aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}.ng-submitted aui-multi-select.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused,aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}.aui-multi-select--large{padding-right:calc(var(--aui-font-size-m) * 1 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 1)}.aui-multi-select--large .aui-multi-select__suffix{right:calc(var(--aui-border-m) + var(--aui-inline-padding-xs))}.aui-multi-select--large.isClearable{padding-right:calc(var(--aui-font-size-m) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-multi-select--medium{padding-right:calc(var(--aui-font-size-m) * 1 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 1)}.aui-multi-select--medium .aui-multi-select__suffix{right:calc(var(--aui-border-m) + var(--aui-inline-padding-xs))}.aui-multi-select--medium.isClearable{padding-right:calc(var(--aui-font-size-m) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-multi-select--small{padding-right:calc(var(--aui-font-size-s) * 1 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 1)}.aui-multi-select--small .aui-multi-select__suffix{right:calc(var(--aui-border-m) + var(--aui-inline-padding-xs))}.aui-multi-select--small.isClearable{padding-right:calc(var(--aui-font-size-s) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-multi-select--mini{padding-right:calc(var(--aui-font-size-s) * 1 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 1)}.aui-multi-select--mini .aui-multi-select__suffix{right:calc(var(--aui-border-m) + var(--aui-inline-padding-xs))}.aui-multi-select--mini.isClearable{padding-right:calc(var(--aui-font-size-s) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-multi-select__indicator{color:rgb(var(--aui-color-n-4));cursor:default}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-multi-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-2))}.aui-multi-select .aui-tag--info{background-color:rgb(var(--aui-color-n-10))}"]
                 },] }
     ];
     MultiSelectComponent.ctorParameters = function () { return [
@@ -5970,11 +6136,11 @@
     OptionGroupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-option-group',
-                    template: "<div [hidden]=\"!(hasVisibleOption$ | async)\" class=\"aui-option-group\">\n  <ng-content select=\"[auiOptionGroupTitle]\"></ng-content>\n  <div class=\"aui-option-group__content\"><ng-content></ng-content></div>\n</div>\n",
+                    template: "<div [hidden]=\"!(hasVisibleOption$ | async)\" class=\"aui-option-group\">\n  <div class=\"aui-option-group__title-wrapper\">\n    <ng-content select=\"[auiOptionGroupTitle]\"></ng-content>\n  </div>\n  <div class=\"aui-option-group__content\"><ng-content></ng-content></div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-option-group__title{font-size:12px;line-height:16px;padding:4px 7px;color:rgb(var(--aui-color-n-4))}aui-option-group:not(:first-child) .aui-option-group{margin-top:8px;padding-top:8px;border-top:1px solid #ededed}"]
+                    styles: [".aui-option-group__title{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding:calc(var(--aui-select-options-padding) / 2) var(--aui-select-options-padding);color:rgb(var(--aui-color-n-4));width:100%;background-color:rgb(var(--aui-color-n-10));position:relative;z-index:1}.aui-option-group__title-wrapper{position:-webkit-sticky;position:sticky;top:0;margin-top:var(--aui-border-m);height:calc(calc(var(--aui-line-height-s) + var(--aui-select-options-padding)) + var(--aui-border-m))}.aui-option-group__title-wrapper:after{position:-webkit-sticky;position:sticky;content:\" \";width:100%;height:var(--aui-border-m);display:block;background-color:rgb(var(--aui-color-n-8));top:calc(var(--aui-line-height-s) + var(--aui-select-options-padding));margin-top:-1px}aui-option-group:not(:first-child) .aui-option-group{padding-top:var(--aui-select-options-padding);border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}aui-option-group:not(:last-child) .aui-option-group{padding-bottom:var(--aui-select-options-padding)}"]
                 },] }
     ];
     OptionGroupComponent.propDecorators = {
@@ -6011,6 +6177,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SelectComponent.prototype, "containerClass", {
+            get: function () {
+                return "aui-option-container aui-option-container--" + this.size;
+            },
+            enumerable: false,
+            configurable: true
+        });
         SelectComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
             _super.prototype.ngAfterContentInit.call(this);
@@ -6074,7 +6247,7 @@
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-select',
-                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <aui-icon\n      *ngIf=\"isClearable(hasSelected$ | async)\"\n      auiInputSuffix\n      class=\"aui-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      auiInputSuffix\n      class=\"aui-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <aui-icon\n      *ngIf=\"isClearable(hasSelected$ | async)\"\n      auiInputSuffix\n      class=\"aui-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      auiInputSuffix\n      class=\"aui-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -6089,7 +6262,7 @@
                             useExisting: SelectComponent,
                         },
                     ],
-                    styles: [".aui-option-container{padding:7px 0;border-radius:2px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-option-container__content{max-height:256px;position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-option-container__content .divider{border:none;border-top:1px solid #ededed}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-6));font-size:14px;text-align:center}.aui-select{display:inline-block;position:relative;width:100%}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-6))}.aui-select__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aui-select.isClearable .aui-input-group .aui-input--large{padding-right:50px}.aui-select.isClearable .aui-input-group .aui-input--medium,.aui-select.isClearable .aui-input-group .aui-input--small{padding-right:46px}.aui-select.isClearable .aui-input-group .aui-input--mini{padding-right:42px}.aui-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-1))}.aui-select__input.aui-input[readonly]{background-color:#fff;border-color:#c8cacd;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:#007af5}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:#c8cacd}.ng-submitted aui-select.ng-invalid .aui-input,aui-select.ng-invalid.ng-dirty .aui-input{border-color:#eb0027!important}"]
+                    styles: [".aui-option-container{padding:var(--aui-select-options-padding) 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-option-container__content .divider{border:none;border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-select{display:inline-block;position:relative;width:var(--aui-select-width)}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-4))}.aui-select__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-select.isClearable .aui-input-group .aui-input--large{padding-right:calc(var(--aui-font-size-l) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-select.isClearable .aui-input-group .aui-input--medium,.aui-select.isClearable .aui-input-group .aui-input--small{padding-right:calc(var(--aui-font-size-m) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-select.isClearable .aui-input-group .aui-input--mini{padding-right:calc(var(--aui-font-size-s) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-1))}.aui-select__input.aui-input[readonly]{background-color:rgb(var(--aui-color-n-9));border-color:rgb(var(--aui-color-n-7))!important;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:rgb(var(--aui-color-primary))}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))}.ng-submitted aui-select.ng-invalid .aui-input,aui-select.ng-invalid.ng-dirty .aui-input{border-color:rgb(var(--aui-color-red))!important}"]
                 },] }
     ];
     SelectComponent.propDecorators = {
@@ -6259,12 +6432,12 @@
             var _this = this;
             this.intl = intl;
             this.cdr = cdr;
+            this.bem = buildBem('aui-paginator');
             this.currentPage = 1;
             this.pageSize = 20;
             this.pageSizeOptions = [20, 50, 100];
             this.total = 0;
             this.layout = 'total,pager,sizes';
-            this.size = ComponentSize.Small;
             this.disabled = false;
             this.currentPageChange = new i0.EventEmitter();
             this.pageSizeChange = new i0.EventEmitter();
@@ -6352,11 +6525,11 @@
     PaginatorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-paginator',
-                    template: "<div class=\"aui-paginator aui-paginator--{{ size }}\">\n  <div *ngFor=\"let layout of getLayoutArr()\" class=\"aui-paginator__layout\">\n    <div *ngIf=\"layout === 'pager'\" class=\"aui-paginator__pager\">\n      <aui-button-group>\n        <button\n          class=\"aui-paginator__navigator\"\n          aui-button\n          [plain]=\"true\"\n          [square]=\"true\"\n          [size]=\"size\"\n          [disabled]=\"disabled || currentPage <= 1\"\n          (click)=\"navigate(-1)\"\n        >\n          <aui-icon icon=\"angle_left\"></aui-icon>\n        </button>\n        <button\n          class=\"aui-paginator__page\"\n          [aui-button]=\"currentPage === 1 ? 'primary' : 'default'\"\n          [plain]=\"!(currentPage === 1)\"\n          [size]=\"size\"\n          [disabled]=\"disabled\"\n          (click)=\"jumpTo(1)\"\n        >\n          1\n        </button>\n        <button\n          *ngIf=\"pageCount > 7 && currentPage > 4\"\n          class=\"aui-paginator__fast-navigator\"\n          aui-button\n          [plain]=\"true\"\n          [square]=\"true\"\n          [size]=\"size\"\n          [disabled]=\"disabled\"\n          (click)=\"navigate(-5)\"\n        >\n          <aui-icon icon=\"ellipsis_h_s\"></aui-icon>\n          <aui-icon icon=\"angle_double_left\"></aui-icon>\n        </button>\n        <button\n          *ngFor=\"let page of getCenterPages(); trackBy: trackByIndex\"\n          class=\"aui-paginator__page\"\n          [aui-button]=\"currentPage === page ? 'primary' : 'default'\"\n          [plain]=\"!(currentPage === page)\"\n          [size]=\"size\"\n          [disabled]=\"disabled\"\n          (click)=\"jumpTo(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          *ngIf=\"pageCount > 7 && currentPage < pageCount - 3\"\n          class=\"aui-paginator__fast-navigator\"\n          aui-button\n          [plain]=\"true\"\n          [square]=\"true\"\n          [size]=\"size\"\n          [disabled]=\"disabled\"\n          (click)=\"navigate(5)\"\n        >\n          <aui-icon icon=\"ellipsis_h_s\"></aui-icon>\n          <aui-icon icon=\"angle_double_right\"></aui-icon>\n        </button>\n        <button\n          *ngIf=\"pageCount > 1\"\n          class=\"aui-paginator__page\"\n          [aui-button]=\"currentPage === pageCount ? 'primary' : 'default'\"\n          [plain]=\"!(currentPage === pageCount)\"\n          [size]=\"size\"\n          [disabled]=\"disabled\"\n          (click)=\"jumpTo(pageCount)\"\n        >\n          {{ pageCount }}\n        </button>\n        <button\n          class=\"aui-paginator__navigator\"\n          aui-button\n          [square]=\"true\"\n          [plain]=\"true\"\n          [size]=\"size\"\n          [disabled]=\"disabled || currentPage >= pageCount\"\n          (click)=\"navigate(1)\"\n        >\n          <aui-icon icon=\"angle_right\"></aui-icon>\n        </button>\n      </aui-button-group>\n    </div>\n    <div *ngIf=\"layout === 'total'\" class=\"aui-paginator__total\">\n      {{ intl.getTotalLabel(total) }}\n    </div>\n    <div *ngIf=\"layout === 'sizes'\" class=\"aui-paginator__sizes\">\n      <aui-select\n        [size]=\"size\"\n        [disabled]=\"disabled\"\n        [value]=\"pageSize\"\n        [filterable]=\"false\"\n        (valueChange)=\"changePageSize($event)\"\n      >\n        <aui-option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n          {{ size }}\n        </aui-option>\n      </aui-select>\n      <span>{{ intl.itemsPerPageLabel }}</span>\n    </div>\n    <div *ngIf=\"layout === 'jumper'\" class=\"aui-paginator__jumper\">\n      <span *ngIf=\"intl.jumperLabelPrefix\">{{ intl.jumperLabelPrefix }}</span>\n      <input\n        aui-input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"pageCount\"\n        [size]=\"size\"\n        [value]=\"currentPage\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydown($event)\"\n      />\n      <span *ngIf=\"intl.jumperLabelSuffix\">{{ intl.jumperLabelSuffix }}</span>\n    </div>\n    <div *ngIf=\"layout === 'content'\" class=\"aui-paginator__content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div [class]=\"bem.block()\">\n  <div *ngFor=\"let layout of getLayoutArr()\" [class]=\"bem.element('layout')\">\n    <div *ngIf=\"layout === 'pager'\" [class]=\"bem.element('pager')\">\n      <button\n        [ngClass]=\"bem.element('navigator')\"\n        aui-button\n        [disabled]=\"disabled || currentPage <= 1\"\n        (click)=\"navigate(-1)\"\n      >\n        <aui-icon icon=\"angle_left\"></aui-icon>\n      </button>\n      <button\n        [ngClass]=\"bem.element('page')\"\n        [aui-button]=\"currentPage === 1 ? 'primary' : 'default'\"\n        [plain]=\"!(currentPage === 1)\"\n        [disabled]=\"disabled\"\n        (click)=\"jumpTo(1)\"\n      >\n        1\n      </button>\n      <button\n        *ngIf=\"pageCount > 7 && currentPage > 4\"\n        [ngClass]=\"bem.element('fast-navigator')\"\n        aui-button\n        [disabled]=\"disabled\"\n        (click)=\"navigate(-5)\"\n      >\n        <aui-icon icon=\"ellipsis_h_s\"></aui-icon>\n        <aui-icon icon=\"angle_double_left\"></aui-icon>\n      </button>\n      <button\n        *ngFor=\"let page of getCenterPages(); trackBy: trackByIndex\"\n        [ngClass]=\"bem.element('page')\"\n        [aui-button]=\"currentPage === page ? 'primary' : 'default'\"\n        [plain]=\"!(currentPage === page)\"\n        [disabled]=\"disabled\"\n        (click)=\"jumpTo(page)\"\n      >\n        {{ page }}\n      </button>\n      <button\n        *ngIf=\"pageCount > 7 && currentPage < pageCount - 3\"\n        [ngClass]=\"bem.element('fast-navigator')\"\n        aui-button\n        [disabled]=\"disabled\"\n        (click)=\"navigate(5)\"\n      >\n        <aui-icon icon=\"ellipsis_h_s\"></aui-icon>\n        <aui-icon icon=\"angle_double_right\"></aui-icon>\n      </button>\n      <button\n        *ngIf=\"pageCount > 1\"\n        [ngClass]=\"bem.element('page')\"\n        [aui-button]=\"currentPage === pageCount ? 'primary' : 'default'\"\n        [plain]=\"!(currentPage === pageCount)\"\n        [disabled]=\"disabled\"\n        (click)=\"jumpTo(pageCount)\"\n      >\n        {{ pageCount }}\n      </button>\n      <button\n        aui-button\n        [ngClass]=\"bem.element('navigator')\"\n        [disabled]=\"disabled || currentPage >= pageCount\"\n        (click)=\"navigate(1)\"\n      >\n        <aui-icon icon=\"angle_right\"></aui-icon>\n      </button>\n    </div>\n    <div *ngIf=\"layout === 'total'\" [class]=\"bem.element('total')\">\n      {{ intl.getTotalLabel(total) }}\n    </div>\n    <div *ngIf=\"layout === 'sizes'\" [class]=\"bem.element('sizes')\">\n      <aui-select\n        [disabled]=\"disabled\"\n        [value]=\"pageSize\"\n        [filterable]=\"false\"\n        (valueChange)=\"changePageSize($event)\"\n      >\n        <aui-option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n          {{ size }}\n        </aui-option>\n      </aui-select>\n      <span>{{ intl.itemsPerPageLabel }}</span>\n    </div>\n    <div *ngIf=\"layout === 'jumper'\" [class]=\"bem.element('jumper')\">\n      <span *ngIf=\"intl.jumperLabelPrefix\">{{ intl.jumperLabelPrefix }}</span>\n      <input\n        aui-input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"pageCount\"\n        [value]=\"currentPage\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydown($event)\"\n      />\n      <span *ngIf=\"intl.jumperLabelSuffix\">{{ intl.jumperLabelSuffix }}</span>\n    </div>\n    <div *ngIf=\"layout === 'content'\" [class]=\"bem.element('content')\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-paginator{display:inline-flex;align-items:center;color:rgb(var(--aui-color-n-1))}.aui-paginator__page.aui-button .aui-button__content{padding:0 3px}.aui-paginator--large{font-size:16px}.aui-paginator--large .aui-paginator__page{min-width:40px}.aui-paginator--medium{font-size:14px}.aui-paginator--medium .aui-paginator__page{min-width:32px}.aui-paginator--small{font-size:14px}.aui-paginator--small .aui-paginator__page{min-width:28px}.aui-paginator--mini{font-size:12px}.aui-paginator--mini .aui-paginator__page{min-width:24px}.aui-paginator__fast-navigator[hidden]{display:none}.aui-paginator__fast-navigator .aui-icon{margin:0}.aui-paginator__fast-navigator:hover aui-icon:first-child,.aui-paginator__fast-navigator aui-icon:last-child{display:none}.aui-paginator__fast-navigator:hover aui-icon:last-child{display:inline}.aui-paginator__sizes{display:inline-flex;align-items:center}.aui-paginator__sizes .aui-select{width:68px;margin-right:4px}.aui-paginator__jumper .aui-input{width:60px}.aui-paginator__jumper input+span,.aui-paginator__jumper span+input{margin-left:4px}.aui-paginator .aui-button-group .aui-button--primary{z-index:2}.aui-paginator__layout{display:inline-block}.aui-paginator__layout+.aui-paginator__layout{margin-left:12px}"]
+                    styles: [".aui-paginator{display:inline-flex;align-items:center;color:rgb(var(--aui-color-n-1))}.aui-paginator .aui-button{width:var(--aui-line-height-xl);height:var(--aui-line-height-xl);border:unset}.aui-paginator .aui-button .aui-button__content{padding:unset}.aui-paginator__fast-navigator[hidden]{display:none}.aui-paginator__fast-navigator .aui-icon{margin:0}.aui-paginator__fast-navigator:hover aui-icon:first-child,.aui-paginator__fast-navigator aui-icon:last-child{display:none}.aui-paginator__fast-navigator:hover aui-icon:last-child{display:inline}.aui-paginator__sizes{display:inline-flex;align-items:center}.aui-paginator__sizes .aui-select{width:80px;margin-right:var(--aui-spacing-s)}.aui-paginator__jumper .aui-input{width:80px}.aui-paginator__jumper span+input{margin-left:var(--aui-spacing-m)}.aui-paginator__jumper input+span{margin-left:var(--aui-spacing-s)}.aui-paginator__total{font-size:var(--aui-font-size-m)}.aui-paginator__navigator.aui-button{background-color:rgb(var(--aui-color-n-8))}.aui-paginator__navigator.aui-button aui-icon{font-size:var(--aui-font-size-l)}.aui-paginator__pager{border:1px solid rgb(var(--aui-color-n-7));padding:3px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-9))}.aui-paginator__page{margin:0 var(--aui-spacing-s)}.aui-paginator__layout{display:inline-block}.aui-paginator__layout+.aui-paginator__layout{margin-left:var(--aui-spacing-l)}"]
                 },] }
     ];
     PaginatorComponent.ctorParameters = function () { return [
@@ -6371,7 +6544,6 @@
         total: [{ type: i0.Input }],
         length: [{ type: i0.Input }],
         layout: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         currentPageChange: [{ type: i0.Output }],
         pageSizeChange: [{ type: i0.Output }]
@@ -6847,7 +7019,7 @@
         { type: i0.Injectable }
     ];
     MessageService.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.Injector },
         { type: i0.ApplicationRef },
         { type: i0.ComponentFactoryResolver },
@@ -6861,7 +7033,7 @@
     }());
     MessageModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, overlay.OverlayModule, IconModule],
+                    imports: [common.CommonModule, i1.OverlayModule, IconModule],
                     declarations: [MessageWrapperComponent, MessageComponent],
                     entryComponents: [MessageWrapperComponent, MessageComponent],
                     providers: [MessageService],
@@ -6976,12 +7148,12 @@
     NotificationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-notification',
-                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n>\n  <div [class]=\"bem.element('icon')\"><aui-icon [icon]=\"icon\"></aui-icon></div>\n  <div [class]=\"bem.element('body')\">\n    <div *ngIf=\"title\" [class]=\"bem.element('title')\">{{ title }}</div>\n    <div *ngIf=\"content\" [class]=\"bem.element('content')\">{{ content }}</div>\n    <ng-template cdkPortalHost></ng-template>\n    <ng-template #modalComponent></ng-template>\n  </div>\n  <div [class]=\"bem.element('close')\">\n    <div *ngIf=\"duration <= 0 || isHover\" (click)=\"remove()\">\n      <aui-icon icon=\"close\"></aui-icon>\n    </div>\n    <div *ngIf=\"duration > 0 && !isHover\">{{ remains > 0 ? remains : 1 }}s</div>\n  </div>\n  <div *ngIf=\"footerPortal\" [class]=\"bem.element('footer')\">\n    <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n  </div>\n</div>\n",
+                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n>\n  <div [class]=\"bem.element('icon')\"><aui-icon [icon]=\"icon\"></aui-icon></div>\n  <div [class]=\"bem.element('body')\">\n    <div *ngIf=\"title\" [class]=\"bem.element('title')\">{{ title }}</div>\n    <div *ngIf=\"content\" [class]=\"bem.element('content')\">{{ content }}</div>\n    <ng-template cdkPortalHost></ng-template>\n    <ng-template #modalComponent></ng-template>\n  </div>\n  <div [class]=\"bem.element('close')\">\n    <div\n      *ngIf=\"duration <= 0 || isHover\"\n      [class]=\"bem.element('remove')\"\n      (click)=\"remove()\"\n    >\n      <aui-icon icon=\"close\"></aui-icon>\n    </div>\n    <div *ngIf=\"duration > 0 && !isHover\" [class]=\"bem.element('duration')\">\n      {{ remains > 0 ? remains : 1 }}s\n    </div>\n  </div>\n  <div *ngIf=\"footerPortal\" [class]=\"bem.element('footer')\">\n    <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n  </div>\n</div>\n",
                     animations: [MessageAnimations.inOut],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane.aui-notification-overlay-pane{z-index:1001}.aui-notification{margin:0 20px 10px 0;display:flex;flex-wrap:wrap;width:400px;position:relative;border-radius:4px;padding:20px 16px 20px 20px;align-items:flex-start;background-color:#fff;box-shadow:0 4px 16px 0 rgba(var(--aui-color-n-1),.2)}.aui-notification__icon{font-size:16px;width:16px;line-height:24px}.aui-notification--success{border-left:4px solid #00c261}.aui-notification--success .aui-notification__icon{color:#00c261}.aui-notification--error{border-left:4px solid #eb0027}.aui-notification--error .aui-notification__icon{color:#eb0027}.aui-notification--warning{border-left:4px solid #f5a300}.aui-notification--warning .aui-notification__icon{color:#f5a300}.aui-notification--info{border-left:4px solid #007af5}.aui-notification--info .aui-notification__icon{color:#007af5}.aui-notification__body{margin:0 16px 0 8px;width:308px}.aui-notification__title{font-size:18px;text-align:left;color:rgb(var(--aui-color-n-1));line-height:24px;word-break:break-word}.aui-notification__title:not(:only-child){margin-bottom:6px}.aui-notification__content{font-size:14px;line-height:20px;text-align:left;color:rgb(var(--aui-color-n-2));max-height:140px;overflow:auto;overflow-wrap:break-word;padding-right:4px;margin-top:2px}.aui-notification__content::-webkit-scrollbar{width:4px;height:4px}.aui-notification__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-notification__close{font-size:var(--aui-font-size-s);right:10px;width:12px;color:rgb(var(--aui-color-n-4));line-height:var(--aui-line-height-l);cursor:pointer}.aui-notification__close:hover{color:rgb(var(--aui-color-n-2))}.aui-notification__svg{position:absolute;color:#e2e2e2}.aui-notification__footer{width:360px;margin-top:12px;word-break:break-all}"]
+                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane.aui-notification-overlay-pane{z-index:1001}.aui-notification{margin:0 20px 10px 0;display:flex;flex-wrap:wrap;width:400px;position:relative;border-radius:4px;padding:20px 16px 20px 20px;align-items:flex-start;background-color:#fff;box-shadow:0 4px 16px 0 rgba(var(--aui-color-n-1),.2)}.aui-notification__icon{font-size:16px;width:16px;line-height:24px}.aui-notification--success{border-left:4px solid #00c261}.aui-notification--success .aui-notification__icon{color:#00c261}.aui-notification--error{border-left:4px solid #eb0027}.aui-notification--error .aui-notification__icon{color:#eb0027}.aui-notification--warning{border-left:4px solid #f5a300}.aui-notification--warning .aui-notification__icon{color:#f5a300}.aui-notification--info{border-left:4px solid #007af5}.aui-notification--info .aui-notification__icon{color:#007af5}.aui-notification__body{margin:0 16px 0 8px;width:304px}.aui-notification__title{font-size:18px;text-align:left;color:rgb(var(--aui-color-n-1));line-height:24px;word-break:break-word}.aui-notification__title:not(:only-child){margin-bottom:6px}.aui-notification__content{font-size:14px;line-height:20px;text-align:left;color:rgb(var(--aui-color-n-2));max-height:140px;overflow:auto;overflow-wrap:break-word;padding-right:4px;margin-top:2px}.aui-notification__content::-webkit-scrollbar{width:4px;height:4px}.aui-notification__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-notification__close{right:10px;width:16px;color:rgb(var(--aui-color-n-4));line-height:var(--aui-line-height-l);cursor:pointer}.aui-notification__close:hover{color:rgb(var(--aui-color-n-2))}.aui-notification__remove{font-size:var(--aui-font-size-l)}.aui-notification__duration{font-size:var(--aui-font-size-m)}.aui-notification__svg{position:absolute;color:#e2e2e2}.aui-notification__footer{width:360px;margin-top:12px;word-break:break-all}"]
                 },] }
     ];
     NotificationComponent.ctorParameters = function () { return [
@@ -7013,7 +7185,7 @@
         { type: i0.Injectable }
     ];
     NotificationService.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.Injector },
         { type: i0.ApplicationRef },
         { type: i0.ComponentFactoryResolver },
@@ -7027,7 +7199,7 @@
     }());
     NotificationModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule, IconModule],
+                    imports: [common.CommonModule, i1.OverlayModule, portal.PortalModule, IconModule],
                     declarations: [NotificationWrapperComponent, NotificationComponent],
                     entryComponents: [NotificationWrapperComponent, NotificationComponent],
                     providers: [NotificationService],
@@ -7169,6 +7341,23 @@
     TabLabelWrapperDirective.propDecorators = {
         disabled: [{ type: i0.Input }]
     };
+    var TabTitleDirective = /** @class */ (function (_super) {
+        __extends(TabTitleDirective, _super);
+        // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+        function TabTitleDirective(templateRef, viewContainerRef) {
+            return _super.call(this, templateRef, viewContainerRef) || this;
+        }
+        return TabTitleDirective;
+    }(portal.CdkPortal));
+    TabTitleDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiTabTitle]',
+                },] }
+    ];
+    TabTitleDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef },
+        { type: i0.ViewContainerRef }
+    ]; };
     /**
      * The portal host directive for the contents of the tab.
      */
@@ -7605,11 +7794,11 @@
     TabHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-tab-header',
-                    template: "<div [ngClass]=\"bem.block(type, size)\">\n  <div [ngClass]=\"bem.element('pagination-wrapper')\" #paginationWrapper>\n    <div\n      *ngIf=\"_showPaginationControls\"\n      (click)=\"_scrollHeader('before')\"\n      [attr.disabled]=\"_disableScrollBefore ? '' : null\"\n      [ngClass]=\"bem.element('pagination-button')\"\n    >\n      <aui-icon icon=\"angle_left\"></aui-icon>\n    </div>\n    <div\n      [ngClass]=\"bem.element('tab-list-container')\"\n      (keydown)=\"_handleKeydown($event)\"\n      #tabListContainer\n    >\n      <div\n        role=\"tablist\"\n        (cdkObserveContent)=\"_onContentChanges()\"\n        [ngClass]=\"bem.element('tab-list')\"\n        #tabList\n      >\n        <div [ngClass]=\"bem.element('labels')\"><ng-content></ng-content></div>\n        <aui-tab-header-active-indicator\n          [type]=\"type\"\n        ></aui-tab-header-active-indicator>\n      </div>\n    </div>\n    <div\n      *ngIf=\"_showPaginationControls\"\n      (click)=\"_scrollHeader('after')\"\n      [attr.disabled]=\"_disableScrollAfter ? '' : null\"\n      [ngClass]=\"bem.element('pagination-button')\"\n    >\n      <aui-icon icon=\"angle_right\"></aui-icon>\n    </div>\n  </div>\n  <!-- If there is addon template, use it. -->\n  <ng-container *ngIf=\"_showAddon\">\n    <div [ngClass]=\"bem.element('addon')\">\n      <ng-template [cdkPortalOutlet]=\"_headerAddon\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n",
+                    template: "<div [ngClass]=\"bem.block(type, size)\">\n  <ng-container *ngIf=\"_title\">\n    <div [ngClass]=\"bem.element('title')\">\n      <ng-template [cdkPortalOutlet]=\"_title\"></ng-template>\n    </div>\n  </ng-container>\n  <div [ngClass]=\"bem.element('header-wrapper')\">\n    <div [ngClass]=\"bem.element('pagination-wrapper')\" #paginationWrapper>\n      <div\n        *ngIf=\"_showPaginationControls\"\n        (click)=\"_scrollHeader('before')\"\n        [attr.disabled]=\"_disableScrollBefore ? '' : null\"\n        [ngClass]=\"bem.element('pagination-button')\"\n      >\n        <aui-icon icon=\"angle_left\"></aui-icon>\n      </div>\n      <div\n        [ngClass]=\"bem.element('tab-list-container')\"\n        (keydown)=\"_handleKeydown($event)\"\n        #tabListContainer\n      >\n        <div\n          role=\"tablist\"\n          (cdkObserveContent)=\"_onContentChanges()\"\n          [ngClass]=\"bem.element('tab-list')\"\n          #tabList\n        >\n          <div [ngClass]=\"bem.element('labels')\"><ng-content></ng-content></div>\n          <aui-tab-header-active-indicator\n            [type]=\"type\"\n          ></aui-tab-header-active-indicator>\n        </div>\n      </div>\n      <div\n        *ngIf=\"_showPaginationControls\"\n        (click)=\"_scrollHeader('after')\"\n        [attr.disabled]=\"_disableScrollAfter ? '' : null\"\n        [ngClass]=\"bem.element('pagination-button')\"\n      >\n        <aui-icon icon=\"angle_right\"></aui-icon>\n      </div>\n    </div>\n    <!-- If there is addon template, use it. -->\n    <ng-container *ngIf=\"_showAddon\">\n      <div [ngClass]=\"bem.element('addon')\">\n        <ng-template [cdkPortalOutlet]=\"_headerAddon\"></ng-template>\n      </div>\n    </ng-container>\n  </div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".aui-tab-header{display:flex;align-items:center;flex-shrink:0;position:relative;background-color:#fff}.aui-tab-header--large .aui-tab-label{font-size:18px;padding:16px 20px}.aui-tab-header--medium .aui-tab-label{font-size:16px;padding:12px 20px}.aui-tab-header--small .aui-tab-label{font-size:14px;padding:8px 16px}.aui-tab-header--card{background-color:#fafafa;border:1px solid #ededed}.aui-tab-header--line{border-bottom:1px solid #ededed}.aui-tab-header__pagination-wrapper{display:flex;overflow:hidden;flex-grow:1;align-items:center;position:relative;margin:-1px}.aui-tab-header__pagination-button{width:32px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;z-index:3;box-shadow:0 0 4px #ccc;opacity:.6;transition:box-shadow .3s,opacity .3s,color .3s}.aui-tab-header__pagination-button:hover{opacity:1;color:#007af5}.aui-tab-header__pagination-button:first-of-type{margin-right:1px}.aui-tab-header__pagination-button:last-of-type{margin-left:1px}.aui-tab-header__pagination-button[disabled]{cursor:default;box-shadow:none;opacity:.1}.aui-tab-header__tab-list-container{display:flex;flex-grow:1;overflow:hidden;position:relative;z-index:1}.aui-tab-header__tab-list{flex-grow:1;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1)}.aui-tab-header__labels{display:flex}.aui-tab-header__labels:focus{outline:none}.aui-tab-header__addon{display:inline-flex;align-items:center;justify-content:center;margin:0 8px}.aui-tab-header__spacer{flex:1 1 0}.aui-tab-label{position:relative;cursor:pointer;box-sizing:border-box;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;color:rgb(var(--aui-color-n-1));z-index:2;opacity:.6;transition:opacity .3s}.aui-tab-label.isActive,.aui-tab-label:focus{outline:none}.aui-tab-label.isActive:not(.aui-tab-label--disabled),.aui-tab-label:focus:not(.aui-tab-label--disabled){opacity:1}.aui-tab-label.aui-tab-label--disabled{cursor:default;opacity:.2}.aui-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.aui-tab-label__close{margin-left:8px;font-size:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:rgb(var(--aui-color-n-4))}.aui-tab-label__close:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-tab-label.cdk-focused:not(.cdk-mouse-focused){box-shadow:inset 0 0 0 3px rgba(0,122,245,.3)}aui-tab-header-active-indicator{display:flex;height:100%;position:absolute;top:0;pointer-events:none;transition:all .3s cubic-bezier(.35,0,.25,1)}.aui-tab-header-active-indicator{position:relative;flex:1;height:100%;z-index:1}.aui-tab-header-active-indicator:after{content:\"\";position:absolute;display:block;background:#007af5;height:2px}.aui-tab-header-active-indicator--line:after{width:100%;left:0;bottom:0}.aui-tab-header-active-indicator--card{border:1px solid #ededed;border-top:none;border-bottom:none;background:#fff}.aui-tab-header-active-indicator--card:after{width:calc(100% + 2px);top:0;left:-1px}"]
+                    styles: [".aui-tab-header{display:flex;flex-direction:column;flex-shrink:0;position:relative;background-color:rgb(var(--aui-color-n-10))}.aui-tab-header--large .aui-tab-label{font-size:18px;padding:16px 20px;line-height:24px}.aui-tab-header--medium .aui-tab-label{font-size:16px;padding:12px 20px;line-height:22px}.aui-tab-header--small .aui-tab-label{font-size:14px;padding:8px 16px;line-height:20px}.aui-tab-header__header-wrapper{display:flex;flex-shrink:0;position:relative}.aui-tab-header__title{display:flex;justify-content:space-between;color:rgb(var(--aui-color-n-1));font-size:20px;margin-inline:20px;padding-block:20px;font-weight:500;border-bottom:1px solid rgb(var(--aui-color-n-8));line-height:32px}.aui-tab-header--card{background-color:rgb(var(--aui-color-n-9))}.aui-tab-header--line{border-radius:4px;box-shadow:0 0 4px 0 rgba(50,52,55,.1);background-color:rgb(var(--aui-color-n-10))}.aui-tab-header__pagination-wrapper{display:flex;overflow:hidden;flex-grow:1;align-items:center;position:relative}.aui-tab-header__pagination-button{width:32px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;z-index:3;box-shadow:0 0 4px #ccc;opacity:.6;transition:box-shadow .3s,opacity .3s,color .3s}.aui-tab-header__pagination-button:hover{opacity:1;color:rgb(var(--aui-color-primary))}.aui-tab-header__pagination-button:first-of-type{margin-right:1px}.aui-tab-header__pagination-button:last-of-type{margin-left:1px}.aui-tab-header__pagination-button[disabled]{cursor:default;box-shadow:none;opacity:.1}.aui-tab-header__tab-list-container{display:flex;flex-grow:1;overflow:hidden;position:relative;z-index:1}.aui-tab-header__tab-list{flex-grow:1;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1)}.aui-tab-header__labels{display:flex}.aui-tab-header__labels:focus{outline:none}.aui-tab-header__addon{display:inline-flex;align-items:center;justify-content:center;margin:0 8px}.aui-tab-header__spacer{flex:1 1 0}.aui-tab-label{position:relative;cursor:pointer;box-sizing:border-box;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;color:rgb(var(--aui-color-n-2));font-weight:400;z-index:2;transition:opacity .3s}.aui-tab-label.isActive,.aui-tab-label:focus{outline:none}.aui-tab-label:not(.aui-tab-label--disabled).isActive{font-weight:500}.aui-tab-label:not(.aui-tab-label--disabled).isActive,.aui-tab-label:not(.aui-tab-label--disabled):hover{color:rgb(var(--aui-color-primary))}.aui-tab-label.aui-tab-label--disabled{cursor:not-allowed;opacity:.2}.aui-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.aui-tab-label__close{margin-left:8px;font-size:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:rgb(var(--aui-color-n-4));transition:all .3s ease}.aui-tab-label__close:hover{color:rgb(var(--aui-color-n-9));background-color:rgb(var(--aui-color-n-4))}.aui-tab-label.cdk-focused:not(.cdk-mouse-focused){box-shadow:inset 0 0 0 3px rgba(0,122,245,.3)}aui-tab-header-active-indicator{display:flex;height:100%;position:absolute;top:0;pointer-events:none;transition:all .3s cubic-bezier(.35,0,.25,1)}.aui-tab-header-active-indicator{position:relative;flex:1;height:100%;z-index:1}.aui-tab-header-active-indicator:after{content:\"\";position:absolute;display:block;background:#007af5;height:2px}.aui-tab-header-active-indicator--line:after{width:100%;left:0;bottom:0}.aui-tab-header-active-indicator--card{background-color:rgb(var(--aui-color-n-10))}.aui-tab-header-active-indicator--card:after{width:calc(100% + 2px);top:0;left:-1px}"]
                 },] }
     ];
     TabHeaderComponent.ctorParameters = function () { return [
@@ -7623,6 +7812,7 @@
         selectFocusedIndex: [{ type: i0.Output }],
         indexFocused: [{ type: i0.Output }],
         _headerAddon: [{ type: i0.ContentChild, args: [TabHeaderAddonDirective, { static: false },] }],
+        _title: [{ type: i0.ContentChild, args: [TabTitleDirective, { static: false },] }],
         _labelWrappers: [{ type: i0.ContentChildren, args: [TabLabelWrapperDirective,] }],
         _tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { static: true },] }],
         _tabList: [{ type: i0.ViewChild, args: ['tabList', { static: true },] }],
@@ -8008,7 +8198,7 @@
         { type: i0.Component, args: [{
                     selector: 'aui-tab-group',
                     exportAs: 'auiTabGroup',
-                    template: "<div [ngClass]=\"bem.block()\">\n  <aui-tab-header\n    [selectedIndex]=\"selectedIndex\"\n    [type]=\"type\"\n    [size]=\"size\"\n    (indexFocused)=\"_focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\"\n  >\n    <div\n      role=\"tab\"\n      *ngFor=\"let tab of _tabs; let i = index\"\n      auiTabLabelWrapper\n      cdkMonitorElementFocus\n      [class.isActive]=\"selectedIndex == i\"\n      [class.closeable]=\"tab.closeable && !tab.disabled\"\n      [disabled]=\"tab.disabled\"\n      (click)=\"_handleClick(tab, i)\"\n      [title]=\"tab.textLabel\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-label]=\"tab.textLabel\"\n    >\n      <div class=\"aui-tab-label__content\">\n        <!-- If there is a label template, use it. -->\n        <ng-template [ngIf]=\"tab.templateLabel\">\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n        </ng-template>\n        <!-- If there is not a label template, fall back to the text label. -->\n        <ng-template [ngIf]=\"!tab.templateLabel\">\n          {{ tab.textLabel }}\n        </ng-template>\n      </div>\n\n      <aui-icon\n        *ngIf=\"tab.closeable && !tab.disabled\"\n        class=\"aui-tab-label__close\"\n        icon=\"close_small\"\n        (click)=\"tab.close.emit(); $event.stopPropagation()\"\n      ></aui-icon>\n    </div>\n\n    <ng-container *ngIf=\"_headerAddon\">\n      <ng-container *auiTabHeaderAddon>\n        <ng-template [cdkPortalOutlet]=\"_headerAddon\"></ng-template>\n      </ng-container>\n    </ng-container>\n  </aui-tab-header>\n\n  <div [class]=\"bem.element('body-wrapper')\">\n    <ng-container *ngIf=\"lazy\">\n      <aui-tab-body\n        role=\"tabpanel\"\n        *ngFor=\"let tab of activatedTabs\"\n        [content]=\"tab.content\"\n        [hidden]=\"tab !== activeTab\"\n      ></aui-tab-body>\n    </ng-container>\n    <aui-tab-body\n      role=\"tabpanel\"\n      *ngIf=\"!lazy && activeTab\"\n      [content]=\"activeTab.content\"\n    ></aui-tab-body>\n  </div>\n</div>\n",
+                    template: "<div [ngClass]=\"bem.block()\">\n  <aui-tab-header\n    [selectedIndex]=\"selectedIndex\"\n    [type]=\"type\"\n    [size]=\"size\"\n    (indexFocused)=\"_focusChanged($event)\"\n    (selectFocusedIndex)=\"selectedIndex = $event\"\n  >\n    <ng-container *ngIf=\"_tabTitle\">\n      <ng-container *auiTabTitle>\n        <ng-template [cdkPortalOutlet]=\"_tabTitle\"></ng-template>\n      </ng-container>\n    </ng-container>\n    <div\n      role=\"tab\"\n      *ngFor=\"let tab of _tabs; let i = index\"\n      auiTabLabelWrapper\n      cdkMonitorElementFocus\n      [class.isActive]=\"selectedIndex == i\"\n      [class.closeable]=\"tab.closeable && !tab.disabled\"\n      [disabled]=\"tab.disabled\"\n      (click)=\"_handleClick(tab, i)\"\n      [title]=\"tab.textLabel\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-label]=\"tab.textLabel\"\n    >\n      <div class=\"aui-tab-label__content\">\n        <!-- If there is a label template, use it. -->\n        <ng-template [ngIf]=\"tab.templateLabel\">\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n        </ng-template>\n        <!-- If there is not a label template, fall back to the text label. -->\n        <ng-template [ngIf]=\"!tab.templateLabel\">\n          {{ tab.textLabel }}\n        </ng-template>\n      </div>\n\n      <aui-icon\n        *ngIf=\"tab.closeable && !tab.disabled\"\n        class=\"aui-tab-label__close\"\n        icon=\"close_small\"\n        (click)=\"tab.close.emit(); $event.stopPropagation()\"\n      ></aui-icon>\n    </div>\n\n    <ng-container *ngIf=\"_headerAddon\">\n      <ng-container *auiTabHeaderAddon>\n        <ng-template [cdkPortalOutlet]=\"_headerAddon\"></ng-template>\n      </ng-container>\n    </ng-container>\n  </aui-tab-header>\n\n  <div [class]=\"bem.element('body-wrapper')\">\n    <ng-container *ngIf=\"lazy\">\n      <aui-tab-body\n        role=\"tabpanel\"\n        *ngFor=\"let tab of activatedTabs\"\n        [content]=\"tab.content\"\n        [hidden]=\"tab !== activeTab\"\n      ></aui-tab-body>\n    </ng-container>\n    <aui-tab-body\n      role=\"tabpanel\"\n      *ngIf=\"!lazy && activeTab\"\n      [content]=\"activeTab.content\"\n    ></aui-tab-body>\n  </div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
@@ -8022,8 +8212,10 @@
         _tabs: [{ type: i0.ContentChildren, args: [TabComponent,] }],
         _headerAddon: [{ type: i0.ContentChild, args: [TabHeaderAddonDirective, { static: false },] }],
         _tabHeader: [{ type: i0.ViewChild, args: [TabHeaderComponent, { static: false },] }],
+        _tabTitle: [{ type: i0.ContentChild, args: [TabTitleDirective, { static: false },] }],
         selectedIndex: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
         lazy: [{ type: i0.Input }],
         selectedIndexChange: [{ type: i0.Output }],
@@ -8053,6 +8245,7 @@
                         TabLabelDirective,
                         TabContentDirective,
                         TabHeaderAddonDirective,
+                        TabTitleDirective,
                         TabHeaderComponent,
                         TabBodyComponent,
                         TabBodyPortalDirective,
@@ -8065,6 +8258,7 @@
                         TabLabelDirective,
                         TabContentDirective,
                         TabHeaderAddonDirective,
+                        TabTitleDirective,
                         TabLabelWrapperDirective,
                         TabHeaderComponent,
                     ],
@@ -8231,6 +8425,16 @@
                 }
             }
         };
+        TreeSelectComponent.prototype.onKeyDown = function (event) {
+            if (event.key === 'Escape') {
+                this.closeOption();
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        TreeSelectComponent.prototype.closeOption = function () {
+            this.tooltipRef.disposeTooltip();
+        };
         TreeSelectComponent.prototype.updateSelectDisplay = function (value) {
             var _this = this;
             var pickedNode = this.flattedNodes.find(function (node) { return _this.trackFn(node.value) === _this.trackFn(value); });
@@ -8282,7 +8486,7 @@
     TreeSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-tree-select',
-                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowNodes()\"\n  (auiTooltipHide)=\"onHideNodes()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeNodes()\"\n    />\n    <aui-icon\n      *ngIf=\"displayClearable()\"\n      auiInputSuffix\n      class=\"aui-tree-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      auiInputSuffix\n      class=\"aui-tree-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #nodeListRef class=\"aui-tree-node-container__content\">\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowNodes()\"\n  (auiTooltipHide)=\"onHideNodes()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeNodes()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <aui-icon\n      *ngIf=\"displayClearable()\"\n      auiInputSuffix\n      class=\"aui-tree-select__clear\"\n      (click)=\"clearValue($event)\"\n      icon=\"close_small\"\n    ></aui-icon>\n    <aui-icon\n      auiInputSuffix\n      class=\"aui-tree-select__indicator\"\n      [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n    ></aui-icon>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #nodeListRef class=\"aui-tree-node-container__content\">\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -8293,7 +8497,7 @@
                             multi: true,
                         },
                     ],
-                    styles: [".aui-tree-node-container{padding:7px 0;border-radius:2px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content{max-height:256px;position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-tree-node-container__content .divider{border:none;border-top:1px solid #ededed}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-6));font-size:14px;text-align:center}.aui-tree-select{display:inline-block;position:relative;width:100%}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:#007af5}.aui-tree-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-1))}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-tree-select.isClearable .aui-input-group .aui-tree-select__input.aui-input--medium{padding-right:46px}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:#fff;cursor:text}.ng-submitted aui-tree-select.ng-invalid .aui-input,aui-tree-select.ng-invalid.ng-dirty .aui-input{border-color:#eb0027!important}"]
+                    styles: [".aui-tree-node-container{padding:var(--aui-select-options-padding) 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10);position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-tree-node-container__content .divider{border:none;border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-tree-node-container--small .aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-tree-node-container--small .aui-tree-node-container__placeholder{font-size:var(--aui-font-size-s)}.aui-tree-select{display:inline-block;position:relative;width:var(--aui-select-width)}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-tree-select:not(.isDisabled) .aui-icon-caret_down_s{fill:rgb(var(--aui-color-n-1))}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}.aui-tree-select.isClearable .aui-input-group .aui-tree-select__input.aui-input--medium{padding-right:calc(var(--aui-font-size-m) * 2 + var(--aui-inline-padding-xs) + var(--aui-spacing-m) * 2)}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:rgb(var(--aui-color-n-9));cursor:text}.ng-submitted aui-tree-select.ng-invalid .aui-input,aui-tree-select.ng-invalid.ng-dirty .aui-input{border-color:rgb(var(--aui-color-red))!important}"]
                 },] }
     ];
     TreeSelectComponent.propDecorators = {
@@ -8441,7 +8645,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-tree-node__content{display:flex;height:32px;line-height:32px;font-size:14px;color:rgb(var(--aui-color-n-1));background-color:#fff;cursor:pointer}.aui-tree-node__title{display:inline-block;margin-left:3.5px;padding:0 3.5px;width:100%;height:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aui-tree-node__title:hover{background-color:#f2f8ff}.aui-tree-node__title.unselectable{color:rgb(var(--aui-color-n-4))}.aui-tree-node__title.isSelected{color:#007af5;background-color:#e6f2fe}.aui-tree-node__title.isDisabled{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-tree-node__indicator{margin-left:7px}.aui-tree-node__indicator:hover{color:#007af5}.aui-tree-node__children{margin-left:21px}"]
+                    styles: [".aui-tree-node__content{display:flex;height:var(--aui-inline-height-m);line-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));cursor:pointer}.aui-tree-node__title{display:inline-block;margin-left:calc(var(--aui-select-options-padding) / 2);padding:0 calc(var(--aui-select-options-padding) / 2);width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tree-node__title:hover{background-color:rgb(var(--aui-color-p-6))}.aui-tree-node__title.unselectable{color:rgb(var(--aui-color-n-6))}.aui-tree-node__title.isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tree-node__title.isDisabled{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-tree-node__indicator{margin-left:var(--aui-select-options-padding)}.aui-tree-node__indicator:hover{color:rgb(var(--aui-color-primary))}.aui-tree-node__children{margin-left:calc(var(--aui-select-options-padding) + var(--aui-font-size-m))}"]
                 },] }
     ];
     TreeNodeComponent.ctorParameters = function () { return [
@@ -8703,7 +8907,7 @@
                 },] }
     ];
     AutoCompleteDirective.ctorParameters = function () { return [
-        { type: overlay.Overlay },
+        { type: i1.Overlay },
         { type: i0.ViewContainerRef },
         { type: i0.ElementRef },
         { type: i0.Renderer2 },
@@ -8836,7 +9040,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-suggestion{padding:0 7px;color:rgb(var(--aui-color-n-1));background-color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-suggestion--large{height:40px;line-height:40px;font-size:16px}.aui-suggestion--medium{height:32px;line-height:32px;font-size:14px}.aui-suggestion--small{height:28px;line-height:28px;font-size:14px}.aui-suggestion--mini{height:24px;line-height:24px;font-size:12px}.aui-suggestion:not(.isMulti).isSelected{color:#007af5;background-color:#e6f2fe}.aui-suggestion.isFocused,.aui-suggestion:hover{background-color:#f2f8ff}.aui-suggestion.isDisabled{color:rgb(var(--aui-color-n-6));background-color:#fff;cursor:not-allowed}.aui-suggestion__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-suggestion__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-suggestion.isSelected .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isSelected.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-suggestion.isDisabled .aui-suggestion__label{cursor:not-allowed}.aui-suggestion.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-suggestion:not(.isDisabled).isFocused .aui-suggestion__pointer,.aui-suggestion:not(.isDisabled):hover .aui-suggestion__pointer{border-color:#007af5}"]
+                    styles: [".aui-suggestion{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-n-10));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-suggestion--large{height:var(--aui-inline-height-l);line-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-suggestion--medium{height:var(--aui-inline-height-m);line-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-suggestion--small{height:var(--aui-inline-height-s);line-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-suggestion--mini{height:var(--aui-inline-height-xs);line-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}.aui-suggestion:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary))}.aui-suggestion.isFocused,.aui-suggestion:hover,.aui-suggestion:not(.isMulti).isSelected{background-color:rgb(var(--aui-color-p-6))}.aui-suggestion.isDisabled{color:rgb(var(--aui-color-n-6));background-color:rgb(var(--aui-color-n-10));cursor:not-allowed}.aui-suggestion__pointer{display:inline-block;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:var(--aui-border-m) solid rgb(var(--aui-color-n-7));color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-9));position:relative;vertical-align:middle;transition:all .3s ease}.aui-suggestion__pointer .aui-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-left:0}.aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-suggestion.isSelected .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isSelected.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-suggestion.isDisabled .aui-suggestion__label{cursor:not-allowed}.aui-suggestion.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-suggestion:not(.isDisabled).isFocused .aui-suggestion__pointer,.aui-suggestion:not(.isDisabled):hover .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary))}"]
                 },] }
     ];
     SuggestionComponent.ctorParameters = function () { return [
@@ -8876,7 +9080,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-autocomplete{padding:7px 0;border-radius:2px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-autocomplete__content{max-height:256px;position:relative;overflow:auto}.aui-autocomplete__content::-webkit-scrollbar{width:4px;height:4px}.aui-autocomplete__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-autocomplete__content .divider{border:none;border-top:1px solid #ededed}.aui-autocomplete__placeholder{color:rgb(var(--aui-color-n-6));font-size:14px;text-align:center}aui-autocomplete{display:none}"]
+                    styles: [".aui-autocomplete{padding:var(--aui-select-options-padding) 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-n-1),.2)}.aui-autocomplete__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-autocomplete__content::-webkit-scrollbar{width:4px;height:4px}.aui-autocomplete__content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-autocomplete__content .divider{border:none;border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}.aui-autocomplete__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-autocomplete--small .aui-autocomplete__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-autocomplete--small .aui-autocomplete__placeholder{font-size:var(--aui-font-size-s)}aui-autocomplete{display:none}"]
                 },] }
     ];
     AutocompleteComponent.ctorParameters = function () { return [
@@ -8906,7 +9110,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-suggestion-group__title{font-size:12px;line-height:16px;padding:4px 7px;color:rgb(var(--aui-color-n-4))}aui-suggestion-group:not(:first-child) .aui-suggestion-group{margin-top:8px;padding-top:8px;border-top:1px solid #ededed}"]
+                    styles: [".aui-suggestion-group__title{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding:calc(var(--aui-select-options-padding) / 2) var(--aui-select-options-padding);color:rgb(var(--aui-color-n-4));width:100%;background-color:rgb(var(--aui-color-n-10));position:relative;z-index:1}.aui-suggestion-group__title-wrapper{position:-webkit-sticky;position:sticky;top:0;margin-top:var(--aui-border-m);height:calc(calc(var(--aui-line-height-s) + var(--aui-select-options-padding)) + var(--aui-border-m))}.aui-suggestion-group__title-wrapper:after{position:-webkit-sticky;position:sticky;content:\" \";width:100%;height:var(--aui-border-m);display:block;background-color:rgb(var(--aui-color-n-8));top:calc(var(--aui-line-height-s) + var(--aui-select-options-padding));margin-top:-1px}aui-suggestion-group:not(:first-child) .aui-suggestion-group{padding-top:var(--aui-select-options-padding);border-top:var(--aui-border-m) solid rgb(var(--aui-color-n-8))}aui-suggestion-group:not(:last-child) .aui-suggestion-group{padding-bottom:var(--aui-select-options-padding)}"]
                 },] }
     ];
     SuggestionGroupComponent.propDecorators = {
@@ -8935,7 +9139,7 @@
     }());
     AutocompleteModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, overlay.OverlayModule, TooltipModule],
+                    imports: [common.CommonModule, i1.OverlayModule, TooltipModule],
                     declarations: [
                         AutoCompleteDirective,
                         CustomAutoCompleteDirective,
@@ -9190,7 +9394,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-status-bar{display:inline-flex;overflow:hidden;width:100%;border-radius:2px;vertical-align:middle}.aui-status-bar--medium{height:16px}.aui-status-bar--small{height:8px}.aui-status-bar__chunk{min-width:2px;height:100%;flex:1 1 1}.aui-status-bar__chunk--primary{background-color:#338bff}.aui-status-bar__chunk--success{background-color:#3bcc7c}.aui-status-bar__chunk--warning{background-color:#ffb133}.aui-status-bar__chunk--error{background-color:#ea6a6a}.aui-status-bar__chunk--info{background-color:#d6d6d6}.aui-status-bar__chunk--pending{height:32px;-webkit-animation:pending .5s linear infinite;animation:pending .5s linear infinite;background:repeating-linear-gradient(-60deg,#ccecfb,#ccecfb 4px,#e0f5ff 0,#e0f5ff 8px)}.aui-status-bar__chunk+.aui-status-bar__chunk{margin-left:1px}.aui-status-bar:hover .aui-status-bar__chunk--primary{background-color:#007af5}.aui-status-bar:hover .aui-status-bar__chunk--success{background-color:#00c261}.aui-status-bar:hover .aui-status-bar__chunk--warning{background-color:#f5a300}.aui-status-bar:hover .aui-status-bar__chunk--error{background-color:#eb0027}.aui-status-bar:hover .aui-status-bar__chunk--info{background-color:#c8cacd}@-webkit-keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}@keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}"]
+                    styles: [".aui-status-bar{display:inline-flex;overflow:hidden;width:100%;vertical-align:middle;border-radius:5px}.aui-status-bar--medium{height:10px}.aui-status-bar--small{height:8px;border-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.aui-status-bar__chunk{min-width:2px;height:100%;flex:1 1 1;border-radius:var(--aui-border-radius-m)}.aui-status-bar__chunk:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.aui-status-bar__chunk:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.aui-status-bar__chunk--primary{background-color:rgb(var(--aui-color-primary))}.aui-status-bar__chunk--success{background-color:rgb(var(--aui-color-green))}.aui-status-bar__chunk--warning{background-color:rgb(var(--aui-color-yellow))}.aui-status-bar__chunk--error{background-color:rgb(var(--aui-color-red))}.aui-status-bar__chunk--info{background-color:rgb(var(--aui-color-n-4))}.aui-status-bar__chunk--pending{height:var(--aui-inline-height-m);-webkit-animation:pending .5s linear infinite;animation:pending .5s linear infinite;background:repeating-linear-gradient(-60deg,rgb(var(--aui-color-b-5)),rgb(var(--aui-color-b-5)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-m))}.aui-status-bar__chunk+.aui-status-bar__chunk{margin-left:var(--aui-spacing-xs)}.aui-status-bar:hover .aui-status-bar__chunk--primary{background-color:rgb(var(--aui-color-primary))}.aui-status-bar:hover .aui-status-bar__chunk--success{background-color:rgb(var(--aui-color-green))}.aui-status-bar:hover .aui-status-bar__chunk--warning{background-color:rgb(var(--aui-color-yellow))}.aui-status-bar:hover .aui-status-bar__chunk--error{background-color:rgb(var(--aui-color-red))}.aui-status-bar:hover .aui-status-bar__chunk--info{background-color:rgb(var(--aui-color-n-4))}@-webkit-keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}@keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}"]
                 },] }
     ];
     StatusBarComponent.propDecorators = {
@@ -9213,6 +9417,126 @@
                 },] }
     ];
 
+    var NavItemIconDirective = /** @class */ (function () {
+        function NavItemIconDirective(template) {
+            this.template = template;
+        }
+        return NavItemIconDirective;
+    }());
+    NavItemIconDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '*[auiNavItemIcon]',
+                    exportAs: 'auiNavItemIcon',
+                },] }
+    ];
+    NavItemIconDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+    var NavItemContentDirective = /** @class */ (function () {
+        function NavItemContentDirective(template) {
+            this.template = template;
+        }
+        return NavItemContentDirective;
+    }());
+    NavItemContentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '*[auiNavItemContent]',
+                    exportAs: 'auiNavItemContent',
+                },] }
+    ];
+    NavItemContentDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+    var uniqueId$5 = 0;
+    var NavItemComponent = /** @class */ (function () {
+        function NavItemComponent(parentItem, group) {
+            this.parentItem = parentItem;
+            this._key = 'aui-nav-item--' + uniqueId$5++;
+            this.divider = false;
+            this.depth = 0;
+            this.group = group;
+            if (parentItem) {
+                this.depth = parentItem.depth + 1;
+            }
+        }
+        Object.defineProperty(NavItemComponent.prototype, "key", {
+            get: function () {
+                return this._key;
+            },
+            set: function (val) {
+                if (val) {
+                    this._key = val;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NavItemComponent.prototype, "subItems", {
+            get: function () {
+                var _this = this;
+                var _a;
+                return (_a = this._subItems) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item !== _this; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NavItemComponent;
+    }());
+    NavItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-nav-item',
+                    template: '',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    preserveWhitespaces: false
+                },] }
+    ];
+    NavItemComponent.ctorParameters = function () { return [
+        { type: NavItemComponent, decorators: [{ type: i0.SkipSelf }, { type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [i0.forwardRef(function () { return NavItemGroupComponent; }),] }] }
+    ]; };
+    NavItemComponent.propDecorators = {
+        _subItems: [{ type: i0.ContentChildren, args: [NavItemComponent,] }],
+        key: [{ type: i0.Input }],
+        divider: [{ type: i0.Input }],
+        icon: [{ type: i0.ContentChild, args: [NavItemIconDirective, { static: true },] }],
+        content: [{ type: i0.ContentChild, args: [NavItemContentDirective, { static: true },] }]
+    };
+
+    var NavItemGroupTitleDirective = /** @class */ (function () {
+        function NavItemGroupTitleDirective(template) {
+            this.template = template;
+        }
+        return NavItemGroupTitleDirective;
+    }());
+    NavItemGroupTitleDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '*[auiNavItemGroupTitle]',
+                    exportAs: 'auiNavItemGroupTitle',
+                },] }
+    ];
+    NavItemGroupTitleDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+    var NavItemGroupComponent = /** @class */ (function () {
+        function NavItemGroupComponent() {
+        }
+        return NavItemGroupComponent;
+    }());
+    NavItemGroupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-nav-item-group',
+                    template: '',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    preserveWhitespaces: false
+                },] }
+    ];
+    NavItemGroupComponent.propDecorators = {
+        title: [{ type: i0.ContentChild, args: [NavItemGroupTitleDirective,] }],
+        items: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return NavItemComponent; }),] }]
+    };
+
     var NavItemUlComponent = /** @class */ (function () {
         function NavItemUlComponent() {
             this.mainPanelCollapsed = true;
@@ -9226,11 +9550,11 @@
     NavItemUlComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-nav-item-ul',
-                    template: "<div class=\"aui-nav-item-ul\" [class.isMainPanelCollapsed]=\"mainPanelCollapsed\">\n  <aui-nav-item-li\n    *ngFor=\"let item of items; trackBy: trackByKey\"\n    [item]=\"item\"\n    [mainPanelCollapsed]=\"mainPanelCollapsed\"\n    (itemFocused)=\"focusedItemChanged.emit($event)\"\n  ></aui-nav-item-li>\n\n  <div *ngFor=\"let group of groups\" class=\"aui-nav-item-group\">\n    <div\n      *ngIf=\"!mainPanelCollapsed && group.title\"\n      class=\"aui-nav-item-group__title\"\n    >\n      {{ group.title }}\n    </div>\n    <aui-nav-item-li\n      *ngFor=\"let item of group.items; trackBy: trackByKey\"\n      [item]=\"item\"\n      [mainPanelCollapsed]=\"mainPanelCollapsed\"\n      (itemFocused)=\"focusedItemChanged.emit($event)\"\n    ></aui-nav-item-li>\n  </div>\n</div>\n",
+                    template: "<div class=\"aui-nav-item-ul\" [class.isMainPanelCollapsed]=\"mainPanelCollapsed\">\n  <aui-nav-item-li\n    *ngFor=\"let item of items; trackBy: trackByKey\"\n    [item]=\"item\"\n    [mainPanelCollapsed]=\"mainPanelCollapsed\"\n    (itemFocused)=\"focusedItemChanged.emit($event)\"\n  ></aui-nav-item-li>\n\n  <div *ngFor=\"let group of groups\" class=\"aui-nav-item-group\">\n    <div\n      *ngIf=\"!mainPanelCollapsed && group.title\"\n      class=\"aui-nav-item-group__title\"\n    >\n      <ng-container [ngTemplateOutlet]=\"group.title.template\"></ng-container>\n    </div>\n    <aui-nav-item-li\n      *ngFor=\"let item of group.items; trackBy: trackByKey\"\n      [item]=\"item\"\n      [mainPanelCollapsed]=\"mainPanelCollapsed\"\n      (itemFocused)=\"focusedItemChanged.emit($event)\"\n    ></aui-nav-item-li>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-nav-item-group{position:relative}.aui-nav-item-group .aui-nav-item-group__title{padding:var(--aui-spacing-m) var(--aui-spacing-m) var(--aui-spacing-s)}.aui-nav-item-group__title{color:rgb(var(--aui-color-help));font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-nav-item-group__title+.aui-nav-item__content{margin-top:var(--aui-spacing-xs)}aui-nav-item-li{display:block}"]
+                    styles: [".aui-nav-item-group{position:relative}.aui-nav-item-group .aui-nav-item-group__title{padding:8px 8px 4px}.aui-nav-item-group__title{color:rgb(var(--aui-color-n-4));font-size:12px;line-height:16px}.aui-nav-item-ul.isMainPanelCollapsed .aui-nav-item-group+.aui-nav-item-group{margin-top:9px}.aui-nav-item-ul.isMainPanelCollapsed .aui-nav-item-group+.aui-nav-item-group:before{content:\"\";display:block;box-sizing:border-box;position:absolute;left:0;top:-9px;padding:4px;height:9px;width:100%;background-clip:content-box;background-color:#3d3d3d}.aui-nav-item-group__title+.aui-nav-item__content{margin-top:2px}"]
                 },] }
     ];
     NavItemUlComponent.propDecorators = {
@@ -9248,14 +9572,12 @@
             this.secondaryPanelHover$$ = new rxjs.BehaviorSubject(false);
             this.mainPanelCollapsed = false;
             this.secondaryPanelCollapsed = false;
-            this.hideMainPanelToggle = true;
+            this.hideMainPanelToggle = false;
             this.hideSecondaryPanelToggle = false;
             this.theme = 'dark';
             this.activatedKeyChange = new i0.EventEmitter();
             this.mainPanelCollapsedChange = new i0.EventEmitter();
             this.secondaryPanelCollapsedChange = new i0.EventEmitter();
-            this.paths = [];
-            this.flatItems = [];
         }
         Object.defineProperty(NavMenuComponent.prototype, "activatedKey", {
             get: function () {
@@ -9270,12 +9592,22 @@
         });
         NavMenuComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            var items = this.items ||
-                this.groups.reduce(function (prev, cur) { return __spread(prev, cur.items); }, []);
-            this.flatItems = this.flattenNav(items);
-            this.paths = this.getPaths(items);
-            this.activeKeys$ = this.activatedKey$$.pipe(operators.map(function (key) { return _this.findPathByLastKey(key); }), operators.publishReplay(1), operators.refCount());
-            this.expandedKeys$ = rxjs.merge(this.activatedKey$$, this.expandedKey$$).pipe(operators.map(function (key) { return _this.findPathByLastKey(key); }), operators.publishReplay(1), operators.refCount());
+            this.items$ = this.items.changes.pipe(operators.startWith(this.items), operators.map(function (list) { return list.toArray(); }), operators.publishReplay(1), operators.refCount());
+            this.groups$ = this.groups.changes.pipe(operators.startWith(this.groups), operators.map(function (list) { return list.toArray(); }), operators.publishReplay(1), operators.refCount());
+            this.activeKeys$ = rxjs.combineLatest([
+                this.activatedKey$$,
+                this.flatItems.changes.pipe(operators.startWith(this.flatItems)),
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], items = _b[1];
+                return items.find(function (item) { return item.key === key; });
+            }), operators.map(function (item) { return _this.getItemPath(item); }), operators.publishReplay(1), operators.refCount());
+            this.expandedKeys$ = rxjs.combineLatest([
+                rxjs.merge(this.activatedKey$$, this.expandedKey$$),
+                this.flatItems.changes.pipe(operators.startWith(this.flatItems)),
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], items = _b[1];
+                return items.find(function (item) { return item.key === key; });
+            }), operators.map(function (item) { return _this.getItemPath(item); }), operators.publishReplay(1), operators.refCount());
             this.stickedItem$ = this.focusedItemKey$$
                 .pipe(operators.bufferCount(2, 1), operators.startWith([null, null]), operators.debounceTime(0), operators.switchMap(function (_a) {
                 var _b = __read(_a, 2), prevKey = _b[0], currKey = _b[1];
@@ -9283,39 +9615,26 @@
                     ? rxjs.of(currKey)
                     : _this.secondaryPanelHover$$.pipe(operators.debounceTime(0), operators.switchMap(function (hover) { return (hover ? rxjs.of(prevKey) : rxjs.of(null)); }));
             }))
-                .pipe(operators.switchMap(function (key) {
-                var stickedItem = _this.flatItems.find(function (item) { return item.key === key; });
+                .pipe(operators.switchMap(function (key) { return rxjs.combineLatest([
+                rxjs.of(key),
+                _this.flatItems.changes.pipe(operators.startWith(_this.flatItems)),
+            ]); }), operators.switchMap(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], items = _b[1];
+                var stickedItem = items.find(function (item) { return item.key === key; });
                 return (stickedItem === null || stickedItem === void 0 ? void 0 : stickedItem.subItems.length) > 0
                     ? rxjs.of(stickedItem)
-                    : _this.expandedKeys$.pipe(operators.map(function (keys) { return keys[0]; }), operators.map(function (expandedKey) { return _this.flatItems.find(function (item) { return item.key === expandedKey; }); }));
+                    : _this.expandedKeys$.pipe(operators.map(function (keys) { return keys[0]; }), operators.map(function (expandedKey) { return items.find(function (item) { return item.key === expandedKey; }); }));
             }), operators.filter(function (item) { return !!item; }), operators.distinctUntilKeyChanged('key'), operators.publishReplay(1), operators.refCount());
             this.hasFocusedItem$ = rxjs.combineLatest([
+                this.flatItems.changes.pipe(operators.startWith(this.flatItems)),
                 this.focusedItemKey$$.pipe(operators.distinctUntilChanged()),
                 this.secondaryPanelHover$$,
             ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), key = _b[0], hover = _b[1];
-                var focusedItem = _this.flatItems.find(function (item) { return item.key === key; });
+                var _b = __read(_a, 3), items = _b[0], key = _b[1], hover = _b[2];
+                var focusedItem = items.find(function (item) { return item.key === key; });
                 return (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.subItems.length) > 0 || hover;
             }), operators.debounceTime(0));
         };
-        NavMenuComponent.prototype.flattenNav = function (items) {
-            var _this = this;
-            if (!(items === null || items === void 0 ? void 0 : items.length)) {
-                return [];
-            }
-            return items.reduce(function (prev, cur) { return __spread(prev, _this.flattenNav(cur.children)); }, items);
-        };
-        NavMenuComponent.prototype.findPathByLastKey = function (key) {
-            return this.paths.find(function (path) { return __spread(path).pop() === key; });
-        };
-        NavMenuComponent.prototype.getPaths = function (items, parent) {
-            var _this = this;
-            if (!(items === null || items === void 0 ? void 0 : items.length)) {
-                return [];
-            }
-            var pre = parent ? __spread(parent) : [];
-            return items.reduce(function (prev, cur) { return __spread(prev, _this.getPaths(cur.children, __spread(pre, [cur.key]))); }, items.map(function (item) { return __spread(pre, [item.key]); }));
-        };
         NavMenuComponent.prototype.handleMainPanelExpandButtonClicked = function () {
             this.mainPanelCollapsedChange.emit(!this.mainPanelCollapsed);
         };
@@ -9337,16 +9656,23 @@
         NavMenuComponent.prototype.expandedKeyChanged = function (key) {
             this.expandedKey$$.next(key);
         };
+        NavMenuComponent.prototype.getItemPath = function (item) {
+            if (!item) {
+                return [];
+            }
+            return item.parentItem
+                ? __spread(this.getItemPath(item.parentItem), [item.key]) : [item.key];
+        };
         return NavMenuComponent;
     }());
     NavMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-nav-menu',
-                    template: "<div\n  class=\"aui-nav-menu\"\n  [class.isMainPanelCollapsed]=\"mainPanelCollapsed\"\n  [class.isSecondaryPanelCollapsed]=\"secondaryPanelCollapsed\"\n>\n  <div class=\"aui-nav-menu__main-panel\">\n    <div class=\"aui-nav-menu__main-panel-content\" cdkScrollable>\n      <aui-nav-item-ul\n        [items]=\"items\"\n        [groups]=\"groups\"\n        [mainPanelCollapsed]=\"mainPanelCollapsed\"\n        (focusedItemChanged)=\"handleFocusedItemChanged($event)\"\n      ></aui-nav-item-ul>\n    </div>\n    <div\n      *ngIf=\"!hideMainPanelToggle\"\n      class=\"aui-nav-menu__main-panel-footer\"\n      (click)=\"handleMainPanelExpandButtonClicked()\"\n    >\n      <aui-icon\n        [icon]=\"\n          !mainPanelCollapsed ? 'angle_double_left' : 'angle_double_right'\n        \"\n      ></aui-icon>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"mainPanelCollapsed\"\n    class=\"aui-nav-menu__secondary-panel\"\n    (mouseleave)=\"handleSecondaryPanelHover(false)\"\n  >\n    <div\n      *ngIf=\"\n        (!secondaryPanelCollapsed || (hasFocusedItem$ | async)) &&\n        (stickedItem$ | async) &&\n        (stickedItem$ | async).subItems.length\n      \"\n      class=\"aui-nav-menu__secondary-panel-content\"\n      cdkScrollable\n      (mouseenter)=\"handleSecondaryPanelHover(true)\"\n    >\n      <div class=\"aui-nav-menu__secondary-panel-title\">\n        <div\n          *ngIf=\"(stickedItem$ | async).group\"\n          class=\"aui-nav-item-group__title\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"(stickedItem$ | async).group.title.template\"\n          ></ng-container>\n        </div>\n        <div class=\"aui-nav-item__content\">\n          <ng-container\n            [ngTemplateOutlet]=\"(stickedItem$ | async).content.template\"\n          ></ng-container>\n        </div>\n      </div>\n      <aui-nav-item-ul\n        [items]=\"(stickedItem$ | async).subItems\"\n        [mainPanelCollapsed]=\"mainPanelCollapsed\"\n      ></aui-nav-item-ul>\n    </div>\n    <div\n      *ngIf=\"!hideSecondaryPanelToggle\"\n      class=\"aui-nav-menu__secondary-panel-expand-button\"\n      (click)=\"handleSecondaryPanelExpandButtonClicked()\"\n    >\n      <aui-icon\n        [icon]=\"\n          !secondaryPanelCollapsed ? 'navigation_collapse' : 'navigation_expand'\n        \"\n      ></aui-icon>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div\n  class=\"aui-nav-menu\"\n  [class.isMainPanelCollapsed]=\"mainPanelCollapsed\"\n  [class.isSecondaryPanelCollapsed]=\"secondaryPanelCollapsed\"\n>\n  <div class=\"aui-nav-menu__main-panel\">\n    <div class=\"aui-nav-menu__main-panel-content\" cdkScrollable>\n      <aui-nav-item-ul\n        [items]=\"items$ | async\"\n        [groups]=\"groups$ | async\"\n        [mainPanelCollapsed]=\"mainPanelCollapsed\"\n        (focusedItemChanged)=\"handleFocusedItemChanged($event)\"\n      ></aui-nav-item-ul>\n    </div>\n    <div\n      *ngIf=\"!hideMainPanelToggle\"\n      class=\"aui-nav-menu__main-panel-footer\"\n      (click)=\"handleMainPanelExpandButtonClicked()\"\n    >\n      <aui-icon\n        [icon]=\"\n          !mainPanelCollapsed ? 'angle_double_left' : 'angle_double_right'\n        \"\n      ></aui-icon>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"mainPanelCollapsed\"\n    class=\"aui-nav-menu__secondary-panel\"\n    (mouseleave)=\"handleSecondaryPanelHover(false)\"\n  >\n    <div\n      *ngIf=\"\n        (!secondaryPanelCollapsed || (hasFocusedItem$ | async)) &&\n        (stickedItem$ | async) &&\n        (stickedItem$ | async).subItems.length\n      \"\n      class=\"aui-nav-menu__secondary-panel-content\"\n      cdkScrollable\n      (mouseenter)=\"handleSecondaryPanelHover(true)\"\n    >\n      <div class=\"aui-nav-menu__secondary-panel-title\">\n        <div\n          *ngIf=\"(stickedItem$ | async).group\"\n          class=\"aui-nav-item-group__title\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"(stickedItem$ | async).group.title.template\"\n          ></ng-container>\n        </div>\n        <div class=\"aui-nav-item__content\">\n          <ng-container\n            [ngTemplateOutlet]=\"(stickedItem$ | async).content.template\"\n          ></ng-container>\n        </div>\n      </div>\n      <aui-nav-item-ul\n        [items]=\"(stickedItem$ | async).subItems\"\n        [mainPanelCollapsed]=\"mainPanelCollapsed\"\n      ></aui-nav-item-ul>\n    </div>\n    <div\n      *ngIf=\"!hideSecondaryPanelToggle\"\n      class=\"aui-nav-menu__secondary-panel-expand-button\"\n      (click)=\"handleSecondaryPanelExpandButtonClicked()\"\n    >\n      <aui-icon\n        [icon]=\"\n          !secondaryPanelCollapsed ? 'navigation_collapse' : 'navigation_expand'\n        \"\n      ></aui-icon>\n    </div>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: ["aui-nav-item-ul:not([hidden]){display:block}.aui-nav-menu{width:-webkit-fit-content;width:fit-content;width:-moz-fit-content;height:100%;display:flex;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aui-nav-menu__main-panel{display:flex;flex-direction:column;width:220px;height:100%;background-color:rgb(var(--aui-color-n-9))}.aui-nav-menu__main-panel-content{height:100%;overflow-x:hidden;overflow-y:auto}.aui-nav-menu__main-panel-content::-webkit-scrollbar{width:4px;height:4px}.aui-nav-menu__main-panel-content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-nav-menu__main-panel-content>aui-nav-item-ul>.aui-nav-item-ul>aui-nav-item-li+aui-nav-item-li{margin-top:4px}"]
+                    styles: [".aui-nav-menu{width:-webkit-fit-content;width:fit-content;width:-moz-fit-content;height:100%;display:flex;position:relative;color:rgb(var(--aui-color-n-4));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aui-nav-menu__main-panel{display:flex;flex-direction:column;width:200px;height:100%;background-color:#333}.aui-nav-menu__main-panel-content{height:100%;overflow-x:hidden;overflow-y:auto}.aui-nav-menu__main-panel-content::-webkit-scrollbar{width:4px;height:4px}.aui-nav-menu__main-panel-content::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.3)}.aui-nav-menu__main-panel-footer{flex-shrink:0;height:20px;padding:0 12px;display:flex;justify-content:flex-end;align-items:center;font-size:16px;cursor:pointer}.aui-nav-menu__main-panel-footer:hover{color:#fff;background-color:#3d3d3d}.aui-nav-menu.isMainPanelCollapsed .aui-nav-menu__main-panel{width:48px}.aui-nav-menu.isMainPanelCollapsed .aui-nav-menu__main-panel-footer{justify-content:center}.aui-nav-menu.isSecondaryPanelCollapsed .aui-nav-menu__secondary-panel{position:absolute;top:0;left:48px}.aui-nav-menu__secondary-panel{height:100%;background-color:#272727;position:relative}.aui-nav-menu__secondary-panel .aui-nav-item__icon{display:none}.aui-nav-menu__secondary-panel-content{padding:4px;width:152px;height:100%;overflow-x:hidden;overflow-y:auto}.aui-nav-menu__secondary-panel-content::-webkit-scrollbar{width:4px;height:4px}.aui-nav-menu__secondary-panel-content::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.3)}.aui-nav-menu__secondary-panel-title{padding:13px 4px;border-bottom:1px solid #3d3d3d;color:#fff}.aui-nav-menu__secondary-panel-title .aui-nav-item__content{padding:0 12px}.aui-nav-menu__secondary-panel-expand-button{width:16px;height:16px;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;right:-16px;transform:translateY(-50%);font-size:16px;cursor:pointer}.aui-nav-menu__secondary-panel-expand-button:hover{color:#007af5}"]
                 },] }
     ];
     NavMenuComponent.propDecorators = {
@@ -9356,11 +9682,12 @@
         hideMainPanelToggle: [{ type: i0.Input }],
         hideSecondaryPanelToggle: [{ type: i0.Input }],
         theme: [{ type: i0.Input }],
-        items: [{ type: i0.Input }],
-        groups: [{ type: i0.Input }],
         activatedKeyChange: [{ type: i0.Output }],
         mainPanelCollapsedChange: [{ type: i0.Output }],
-        secondaryPanelCollapsedChange: [{ type: i0.Output }]
+        secondaryPanelCollapsedChange: [{ type: i0.Output }],
+        items: [{ type: i0.ContentChildren, args: [NavItemComponent,] }],
+        groups: [{ type: i0.ContentChildren, args: [NavItemGroupComponent,] }],
+        flatItems: [{ type: i0.ContentChildren, args: [NavItemComponent, { descendants: true },] }]
     };
 
     var NavItemLiComponent = /** @class */ (function () {
@@ -9372,14 +9699,13 @@
             this.itemFocused = new i0.EventEmitter();
             this.isActive$ = rxjs.combineLatest([this.navMenu.activeKeys$, this.item$$]).pipe(operators.map(function (_b) {
                 var _c = __read(_b, 2), activeKeys = _c[0], item = _c[1];
-                return activeKeys === null || activeKeys === void 0 ? void 0 : activeKeys.includes(item.key);
+                return activeKeys.includes(item.key);
             }), operators.tap(function (isActive) {
                 _this.snapshot.isActive = isActive;
             }), operators.publishReplay(1), operators.refCount());
             this.isExpanded$ = rxjs.combineLatest([this.navMenu.expandedKeys$, this.item$$]).pipe(operators.map(function (_b) {
                 var _c = __read(_b, 2), expandedKeys = _c[0], item = _c[1];
-                var _a;
-                return ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.includes(item.key));
+                return item.subItems.length && expandedKeys.includes(item.key);
             }), operators.tap(function (isExpanded) {
                 _this.snapshot.isExpanded = isExpanded;
             }), operators.publishReplay(1), operators.refCount());
@@ -9388,14 +9714,12 @@
                 this.item$$,
             ]).pipe(operators.map(function (_b) {
                 var _c = __read(_b, 2), stickedKey = _c[0], item = _c[1];
-                return _this.depth === 0 && stickedKey === item.key;
+                return item.depth === 0 && stickedKey === item.key;
             }), operators.publishReplay(1), operators.refCount());
             this.snapshot = {
                 isActive: false,
                 isExpanded: false,
             };
-            this.hovered = false;
-            this.popMenusDisplayed = false;
         }
         Object.defineProperty(NavItemLiComponent.prototype, "item", {
             get: function () {
@@ -9408,78 +9732,46 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(NavItemLiComponent.prototype, "depth", {
-            get: function () {
-                var _this = this;
-                var path = this.navMenu.paths.find(function (path) { return __spread(path).pop() === _this.item.key; });
-                return path.indexOf(this.item.key);
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(NavItemLiComponent.prototype, "hasSubItem", {
             get: function () {
-                var _a;
-                return !!((_a = this.item.children) === null || _a === void 0 ? void 0 : _a.length);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemLiComponent.prototype, "isLeaf", {
-            get: function () {
-                return this.depth === 1;
+                return !!this.item.subItems.length;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(NavItemLiComponent.prototype, "displayItemContent", {
             get: function () {
-                return !this.mainPanelCollapsed || this.depth !== 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NavItemLiComponent.prototype, "isExternal", {
-            get: function () {
-                var _a;
-                return (_a = this.item.href) === null || _a === void 0 ? void 0 : _a.startsWith('http');
+                return !this.mainPanelCollapsed || this.item.depth !== 0;
             },
             enumerable: false,
             configurable: true
         });
         NavItemLiComponent.prototype.handleContentClicked = function () {
-            if (!this.displayItemContent && this.snapshot.isExpanded && !this.isLeaf) {
+            var _a;
+            if (!this.displayItemContent && this.snapshot.isExpanded) {
                 return;
             }
-            if ((this.hasSubItem ||
-                (!this.displayItemContent && this.snapshot.isActive)) &&
-                !this.isLeaf) {
-                this.navMenu.expandedKeyChanged(this.snapshot.isExpanded
-                    ? this.findParentKey(this.item.key)
-                    : this.item.key);
+            if (this.hasSubItem ||
+                (!this.displayItemContent && this.snapshot.isActive)) {
+                this.navMenu.expandedKeyChanged(this.snapshot.isExpanded ? (_a = this.item.parentItem) === null || _a === void 0 ? void 0 : _a.key : this.item.key);
             }
             else {
                 this.navMenu.activatedKeyChanged(this.item.key);
             }
         };
         NavItemLiComponent.prototype.handleContentFocused = function (hover) {
-            this.hovered = hover;
             this.itemFocused.emit(hover ? this.item.key : null);
         };
-        NavItemLiComponent.prototype.findParentKey = function (key) {
-            var path = this.navMenu.paths.find(function (path) { return new Set(path).has(key); });
-            return path.slice(0, path.indexOf(key)).pop();
-        };
         return NavItemLiComponent;
     }());
     NavItemLiComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-nav-item-li',
-                    template: "<div\n  class=\"aui-nav-item-li\"\n  [class.isActive]=\"depth === 0 && (isActive$ | async)\"\n  [class.isExpanded]=\"isExpanded$ | async\"\n  [class.hasDivider]=\"item.divider\"\n>\n  <a\n    class=\"aui-nav-item-li__content\"\n    [class.isActive]=\"isActive$ | async\"\n    [class.isExpanded]=\"isExpanded$ | async\"\n    [class.isSticked]=\"mainPanelCollapsed && (isSticked$ | async)\"\n    [class.hasSubItem]=\"hasSubItem\"\n    [class.isLeaf]=\"depth === 1\"\n    [class.isMainPanelCollapsed]=\"mainPanelCollapsed\"\n    [attr.data-set-depth]=\"depth\"\n    (mouseenter)=\"handleContentFocused(true)\"\n    (mouseleave)=\"handleContentFocused(false)\"\n    [href]=\"item.href\"\n    [target]=\"isExternal ? '_blank' : '_self'\"\n    *ngIf=\"item.href\"\n  >\n    <ng-container *ngTemplateOutlet=\"navItem\"></ng-container>\n  </a>\n  <div\n    class=\"aui-nav-item-li__content\"\n    [class.isActive]=\"(isActive$ | async) || popMenusDisplayed\"\n    [class.isExpanded]=\"isExpanded$ | async\"\n    [class.isSticked]=\"mainPanelCollapsed && (isSticked$ | async)\"\n    [class.hasSubItem]=\"hasSubItem\"\n    [class.isLeaf]=\"depth === 1\"\n    [class.isMainPanelCollapsed]=\"mainPanelCollapsed\"\n    [attr.data-set-depth]=\"depth\"\n    (click)=\"handleContentClicked()\"\n    (mouseenter)=\"handleContentFocused(true)\"\n    (mouseleave)=\"handleContentFocused(false)\"\n    *ngIf=\"!item.href\"\n    [auiTooltip]=\"leafChildren\"\n    auiTooltipPosition=\"end\"\n    auiTooltipType=\"info\"\n    auiTooltipClass=\"aui-nav-leaf\"\n    [auiTooltipContext]=\"{ parent: item }\"\n    [auiTooltipDisabled]=\"!(hasSubItem && isLeaf)\"\n    (auiTooltipShow)=\"popMenusDisplayed = true\"\n    (auiTooltipHide)=\"popMenusDisplayed = false\"\n  >\n    <ng-container *ngTemplateOutlet=\"navItem\"></ng-container>\n  </div>\n  <div\n    *ngIf=\"hasSubItem && displayItemContent && !isLeaf\"\n    class=\"aui-nav-item-li__sub-items\"\n  >\n    <aui-nav-item-ul\n      [hidden]=\"!(isExpanded$ | async)\"\n      [items]=\"item.children\"\n      [mainPanelCollapsed]=\"mainPanelCollapsed\"\n    ></aui-nav-item-ul>\n  </div>\n</div>\n\n<ng-template #navItem>\n  <div class=\"aui-nav-item\">\n    <div class=\"aui-nav-item__icon\" *ngIf=\"item.icon && depth === 0\">\n      <aui-icon [icon]=\"item.icon\"></aui-icon>\n    </div>\n    <div *ngIf=\"displayItemContent\" class=\"aui-nav-item__content\">\n      {{ item.label }}\n    </div>\n  </div>\n  <aui-icon\n    *ngIf=\"hasSubItem && displayItemContent && !isLeaf\"\n    class=\"aui-nav-item-li__expansion-indicator\"\n    icon=\"angle_right\"\n  ></aui-icon>\n  <ng-container *ngIf=\"hasSubItem && displayItemContent && isLeaf\">\n    <aui-icon\n      class=\"aui-nav-item-li__more\"\n      [icon]=\"(isActive$ | async) || hovered ? 'more_active' : 'more_gray'\"\n    ></aui-icon>\n  </ng-container>\n</ng-template>\n\n<ng-template #leafChildren let-parent=\"parent\">\n  <div class=\"aui-nav-leaf__title\">\n    {{ parent.label }}\n  </div>\n  <aui-nav-item-ul [items]=\"parent.children\"></aui-nav-item-ul>\n</ng-template>\n",
+                    template: "<div\n  class=\"aui-nav-item-li\"\n  [class.isActive]=\"item.depth === 0 && (isActive$ | async)\"\n  [class.isExpanded]=\"isExpanded$ | async\"\n  [class.hasDivider]=\"item.divider\"\n>\n  <div\n    class=\"aui-nav-item-li__content\"\n    [class.isActive]=\"isActive$ | async\"\n    [class.isExpanded]=\"isExpanded$ | async\"\n    [class.isSticked]=\"mainPanelCollapsed && (isSticked$ | async)\"\n    [class.hasSubItem]=\"hasSubItem\"\n    [class.isMainPanelCollapsed]=\"mainPanelCollapsed\"\n    [attr.data-set-depth]=\"item.depth\"\n    (click)=\"handleContentClicked()\"\n    (mouseenter)=\"handleContentFocused(true)\"\n    (mouseleave)=\"handleContentFocused(false)\"\n    [auiTooltip]=\"tooltipTemplate\"\n    [auiTooltipDisabled]=\"!mainPanelCollapsed || item.depth !== 0 || hasSubItem\"\n    auiTooltipType=\"info\"\n    auiTooltipPosition=\"end\"\n    auiTooltipClass=\"aui-nav-item-tooltip\"\n  >\n    <div class=\"aui-nav-item\">\n      <div class=\"aui-nav-item__icon\">\n        <ng-container\n          *ngIf=\"item.icon\"\n          [ngTemplateOutlet]=\"item.icon.template\"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"displayItemContent\" class=\"aui-nav-item__content\">\n        <ng-container [ngTemplateOutlet]=\"item.content.template\"></ng-container>\n      </div>\n    </div>\n    <aui-icon\n      *ngIf=\"hasSubItem && displayItemContent\"\n      class=\"aui-nav-item-li__expansion-indicator\"\n      icon=\"angle_left\"\n    ></aui-icon>\n  </div>\n\n  <div\n    *ngIf=\"hasSubItem && displayItemContent\"\n    class=\"aui-nav-item-li__sub-items\"\n  >\n    <aui-nav-item-ul\n      [hidden]=\"!(isExpanded$ | async)\"\n      [items]=\"item.subItems\"\n    ></aui-nav-item-ul>\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  <ng-container [ngTemplateOutlet]=\"item.content.template\"></ng-container>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-nav-item-li{position:relative}.aui-nav-item-li__content{padding:6px var(--aui-spacing-xxl);display:flex;justify-content:space-between;position:relative;cursor:pointer;border-radius:var(--aui-border-radius-m);color:rgb(var(--aui-color-n-3));align-items:center;transition:all .3s ease}.aui-nav-item-li__content aui-icon{color:rgb(var(--aui-color-n-4))}.aui-nav-item-li__content:active,.aui-nav-item-li__content:hover,.aui-nav-item-li__content:link,.aui-nav-item-li__content:visited{color:rgb(var(--aui-color-n-3))}.aui-nav-item-li__content:active,.aui-nav-item-li__content:focus,.aui-nav-item-li__content:hover{text-decoration:none}.aui-nav-item-li__content.isActive,.aui-nav-item-li__content:hover{background-color:rgb(var(--aui-color-p-5))}.aui-nav-item-li__content.isActive,.aui-nav-item-li__content.isActive aui-icon{color:rgb(var(--aui-color-primary))}.aui-nav-item-li__content.isActive.hasSubItem:not(.isLeaf){background-color:transparent}.aui-nav-item-li__content[data-set-depth=\"0\"]{padding:10px var(--aui-spacing-xxl);font-weight:500}.aui-nav-item-li__content[data-set-depth=\"1\"]{padding-left:48px}.aui-nav-item-li__expansion-indicator,.aui-nav-item-li__more{margin-left:var(--aui-spacing-xl);width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);line-height:var(--aui-icon-size-m);font-size:var(--aui-icon-size-m);display:inline-flex}.aui-nav-item-li__content.isExpanded .aui-nav-item-li__expansion-indicator{transform:rotate(90deg)}.aui-nav-item{display:flex;align-items:center;width:100%}.aui-nav-item__icon{margin-right:var(--aui-spacing-l);width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);line-height:var(--aui-icon-size-m);font-size:var(--aui-icon-size-m);display:inline-flex}.aui-nav-item__content{width:100%;line-height:20px;max-width:120px;font-size:var(--aui-font-size-m)}.aui-nav-leaf__title{font-size:var(--aui-font-size-l);color:rgb(var(--aui-color-n-2));padding-bottom:var(--aui-spacing-l);border-bottom:1px solid rgb(var(--aui-color-n-9));margin-bottom:6px;font-weight:500}.aui-nav-leaf .aui-nav-item-li__content{padding:6px var(--aui-spacing-xl)}.aui-nav-leaf .aui-nav-item{min-width:116px}"]
+                    styles: [".aui-nav-item-li{position:relative}.aui-nav-item-li.isExpanded{background-color:#272727}.aui-nav-item-li.isActive:before{content:\"\";display:block;width:4px;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#007af5}.aui-nav-item-li.hasDivider{margin-bottom:9px}.aui-nav-item-li.hasDivider:after{content:\"\";display:block;box-sizing:border-box;position:absolute;left:0;bottom:-9px;padding:4px 8px;height:9px;width:100%;background-clip:content-box;background-color:#555}.aui-nav-item-ul.isMainPanelCollapsed .aui-nav-item-li.hasDivider:after{padding:4px}.aui-nav-item-li__content{padding:7px 12px 7px 16px;display:flex;justify-content:space-between;position:relative;cursor:pointer}.aui-nav-item-li__content:hover{color:#fff;background-color:#3d3d3d}.aui-nav-item-li__content.isActive.hasSubItem:not(.isExpanded),.aui-nav-item-li__content.isActive:not(.hasSubItem){color:#fff}.aui-nav-item-li__content[data-set-depth=\"0\"]{padding:13px 12px 13px 16px}.aui-nav-item-li__content[data-set-depth=\"0\"].isMainPanelCollapsed.hasSubItem:after{content:\"\";position:absolute;left:36px;bottom:12px;width:0;height:0;border-left:4px solid transparent;border-bottom:4px solid}.aui-nav-item-li__content[data-set-depth=\"0\"].isMainPanelCollapsed.isActive{background-color:#333}.aui-nav-item-li__content[data-set-depth=\"0\"].isMainPanelCollapsed.isSticked{color:#fff;background-color:#272727}.aui-nav-item-li__content[data-set-depth=\"0\"].isMainPanelCollapsed:hover{color:#fff}.aui-nav-item-li__content[data-set-depth=\"0\"].isMainPanelCollapsed.hasSubItem:hover{background-color:#272727}.aui-nav-item-li__content[data-set-depth=\"2\"]{padding-left:28px}.aui-nav-item-li__expansion-indicator{margin-left:8px;font-size:16px;line-height:18px}.aui-nav-item-li__content.isExpanded .aui-nav-item-li__expansion-indicator{transform:rotate(-90deg)}.aui-nav-item{display:flex;align-items:center;width:100%}.aui-nav-item__icon{margin-right:8px;width:16px;height:18px;line-height:18px;font-size:16px}.aui-nav-item__content{width:100%;font-size:14px;line-height:18px}.aui-tooltip.aui-nav-item-tooltip{padding:2px 6px;color:rgb(var(--aui-color-n-1))}"]
                 },] }
     ];
     NavItemLiComponent.ctorParameters = function () { return [
@@ -9500,8 +9792,93 @@
     NavMenuModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule, scrolling.ScrollingModule, IconModule, TooltipModule],
-                    declarations: [NavMenuComponent, NavItemUlComponent, NavItemLiComponent],
-                    exports: [NavMenuComponent],
+                    declarations: [
+                        NavMenuComponent,
+                        NavItemGroupComponent,
+                        NavItemComponent,
+                        NavItemIconDirective,
+                        NavItemContentDirective,
+                        NavItemGroupTitleDirective,
+                        NavItemUlComponent,
+                        NavItemLiComponent,
+                    ],
+                    exports: [
+                        NavMenuComponent,
+                        NavItemGroupComponent,
+                        NavItemComponent,
+                        NavItemIconDirective,
+                        NavItemContentDirective,
+                        NavItemGroupTitleDirective,
+                    ],
+                },] }
+    ];
+
+    var PlatformNavComponent = /** @class */ (function () {
+        function PlatformNavComponent() {
+            this.mainPanelCollapsed = false;
+            this.secondaryPanelCollapsed = false;
+            this.hideMainPanelToggle = false;
+            this.hideSecondaryPanelToggle = false;
+            this.theme = 'dark';
+            this.mainPanelCollapsedChange = new i0.EventEmitter();
+            this.secondaryPanelCollapsedChange = new i0.EventEmitter();
+            this.activatedKeyChange = new i0.EventEmitter();
+            this.activatedItemChange = new i0.EventEmitter();
+        }
+        PlatformNavComponent.prototype.handleActivatedKeyChange = function (key) {
+            this.activatedKeyChange.emit(key);
+            this.activatedItemChange.emit(this.findActivatedItem(key));
+        };
+        PlatformNavComponent.prototype.trackByKey = function (_, item) {
+            return item.key;
+        };
+        PlatformNavComponent.prototype.findActivatedItem = function (key) {
+            var items = this.items ||
+                this.groups.reduce(function (prevValue, currValue) { return __spread(prevValue, currValue.items); }, []);
+            return this.flatItems(items).find(function (item) { return item.key === key; });
+        };
+        PlatformNavComponent.prototype.flatItems = function (items) {
+            var _this = this;
+            return items.reduce(function (prevValue, currValue) { return currValue.children
+                ? __spread(prevValue, _this.flatItems(currValue.children)) : __spread(prevValue, [currValue]); }, []);
+        };
+        return PlatformNavComponent;
+    }());
+    PlatformNavComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-platform-nav',
+                    template: "<aui-nav-menu\n  class=\"aui-platform-nav\"\n  [activatedKey]=\"activatedKey\"\n  [mainPanelCollapsed]=\"mainPanelCollapsed\"\n  [secondaryPanelCollapsed]=\"secondaryPanelCollapsed\"\n  [hideMainPanelToggle]=\"hideMainPanelToggle\"\n  [hideSecondaryPanelToggle]=\"hideSecondaryPanelToggle\"\n  [theme]=\"theme\"\n  (activatedKeyChange)=\"handleActivatedKeyChange($event)\"\n  (mainPanelCollapsedChange)=\"mainPanelCollapsedChange.emit($event)\"\n  (secondaryPanelCollapsedChange)=\"secondaryPanelCollapsedChange.emit($event)\"\n>\n  <ng-container *ngIf=\"items\">\n    <aui-nav-item\n      *ngFor=\"let item of items; trackBy: trackByKey\"\n      [key]=\"item.key\"\n      [divider]=\"item.divider\"\n    >\n      <aui-icon *auiNavItemIcon [icon]=\"item.icon\"></aui-icon>\n      <div *auiNavItemContent class=\"aui-platform-nav__item\">\n        <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n        <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n          {{ item.stage }}\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"item.children\">\n        <aui-nav-item\n          *ngFor=\"let item of item.children; trackBy: trackByKey\"\n          [key]=\"item.key\"\n          [divider]=\"item.divider\"\n        >\n          <div *auiNavItemContent class=\"aui-platform-nav__item\">\n            <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n            <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n              {{ item.stage }}\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"item.children\">\n            <aui-nav-item\n              *ngFor=\"let item of item.children; trackBy: trackByKey\"\n              [key]=\"item.key\"\n              [divider]=\"item.divider\"\n            >\n              <div *auiNavItemContent class=\"aui-platform-nav__item\">\n                <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n                <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n                  {{ item.stage }}\n                </div>\n              </div>\n            </aui-nav-item>\n          </ng-container>\n        </aui-nav-item>\n      </ng-container>\n    </aui-nav-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups\">\n    <aui-nav-item-group *ngFor=\"let group of groups\">\n      <ng-template *ngIf=\"group.title\" auiNavItemGroupTitle>\n        {{ group.title }}\n      </ng-template>\n      <aui-nav-item\n        *ngFor=\"let item of group.items; trackBy: trackByKey\"\n        [key]=\"item.key\"\n        [divider]=\"item.divider\"\n      >\n        <aui-icon *auiNavItemIcon [icon]=\"item.icon\"></aui-icon>\n        <div *auiNavItemContent class=\"aui-platform-nav__item\">\n          <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n          <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n            {{ item.stage }}\n          </div>\n        </div>\n\n        <ng-container *ngIf=\"item.children\">\n          <aui-nav-item\n            *ngFor=\"let item of item.children; trackBy: trackByKey\"\n            [key]=\"item.key\"\n            [divider]=\"item.divider\"\n          >\n            <div *auiNavItemContent class=\"aui-platform-nav__item\">\n              <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n              <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n                {{ item.stage }}\n              </div>\n            </div>\n\n            <ng-container *ngIf=\"item.children\">\n              <aui-nav-item\n                *ngFor=\"let item of item.children; trackBy: trackByKey\"\n                [key]=\"item.key\"\n                [divider]=\"item.divider\"\n              >\n                <div *auiNavItemContent class=\"aui-platform-nav__item\">\n                  <div class=\"aui-platform-nav__label\">{{ item.label }}</div>\n                  <div *ngIf=\"item.stage\" class=\"aui-platform-nav__stage\">\n                    {{ item.stage }}\n                  </div>\n                </div>\n              </aui-nav-item>\n            </ng-container>\n          </aui-nav-item>\n        </ng-container>\n      </aui-nav-item>\n    </aui-nav-item-group>\n  </ng-container>\n</aui-nav-menu>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    preserveWhitespaces: false,
+                    styles: [".aui-platform-nav__item{display:flex;justify-content:space-between;align-items:center;width:100%}.aui-platform-nav__stage{margin-left:4px;color:#ffdf00}.aui-nav-item-tooltip .aui-platform-nav__stage,.aui-platform-nav__stage{font-family:Calibri;font-size:12px;font-weight:700;font-style:italic;transform:scale(.8333)}.aui-nav-item-tooltip .aui-platform-nav__stage{display:inline-block;padding:0 4.8px;border-radius:7.2px;line-height:14.4px;color:#333;background-color:#ffdf00}"]
+                },] }
+    ];
+    PlatformNavComponent.propDecorators = {
+        items: [{ type: i0.Input }],
+        groups: [{ type: i0.Input }],
+        mainPanelCollapsed: [{ type: i0.Input }],
+        secondaryPanelCollapsed: [{ type: i0.Input }],
+        hideMainPanelToggle: [{ type: i0.Input }],
+        hideSecondaryPanelToggle: [{ type: i0.Input }],
+        activatedKey: [{ type: i0.Input }],
+        theme: [{ type: i0.Input }],
+        mainPanelCollapsedChange: [{ type: i0.Output }],
+        secondaryPanelCollapsedChange: [{ type: i0.Output }],
+        activatedKeyChange: [{ type: i0.Output }],
+        activatedItemChange: [{ type: i0.Output }]
+    };
+
+    var PlatformNavModule = /** @class */ (function () {
+        function PlatformNavModule() {
+        }
+        return PlatformNavModule;
+    }());
+    PlatformNavModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, NavMenuModule, IconModule],
+                    declarations: [PlatformNavComponent],
+                    exports: [PlatformNavComponent],
                 },] }
     ];
 
@@ -9600,6 +9977,7 @@
         // eslint-disable-next-line @typescript-eslint/no-useless-constructor
         function AccordionItemComponent(accordion, cdr, uniqueSelectionDispatcher) {
             var _this = _super.call(this, accordion, cdr, uniqueSelectionDispatcher) || this;
+            _this.hideToggle = false;
             _this.togglePosition = 'left';
             _this.expandedChange = new i0.EventEmitter();
             return _this;
@@ -10101,32 +10479,14 @@
     var EXPORTABLE = __spread(EXPORTABLE_COMPONENTS, EXPORTABLE_DIRECTIVES);
     var ScrollingModule = /** @class */ (function () {
         function ScrollingModule() {
-        }
-        return ScrollingModule;
-    }());
-    ScrollingModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: EXPORTABLE,
-                    exports: EXPORTABLE,
-                },] }
-    ];
-
-    var ThemeService = /** @class */ (function () {
-        function ThemeService() {
-        }
-        ThemeService.prototype.getCurrentColorMode = function () {
-            return (document
-                .querySelector('html')
-                .getAttribute('aui-color-mode') || 'light');
-        };
-        ThemeService.prototype.setColorMode = function (mode) {
-            document.querySelector('html').setAttribute('aui-color-mode', mode);
-        };
-        return ThemeService;
+        }
+        return ScrollingModule;
     }());
-    ThemeService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ThemeService_Factory() { return new ThemeService(); }, token: ThemeService, providedIn: "root" });
-    ThemeService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ScrollingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: EXPORTABLE,
+                    exports: EXPORTABLE,
+                },] }
     ];
 
     var uid = 0;
@@ -10760,6 +11120,13 @@
             _this.bem = bem$3;
             return _this;
         }
+        Object.defineProperty(TimePickerComponent.prototype, "rootClass", {
+            get: function () {
+                return bem$3.element('container') + " " + (this.focused ? 'isFocused' : '') + " " + (this.disabled ? 'disabled' : '');
+            },
+            enumerable: false,
+            configurable: true
+        });
         TimePickerComponent.prototype.writeValue = function (value) {
             _super.prototype.writeValue.call(this, value);
             if (!value) {
@@ -10803,7 +11170,7 @@
             }
             // dateFormatValue may need reset
             this.setValue(this.timeValue);
-            this.openChange.next(false);
+            this.submit();
         };
         TimePickerComponent.prototype.openTooltip = function () {
             if (this.tooltip.isCreated) {
@@ -10818,7 +11185,10 @@
         };
         TimePickerComponent.prototype.submit = function (close, value) {
             if (close === void 0) { close = true; }
-            close && this.tooltip.disposeTooltip();
+            if (close) {
+                this.tooltip.disposeTooltip();
+                this.openChange.next(false);
+            }
             var refer = value !== null && value !== void 0 ? value : this.timeValue;
             this.emitValue(refer
                 ? {
@@ -10833,7 +11203,7 @@
     TimePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-time-picker',
-                    template: "<div\n  [class]=\"bem.element('container')\"\n  [class.focus]=\"focused\"\n  (mouseenter)=\"hovered = true\"\n  (mouseleave)=\"hovered = false\"\n>\n  <input\n    aui-input\n    [size]=\"size\"\n    (blur)=\"focused = false; blur()\"\n    (focus)=\"focused = true\"\n    (click)=\"openTooltip()\"\n    [(ngModel)]=\"timeFormatValue\"\n    (ngModelChange)=\"changeFromInput($event)\"\n    [auiTooltip]=\"template\"\n    [placeholder]=\"placeholder\"\n    [auiTooltipDisabled]=\"disabled\"\n    [class.disabled]=\"disabled\"\n    [auiTooltipPosition]=\"tooltipPosition\"\n    auiTooltipTrigger=\"manual\"\n    #tooltip=\"auiTooltip\"\n    auiTooltipType=\"plain\"\n  />\n  <span auiInputAddonAfter [class]=\"bem.element('icon')\" *ngIf=\"showIcon\">\n    <aui-icon\n      *ngIf=\"clearable && timeFormatValue && hovered; else clock\"\n      class=\"clear\"\n      icon=\"close_small\"\n      (click)=\"clear()\"\n    ></aui-icon>\n    <ng-template #clock>\n      <aui-icon icon=\"time\"></aui-icon>\n    </ng-template>\n  </span>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    (click)=\"$event.stopImmediatePropagation()\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [disabled]=\"disabled\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n  ></aui-time-picker-panel>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  [class.focus]=\"focused\"\n  [class.disabled]=\"disabled\"\n  (mouseenter)=\"!disabled && (hovered = true)\"\n  (mouseleave)=\"!disabled && (hovered = false)\"\n>\n  <input\n    aui-input\n    [size]=\"size\"\n    (blur)=\"focused = false; blur()\"\n    (focus)=\"focused = true\"\n    (click)=\"openTooltip()\"\n    [(ngModel)]=\"timeFormatValue\"\n    (ngModelChange)=\"changeFromInput($event)\"\n    [auiTooltip]=\"template\"\n    [placeholder]=\"placeholder\"\n    [auiTooltipDisabled]=\"disabled\"\n    [disabled]=\"disabled\"\n    [auiTooltipPosition]=\"tooltipPosition\"\n    auiTooltipTrigger=\"manual\"\n    #tooltip=\"auiTooltip\"\n    auiTooltipType=\"plain\"\n  />\n  <span auiInputAddonAfter [class]=\"bem.element('icon')\" *ngIf=\"showIcon\">\n    <aui-icon\n      *ngIf=\"clearable && timeFormatValue && hovered; else clock\"\n      class=\"clear\"\n      icon=\"close_small\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></aui-icon>\n    <ng-template #clock>\n      <aui-icon icon=\"time\"></aui-icon>\n    </ng-template>\n  </span>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [disabled]=\"disabled\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n  ></aui-time-picker-panel>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -10843,7 +11213,7 @@
                             multi: true,
                         },
                     ],
-                    styles: ["::ng-deep .aui-input-group__addon.aui-input-group__addon--after{background-color:initial;border:none}aui-time-picker.ng-invalid.ng-dirty .aui-time-picker__container,aui-time-picker.ng-invalid.ng-submitted .aui-time-picker__container{border-color:#eb0027!important}.aui-time-picker__container{display:inline-flex;border:1px solid #ccc}.aui-time-picker__container.focus,.aui-time-picker__container:hover{border-color:#007af5}.aui-time-picker__container>.aui-input{border:none}.aui-time-picker__container>.aui-input[readonly]{background-color:initial;cursor:pointer}.aui-time-picker__container>.aui-input.disabled{cursor:not-allowed}.aui-time-picker__icon{color:rgb(var(--aui-color-n-4));font-size:16px;width:16px;height:16px;align-self:center;margin-right:6px}.aui-time-picker__icon .clear{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-time-picker__icon .clear:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
+                    styles: ["::ng-deep .aui-input-group__addon.aui-input-group__addon--after{background-color:initial;border:none}aui-time-picker.ng-invalid.ng-dirty .aui-time-picker__container,aui-time-picker.ng-invalid.ng-submitted .aui-time-picker__container{border-color:rgb(var(--aui-color-red))!important}aui-time-picker.ng-invalid.ng-dirty .aui-time-picker__container.isFocused,aui-time-picker.ng-invalid.ng-submitted .aui-time-picker__container.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}.aui-time-picker__container{display:flex;border-radius:var(--aui-border-radius-m);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9))}.aui-time-picker__container.disabled{cursor:not-allowed;background-color:rgb(var(--aui-color-n-8))}.aui-time-picker__container:hover:not(.disabled){border-color:rgb(var(--aui-color-primary))}.aui-time-picker__container.isFocused:not(.disabled){border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-time-picker__container>.aui-input{border:none}.aui-time-picker__container>.aui-input[readonly]{background-color:initial;cursor:pointer}.aui-time-picker__container>.aui-input:focus{outline:none;box-shadow:none}.aui-time-picker__icon{color:rgb(var(--aui-color-n-4));font-size:16px;width:16px;height:16px;line-height:16px;align-self:center;margin-right:6px}.aui-time-picker__icon .clear{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-time-picker__icon .clear:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
                 },] }
     ];
     TimePickerComponent.propDecorators = {
@@ -11067,7 +11437,7 @@
     TimePickerPanelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-time-picker-panel',
-                    template: "<div\n  *ngIf=\"enabledColumns\"\n  [class]=\"bem.element('wrapper')\"\n  [style.width.px]=\"totalWidth\"\n>\n  <div [class]=\"bem.element('content')\">\n    <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n      <ul>\n        <li\n          *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Hour),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Hour,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n    <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n      <ul>\n        <li\n          *ngFor=\"\n            let item of getControlTypeConfig(TimePickerControlType.Minute);\n            trackBy: trackBy\n          \"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Minute),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Minute,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n    <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n      <ul>\n        <li\n          *ngFor=\"\n            let item of getControlTypeConfig(TimePickerControlType.Second)\n          \"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Second),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Second,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Second)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n    <div [class]=\"bem.element('footer')\">\n      <button\n        aui-button=\"text\"\n        (click)=\"selectNow()\"\n        [size]=\"ComponentSize.Small\"\n      >\n        {{ 'now' | auiI18n }}\n      </button>\n      <button\n        aui-button=\"primary\"\n        [size]=\"ComponentSize.Small\"\n        (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n      >\n        {{ 'confirm' | auiI18n }}\n      </button>\n    </div>\n  </ng-container>\n  <ng-template #customFooter>\n    <ng-container\n      [ngTemplateOutlet]=\"footerTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: this }\"\n    ></ng-container>\n  </ng-template>\n</div>\n",
+                    template: "<div\n  *ngIf=\"enabledColumns\"\n  [class]=\"bem.element('wrapper')\"\n  [style.width.px]=\"totalWidth\"\n>\n  <div [class]=\"bem.element('content')\">\n    <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n      <ul>\n        <li\n          *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Hour),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Hour,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n    <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n      <ul>\n        <li\n          *ngFor=\"\n            let item of getControlTypeConfig(TimePickerControlType.Minute);\n            trackBy: trackBy\n          \"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Minute),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Minute,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n    <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n      <ul>\n        <li\n          *ngFor=\"\n            let item of getControlTypeConfig(TimePickerControlType.Second)\n          \"\n          [class]=\"bem.element('cell')\"\n          [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n          [ngClass]=\"{\n            disabled: isDisabled(item, TimePickerControlType.Second),\n            selected: matchValue(\n              item,\n              TimePickerControlType.Second,\n              snapshot.value\n            )\n          }\"\n          (click)=\"selectValue(item, TimePickerControlType.Second)\"\n        >\n          {{ item | number: '2.0-0' }}\n        </li>\n      </ul>\n      <div [class]=\"bem.element('column-strut')\"></div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n    <div [class]=\"bem.element('footer')\">\n      <button\n        aui-button=\"inline\"\n        (click)=\"selectNow()\"\n        [size]=\"ComponentSize.Small\"\n      >\n        {{ 'now' | auiI18n }}\n      </button>\n      <button\n        aui-button=\"primary\"\n        [size]=\"ComponentSize.Small\"\n        (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n      >\n        {{ 'confirm' | auiI18n }}\n      </button>\n    </div>\n  </ng-container>\n  <ng-template #customFooter>\n    <ng-container\n      [ngTemplateOutlet]=\"footerTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: this }\"\n    ></ng-container>\n  </ng-template>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -11112,7 +11482,7 @@
                         forms.FormsModule,
                         forms.ReactiveFormsModule,
                         portal.PortalModule,
-                        overlay.OverlayModule,
+                        i1.OverlayModule,
                         common.CommonModule,
                         InputModule,
                         TooltipModule,
@@ -11179,7 +11549,7 @@
             this.anchor = this.selectedDate;
             this.selectedDate = updateDateByTimeModel(this.selectedDate, this.selectedTime);
             if (this.type === this.currentNavType) {
-                this.emitValueChange(this.selectedDate);
+                this.confirmValue(this.selectedDate, !this.showTime);
             }
             var nextNavRange = nextNavRangeType(this.navRange, getNavRangeByType(this.type));
             if (this.navRange !== nextNavRange) {
@@ -11198,12 +11568,15 @@
             this.selectedDate = updateDateByTimeModel(this.selectedDate, time);
             this.emitValueChange(this.selectedDate);
         };
+        DatePickerPanelComponent.prototype.setToday = function () {
+            this.confirmValue(dayjs__default['default'](), true);
+        };
         return DatePickerPanelComponent;
     }(CommonFormControl));
     DatePickerPanelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-date-picker-panel',
-                    template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <aui-calendar-footer\n    (clear)=\"clear.next()\"\n    (confirm)=\"confirmValue()\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    *ngIf=\"showFooter\"\n  >\n    <ng-container\n      *ngIf=\"footerTemplate; else default\"\n      [ngTemplateOutlet]=\"footerTemplate\"\n      [ngTemplateOutletContext]=\"{ context: this }\"\n    ></ng-container>\n\n    <ng-template #default>\n      <aui-time-picker\n        *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n        [showIcon]=\"false\"\n        size=\"small\"\n        [(ngModel)]=\"selectedTime\"\n        [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n        [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n        [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n        [style.width.px]=\"88\"\n        [style.display]=\"'inline-block'\"\n        tooltipPosition=\"top start\"\n        (ngModelChange)=\"timeDateChange($event)\"\n        [placeholder]=\"'select_time' | auiI18n\"\n      ></aui-time-picker>\n    </ng-template>\n  </aui-calendar-footer>\n</div>\n",
+                    template: "<div class=\"aui-date-picker-panel__wrapper\">\n  <aui-calendar-header\n    [dateNavRange]=\"navRange\"\n    [anchor]=\"anchor\"\n    [minAvail]=\"minDate\"\n    [maxAvail]=\"maxDate\"\n    [style.margin-inline.px]=\"4\"\n    (navRangeChange)=\"navRange = $event\"\n    (anchorChange)=\"anchor = $event\"\n  ></aui-calendar-header>\n\n  <aui-picker-panel\n    [style.margin]=\"'16px 0'\"\n    [anchor]=\"anchor\"\n    [navRange]=\"navRange\"\n    [disabledDate]=\"disabledDate\"\n    [weekStartDay]=\"weekStartDay\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [type]=\"type\"\n    [matchDates]=\"[selectedDate]\"\n    (select)=\"panelValueChange($event)\"\n  ></aui-picker-panel>\n\n  <ng-container\n    *ngIf=\"extraFooter\"\n    [ngTemplateOutlet]=\"extraFooter\"\n    [ngTemplateOutletContext]=\"{ context: this }\"\n  ></ng-container>\n\n  <ng-container *ngIf=\"showFooter\">\n    <aui-calendar-footer\n      (clear)=\"clear.next()\"\n      (confirm)=\"confirmValue()\"\n      [clearable]=\"clearable\"\n      [clearText]=\"clearText\"\n      *ngIf=\"showTime; else today\"\n    >\n      <ng-container\n        *ngIf=\"footerTemplate; else default\"\n        [ngTemplateOutlet]=\"footerTemplate\"\n        [ngTemplateOutletContext]=\"{ context: this }\"\n      ></ng-container>\n\n      <ng-template #default>\n        <aui-time-picker\n          *ngIf=\"currentNavType === DatePickerType.Day && showTime\"\n          [showIcon]=\"false\"\n          size=\"small\"\n          [(ngModel)]=\"selectedTime\"\n          [disableHours]=\"getDisabledTimeFn(selectedDate, 'hours')\"\n          [disableMinutes]=\"getDisabledTimeFn(selectedDate, 'minutes')\"\n          [disableSeconds]=\"getDisabledTimeFn(selectedDate, 'seconds')\"\n          [style.width.px]=\"88\"\n          [style.display]=\"'inline-block'\"\n          tooltipPosition=\"top start\"\n          (ngModelChange)=\"timeDateChange($event)\"\n          [placeholder]=\"'select_time' | auiI18n\"\n        ></aui-time-picker>\n      </ng-template>\n    </aui-calendar-footer>\n\n    <ng-template #today>\n      <aui-calendar-footer\n        *ngIf=\"type === DatePickerType.Day\"\n        [clearable]=\"false\"\n        [customAction]=\"todayBtn\"\n      >\n      </aui-calendar-footer>\n      <ng-template #todayBtn>\n        <button aui-button=\"inline\" (click)=\"setToday()\">\n          {{ 'today' | auiI18n }}\n        </button>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     providers: [
@@ -11244,7 +11617,7 @@
     CalendarFooterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-calendar-footer',
-                    template: "<div class=\"aui-calendar-footer__wrapper\">\n  <div style=\"flex: 1\">\n    <ng-content></ng-content>\n  </div>\n  <div>\n    <button\n      aui-button=\"text\"\n      *ngIf=\"clearable\"\n      (click)=\"clear.emit()\"\n      size=\"small\"\n    >\n      {{ clearText || ('clear' | auiI18n) }}\n    </button>\n    <button aui-button=\"primary\" (click)=\"confirm.emit()\" size=\"small\">\n      {{ 'confirm' | auiI18n }}\n    </button>\n  </div>\n</div>\n",
+                    template: "<div class=\"aui-calendar-footer__wrapper\">\n  <div style=\"flex: 1\">\n    <ng-content></ng-content>\n  </div>\n  <div>\n    <ng-container\n      *ngIf=\"customAction; else default\"\n      [ngTemplateOutlet]=\"customAction\"\n    >\n    </ng-container>\n    <ng-template #default>\n      <button\n        aui-button=\"text\"\n        *ngIf=\"clearable\"\n        (click)=\"clear.emit()\"\n        size=\"small\"\n      >\n        {{ clearText || ('clear' | auiI18n) }}\n      </button>\n      <button aui-button=\"primary\" (click)=\"confirm.emit()\" size=\"small\">\n        {{ 'confirm' | auiI18n }}\n      </button>\n    </ng-template>\n  </div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".aui-calendar-footer__wrapper{display:flex;flex-direction:row;justify-content:space-between;border-top:1px solid #e8e8e8;padding:8px 0 0}"]
@@ -11253,6 +11626,7 @@
     CalendarFooterComponent.propDecorators = {
         clearable: [{ type: i0.Input }],
         clearText: [{ type: i0.Input }],
+        customAction: [{ type: i0.Input }],
         confirm: [{ type: i0.Output }],
         clear: [{ type: i0.Output }]
     };
@@ -11350,10 +11724,10 @@
     CalendarHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-calendar-header',
-                    template: "<div [class]=\"bem.element('container')\">\n  <div [class]=\"bem.element('nav-action')\">\n    <ng-container\n      *ngIf=\"dateNavRange !== DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"yearControl\"\n      [ngTemplateOutletContext]=\"{ side: 'left' }\"\n    ></ng-container>\n\n    <ng-container\n      *ngIf=\"dateNavRange === DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"decadeControl\"\n      [ngTemplateOutletContext]=\"{ side: 'left' }\"\n    ></ng-container>\n  </div>\n  <!-- \u5185\u5BB9\u533A -->\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Month\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Year)\">\n      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}\n    </a>\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Month)\">\n      {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}\n    </a>\n  </span>\n\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Year\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Year)\">\n      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}\n    </a>\n  </span>\n\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Decade\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    {{ headerRange?.start.year() }}-{{ headerRange?.end?.year() }}\n  </span>\n\n  <div [class]=\"bem.element('nav-action')\">\n    <ng-container\n      *ngIf=\"dateNavRange !== DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"yearControl\"\n      [ngTemplateOutletContext]=\"{ side: 'right' }\"\n    ></ng-container>\n\n    <ng-container\n      *ngIf=\"dateNavRange === DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"decadeControl\"\n      [ngTemplateOutletContext]=\"{ side: 'right' }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #yearControl let-side=\"side\">\n  <span style=\"display: flex\">\n    <a\n      href=\"javascript:;\"\n      *ngIf=\"\n        dateNavRange === DateNavRange.Month &&\n        side === 'right' &&\n        shouldShowNav(DateNavRange.Month, side)\n      \"\n      (click)=\"navHead(DateNavRange.Month, 1)\"\n    >\n      <aui-icon icon=\"angle_right\"></aui-icon>\n    </a>\n    <a\n      href=\"javascript:;\"\n      (click)=\"navHead(DateNavRange.Year, side === 'left' ? -1 : 1)\"\n      *ngIf=\"shouldShowNav(DateNavRange.Year, side)\"\n    >\n      <aui-icon\n        [icon]=\"side === 'left' ? 'angle_double_left' : 'angle_double_right'\"\n      ></aui-icon>\n    </a>\n    <a\n      href=\"javascript:;\"\n      *ngIf=\"\n        dateNavRange === DateNavRange.Month &&\n        side === 'left' &&\n        shouldShowNav(DateNavRange.Month, side)\n      \"\n      (click)=\"navHead(DateNavRange.Month, -1)\"\n    >\n      <aui-icon icon=\"angle_left\"></aui-icon>\n    </a>\n  </span>\n</ng-template>\n\n<ng-template #decadeControl let-side=\"side\">\n  <a\n    href=\"javascript:;\"\n    (click)=\"navHead(DateNavRange.Decade, side === 'left' ? -10 : 10)\"\n    *ngIf=\"shouldShowNav(DateNavRange.Decade, side)\"\n  >\n    <aui-icon\n      [icon]=\"side === 'left' ? 'angle_double_left' : 'angle_double_right'\"\n    ></aui-icon>\n  </a>\n</ng-template>\n",
+                    template: "<div [class]=\"bem.element('container')\">\n  <div>\n    <ng-container\n      *ngIf=\"dateNavRange !== DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"yearControl\"\n      [ngTemplateOutletContext]=\"{ side: 'left' }\"\n    ></ng-container>\n\n    <ng-container\n      *ngIf=\"dateNavRange === DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"decadeControl\"\n      [ngTemplateOutletContext]=\"{ side: 'left' }\"\n    ></ng-container>\n  </div>\n  <!-- \u5185\u5BB9\u533A -->\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Month\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Year)\">\n      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}\n    </a>\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Month)\">\n      {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}\n    </a>\n  </span>\n\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Year\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    <a href=\"javascript:;\" (click)=\"clickNav(DateNavRange.Year)\">\n      {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}\n    </a>\n  </span>\n\n  <span\n    *ngIf=\"dateNavRange === DateNavRange.Decade\"\n    [class]=\"bem.element('nav-content')\"\n  >\n    {{ headerRange?.start.year() }} - {{ headerRange?.end?.year() }}\n  </span>\n\n  <div [class]=\"bem.element('nav-action')\">\n    <ng-container\n      *ngIf=\"dateNavRange !== DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"yearControl\"\n      [ngTemplateOutletContext]=\"{ side: 'right' }\"\n    ></ng-container>\n\n    <ng-container\n      *ngIf=\"dateNavRange === DateNavRange.Decade\"\n      [ngTemplateOutlet]=\"decadeControl\"\n      [ngTemplateOutletContext]=\"{ side: 'right' }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #yearControl let-side=\"side\">\n  <span style=\"display: flex\">\n    <button\n      aui-button=\"text\"\n      *ngIf=\"\n        dateNavRange === DateNavRange.Month &&\n        side === 'right' &&\n        shouldShowNav(DateNavRange.Month, side)\n      \"\n      (click)=\"navHead(DateNavRange.Month, 1)\"\n    >\n      <aui-icon icon=\"angle_right\"></aui-icon>\n    </button>\n    <button\n      aui-button=\"text\"\n      (click)=\"navHead(DateNavRange.Year, side === 'left' ? -1 : 1)\"\n      *ngIf=\"shouldShowNav(DateNavRange.Year, side)\"\n    >\n      <aui-icon\n        [icon]=\"side === 'left' ? 'angle_double_left' : 'angle_double_right'\"\n      ></aui-icon>\n    </button>\n    <button\n      aui-button=\"text\"\n      *ngIf=\"\n        dateNavRange === DateNavRange.Month &&\n        side === 'left' &&\n        shouldShowNav(DateNavRange.Month, side)\n      \"\n      (click)=\"navHead(DateNavRange.Month, -1)\"\n    >\n      <aui-icon icon=\"angle_left\"></aui-icon>\n    </button>\n  </span>\n</ng-template>\n\n<ng-template #decadeControl let-side=\"side\">\n  <button\n    aui-button=\"text\"\n    (click)=\"navHead(DateNavRange.Decade, side === 'left' ? -10 : 10)\"\n    *ngIf=\"shouldShowNav(DateNavRange.Decade, side)\"\n  >\n    <aui-icon\n      [icon]=\"side === 'left' ? 'angle_double_left' : 'angle_double_right'\"\n    ></aui-icon>\n  </button>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".aui-calendar-header__container{height:24px;display:flex;align-items:center;justify-content:space-between}.aui-calendar-header__nav-action{width:28px}.aui-calendar-header__nav-action a{color:#969799;font-size:14px}.aui-calendar-header__nav-action a:hover{color:#007af5}.aui-calendar-header__nav-content{flex:1;display:flex;justify-content:center;align-items:center;font-size:16px;color:rgb(var(--aui-color-n-1));font-weight:500}.aui-calendar-header__nav-content a{color:rgb(var(--aui-color-n-1))}.aui-calendar-header__nav-content a:hover{color:#006eff}.aui-calendar-header__nav-content a+a{margin-left:5px}"]
+                    styles: [".aui-calendar-header__container{height:24px;display:flex;align-items:center;justify-content:space-between}.aui-calendar-header__nav-content{flex:1;display:flex;justify-content:center;align-items:center;font-size:16px;color:rgb(var(--aui-color-n-1));font-weight:500}.aui-calendar-header__nav-content a{color:rgb(var(--aui-color-n-1))}.aui-calendar-header__nav-content a:hover{color:#006eff;text-decoration:none!important}.aui-calendar-header__nav-content a+a{margin-left:5px}"]
                 },] }
     ];
     CalendarHeaderComponent.propDecorators = {
@@ -11491,7 +11865,7 @@
                     template: "<div\n  [class]=\"bem.element('container')\"\n  [ngClass]=\"{\n    'day-panel-container': navRange === DateNavRange.Month,\n    'month-panel-container': navRange === DateNavRange.Year,\n    'year-panel-container': navRange === DateNavRange.Decade\n  }\"\n>\n  <div\n    [class]=\"[bem.element('row'), 'week-header'].join(' ')\"\n    *ngIf=\"navRange === DateNavRange.Month\"\n  >\n    <span *ngFor=\"let item of weekDefs\" [class]=\"bem.element('cell')\">\n      {{ item | auiI18n }}\n    </span>\n  </div>\n  <div\n    [class]=\"bem.element('row')\"\n    *ngFor=\"let row of panelData; trackBy: trackByFn\"\n  >\n    <span\n      *ngFor=\"let item of row; trackBy: trackByFn\"\n      [class]=\"bem.element('cell')\"\n      [ngClass]=\"{\n        'in-range': item.inRange && !item.isDisabled,\n        'is-active': match(item.value),\n        'is-background': item.isBackground && !item.isDisabled,\n        'is-range-start': item.isRangeStart,\n        'is-range-end': item.isRangeEnd,\n        'is-today': matchToday(item.value) && !item.isBackground,\n        'is-disabled': item.isDisabled\n      }\"\n      ><button\n        aui-button=\"text\"\n        [plain]=\"true\"\n        size=\"small\"\n        [disabled]=\"item.isDisabled\"\n        (click)=\"selectValue(item.value)\"\n        (mouseenter)=\"hovered.next(item.value)\"\n      >\n        {{ item.label\n        }}<ng-container *ngIf=\"navRange === DateNavRange.Year\"\n          >{{ 'month_suffix' | auiI18n }}\n        </ng-container>\n      </button>\n    </span>\n  </div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".aui-picker-panel__container{height:-webkit-min-content;height:-moz-min-content;height:min-content;box-sizing:border-box;justify-content:stretch;display:flex;flex-direction:column;margin:12px 9px;width:275px;align-items:center}.aui-picker-panel__container.month-panel-container button,.aui-picker-panel__container.year-panel-container button{width:56px;height:28px!important}.aui-picker-panel__container.day-panel-container{height:-webkit-min-content;height:-moz-min-content;height:min-content;padding:0;margin:0}.aui-picker-panel__container.day-panel-container button{width:22px;height:22px!important}.aui-picker-panel__container.day-panel-container .aui-picker-panel__row+.aui-picker-panel__row{margin-top:8px}.aui-picker-panel__row+.aui-picker-panel__row{margin-top:20px}.aui-picker-panel__row{flex:1;display:flex;align-items:center;font-size:14px;font-weight:400}.aui-picker-panel__row.week-header{color:rgb(var(--aui-color-n-4));margin-bottom:8px}.aui-picker-panel__row.week-header span{display:inline-block;margin:0;width:36px;text-align:center}.aui-picker-panel__cell{display:inline-flex;position:relative;align-items:center;justify-content:center;margin-inline:6px}.aui-picker-panel__cell button{box-sizing:content-box;transition:color .3s ease,background-color .3s ease}.aui-picker-panel__cell.in-range{background-color:#edf4ff;box-shadow:-6px 0 0 0 #edf4ff,6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-range-end{box-shadow:-6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-range-start{box-shadow:6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-disabled{background-color:rgb(var(--aui-color-n-8));box-shadow:-6px 0 0 0 rgb(var(--aui-color-n-8)),6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.is-disabled+.aui-picker-panel__cell:not(.is-disabled):not(.is-range-start){box-shadow:-12px 0 0 0 #fff}.aui-picker-panel__cell.is-disabled+.aui-picker-panel__cell:not(.is-disabled).is-range-start{box-shadow:-12px 0 0 0 #fff,6px 0 0 0 #edf4ff}.aui-picker-panel__cell:not(.is-disabled)+.aui-picker-panel__cell.is-disabled{box-shadow:6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.is-today button{border-color:#1890ff}.aui-picker-panel__cell.is-active button{background-color:#007af5;color:#fff}.aui-picker-panel__cell.is-background button{background-color:initial!important;color:rgba(0,0,0,.25)}"]
+                    styles: [".aui-picker-panel__container{height:-webkit-min-content;height:-moz-min-content;height:min-content;box-sizing:border-box;justify-content:stretch;display:flex;flex-direction:column;margin:12px 9px;align-items:center}.aui-picker-panel__container.month-panel-container button,.aui-picker-panel__container.year-panel-container button{width:56px;height:28px!important}.aui-picker-panel__container.day-panel-container{height:-webkit-min-content;height:-moz-min-content;height:min-content;padding:0;margin:0}.aui-picker-panel__container.day-panel-container button{height:24px!important;width:24px!important}.aui-picker-panel__container.day-panel-container .aui-picker-panel__row+.aui-picker-panel__row{margin-top:8px}.aui-picker-panel__row+.aui-picker-panel__row{margin-top:20px}.aui-picker-panel__row{flex:1;display:flex;align-items:center;font-size:14px;font-weight:400;width:100%}.aui-picker-panel__row.week-header{color:rgb(var(--aui-color-n-4));margin-bottom:8px}.aui-picker-panel__row.week-header span{display:inline-block;margin:0;width:36px;text-align:center}.aui-picker-panel__cell{display:inline-flex;position:relative;align-items:center;justify-content:center;margin-inline:6px}.aui-picker-panel__cell button{box-sizing:content-box;transition:color .3s ease,background-color .3s ease}.aui-picker-panel__cell.in-range{background-color:#edf4ff;box-shadow:-6px 0 0 0 #edf4ff,6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-range-end{box-shadow:-6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-range-start{box-shadow:6px 0 0 0 #edf4ff}.aui-picker-panel__cell.is-disabled{background-color:rgb(var(--aui-color-n-8));box-shadow:-6px 0 0 0 rgb(var(--aui-color-n-8)),6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.is-disabled button{color:rgb(var(--aui-color-n-6))!important;border-color:rgb(var(--aui-color-n-6))!important}.aui-picker-panel__cell.is-disabled+.aui-picker-panel__cell:not(.is-disabled):not(.is-range-start){box-shadow:-12px 0 0 0 #fff}.aui-picker-panel__cell.is-disabled+.aui-picker-panel__cell:not(.is-disabled).is-range-start{box-shadow:-12px 0 0 0 #fff,6px 0 0 0 #edf4ff}.aui-picker-panel__cell:not(.is-disabled)+.aui-picker-panel__cell.is-disabled{box-shadow:6px 0 0 0 rgb(var(--aui-color-n-8))}.aui-picker-panel__cell.is-today button{border:1px solid rgb(var(--aui-color-primary));color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-7))}.aui-picker-panel__cell.is-active button{background-color:#007af5;color:#fff}.aui-picker-panel__cell.is-background button{background-color:initial!important;color:rgba(0,0,0,.25)}"]
                 },] }
     ];
     PickerPanelComponent.ctorParameters = function () { return [
@@ -11625,7 +11999,7 @@
             this.syncTime();
             if (this.rangeValue.length === 2) {
                 this.reorder(this.rangeValue);
-                this.emitValueChange(this.rangeValue);
+                this.confirmValue(this.rangeValue, !this.showTime);
             }
         };
         DateRangePickerPanelComponent.prototype.reorder = function (sortedDate) {
@@ -11639,9 +12013,10 @@
                 this.matchValues[1] = date;
             }
         };
-        DateRangePickerPanelComponent.prototype.confirmValue = function () {
-            this.emitValueChange(this.rangeValue);
-            this.confirm.next();
+        DateRangePickerPanelComponent.prototype.confirmValue = function (value, closeThen) {
+            if (closeThen === void 0) { closeThen = true; }
+            this.emitValueChange(value);
+            closeThen && this.confirm.next();
         };
         DateRangePickerPanelComponent.prototype.timeChange = function (time) {
             var _a;
@@ -11680,7 +12055,7 @@
     DateRangePickerPanelComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-date-range-picker-panel',
-                    template: "<div [class]=\"bem.element('container')\">\n  <div [class]=\"bem.element('header')\">\n    <aui-calendar-header\n      [dateNavRange]=\"leftDateRange\"\n      [anchor]=\"leftAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n      (anchorChange)=\"leftAnchor = $event\"\n      [maxAvail]=\"maxHeaderAvail\"\n      [minAvail]=\"minDate\"\n    ></aui-calendar-header>\n    <aui-calendar-header\n      [dateNavRange]=\"rightDateRange\"\n      [anchor]=\"rightAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n      (anchorChange)=\"rightAnchor = $event\"\n      [minAvail]=\"minHeaderAvail\"\n      [maxAvail]=\"maxDate\"\n    ></aui-calendar-header>\n  </div>\n  <div [class]=\"bem.element('body')\">\n    <aui-picker-panel\n      [navRange]=\"leftDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"leftAnchor\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n      [weekStartDay]=\"weekStartDay\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Left)\"\n    ></aui-picker-panel>\n    <aui-picker-panel\n      [navRange]=\"rightDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"rightAnchor\"\n      [weekStartDay]=\"weekStartDay\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Right)\"\n    ></aui-picker-panel>\n  </div>\n\n  <aui-calendar-footer\n    [class]=\"bem.element('footer')\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    (clear)=\"clear.next()\"\n    (confirm)=\"confirmValue()\"\n    *ngIf=\"showFooter\"\n  >\n    <div [class]=\"bem.element('footer-content')\" *ngIf=\"showTime\">\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'start_date' | auiI18n,\n          value: rangeValue[0]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        [(ngModel)]=\"startTime\"\n        size=\"small\"\n        (ngModelChange)=\"timeChange($event)\"\n        [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n        [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n        [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n        class=\"time-picker\"\n      ></aui-time-picker>\n\n      <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'end_date' | auiI18n,\n          value: rangeValue[1]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        size=\"small\"\n        [(ngModel)]=\"endTime\"\n        [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n        [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n        [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n        (ngModelChange)=\"timeChange($event)\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n        class=\"time-picker\"\n      ></aui-time-picker>\n    </div>\n  </aui-calendar-footer>\n</div>\n\n<ng-template #datePlaceholder let-placeholder=\"placeholder\" let-value=\"value\">\n  <span *ngIf=\"!value\" class=\"placeholder date-holder\">{{ placeholder }}</span>\n  <span *ngIf=\"value\" class=\"date-value date-holder\">{{\n    value | date: FOOTER_DATE_FORMAT\n  }}</span>\n</ng-template>\n",
+                    template: "<div [class]=\"bem.element('container')\">\n  <div [class]=\"bem.element('header')\">\n    <aui-calendar-header\n      [dateNavRange]=\"leftDateRange\"\n      [anchor]=\"leftAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n      (anchorChange)=\"leftAnchor = $event\"\n      [maxAvail]=\"maxHeaderAvail\"\n      [minAvail]=\"minDate\"\n    ></aui-calendar-header>\n    <aui-calendar-header\n      [dateNavRange]=\"rightDateRange\"\n      [anchor]=\"rightAnchor\"\n      (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n      (anchorChange)=\"rightAnchor = $event\"\n      [minAvail]=\"minHeaderAvail\"\n      [maxAvail]=\"maxDate\"\n    ></aui-calendar-header>\n  </div>\n  <div [class]=\"bem.element('body')\">\n    <aui-picker-panel\n      [navRange]=\"leftDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"leftAnchor\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n      [weekStartDay]=\"weekStartDay\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Left)\"\n    ></aui-picker-panel>\n    <aui-picker-panel\n      [navRange]=\"rightDateRange\"\n      [type]=\"DatePickerType.Day\"\n      [anchor]=\"rightAnchor\"\n      [weekStartDay]=\"weekStartDay\"\n      [matchDates]=\"matchValues\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n      (hovered)=\"hoverItem($event)\"\n      (select)=\"selectPickerPanel($event, Side.Right)\"\n    ></aui-picker-panel>\n  </div>\n\n  <aui-calendar-footer\n    [class]=\"bem.element('footer')\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    (clear)=\"clear.next()\"\n    (confirm)=\"confirmValue(rangeValue)\"\n    *ngIf=\"showFooter && showTime\"\n  >\n    <div [class]=\"bem.element('footer-content')\" *ngIf=\"showTime\">\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'start_date' | auiI18n,\n          value: rangeValue[0]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        [(ngModel)]=\"startTime\"\n        size=\"small\"\n        (ngModelChange)=\"timeChange($event)\"\n        [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n        [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n        [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n        class=\"time-picker\"\n      ></aui-time-picker>\n\n      <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n      <ng-container\n        [ngTemplateOutlet]=\"datePlaceholder\"\n        [ngTemplateOutletContext]=\"{\n          placeholder: 'end_date' | auiI18n,\n          value: rangeValue[1]\n        }\"\n      ></ng-container>\n      <aui-time-picker\n        [showIcon]=\"false\"\n        size=\"small\"\n        [(ngModel)]=\"endTime\"\n        [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n        [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n        [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n        (ngModelChange)=\"timeChange($event)\"\n        [placeholder]=\"'select_time' | auiI18n\"\n        tooltipPosition=\"top start\"\n        class=\"time-picker\"\n      ></aui-time-picker>\n    </div>\n  </aui-calendar-footer>\n</div>\n\n<ng-template #datePlaceholder let-placeholder=\"placeholder\" let-value=\"value\">\n  <span *ngIf=\"!value\" class=\"placeholder date-holder\">{{ placeholder }}</span>\n  <span *ngIf=\"value\" class=\"date-value date-holder\">{{\n    value | date: FOOTER_DATE_FORMAT\n  }}</span>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -11756,7 +12131,7 @@
     DatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-date-picker',
-                    template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  [style.display]=\"'inline-block'\"\n  [auiTooltip]=\"template\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  (auiTooltipHide)=\"openChange.next(false); emitValueChange(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.disposeTooltip(); emitValueChange(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n",
+                    template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipHide)=\"openChange.next(false); emitValueChange(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.disposeTooltip(); emitValueChange(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     // tslint:disable-next-line: validate-decorators
                     encapsulation: i0.ViewEncapsulation.Emulated,
@@ -11785,6 +12160,7 @@
         showFooter: [{ type: i0.Input }],
         footerTemplate: [{ type: i0.Input }],
         extraFooter: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
         openChange: [{ type: i0.Output }]
     };
 
@@ -11822,7 +12198,7 @@
     RangePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-range-picker',
-                    template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [disabled]=\"!!disabled\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipHide)=\"openChange.next(false); emitValueChange(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.disposeTooltip(); emitValueChange(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n",
+                    template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [disabled]=\"!!disabled\"\n  style=\"display: flex\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipHide)=\"openChange.next(false); emitValueChange(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.disposeTooltip(); emitValueChange(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n",
                     // provide tooltip class
                     // tslint:disable-next-line: validate-decorators
                     encapsulation: i0.ViewEncapsulation.Emulated,
@@ -11886,7 +12262,7 @@
         });
         Object.defineProperty(DatePickerTriggerComponent.prototype, "showClear", {
             get: function () {
-                return this.clearable && this.hasValue && this.hovered;
+                return !this.disabled && this.clearable && this.hasValue && this.hovered;
             },
             enumerable: false,
             configurable: true
@@ -11899,11 +12275,11 @@
     DatePickerTriggerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-date-picker-trigger',
-                    template: "<div\n  [class]=\"bem.element('container')\"\n  [ngClass]=\"{\n    'is-focus': isFocus,\n    'is-range': isRange,\n    'is-disabled': disabled\n  }\"\n  (mouseenter)=\"hovered = true\"\n  (mouseleave)=\"hovered = false\"\n>\n  <span [class]=\"bem.element('content')\">\n    <ng-container *ngIf=\"isRange\">\n      <input\n        style=\"flex: 1\"\n        aui-input\n        #focusRef\n        [value]=\"$any(value || [])[0]?.format(format)\"\n        [readonly]=\"true\"\n        [size]=\"size\"\n        (focus)=\"leftFocus = true\"\n        (blur)=\"leftFocus = false; blur.next()\"\n        [placeholder]=\"startPlaceholder || ('start_date' | auiI18n)\"\n      />\n      <span class=\"placeholder\" (click)=\"focusInput()\">{{\n        'to' | auiI18n\n      }}</span>\n      <input\n        style=\"flex: 1\"\n        aui-input\n        [value]=\"$any(value || [])[1]?.format(format)\"\n        [readonly]=\"true\"\n        [size]=\"size\"\n        (focus)=\"rightFocus = true\"\n        (blur)=\"rightFocus = false; blur.next()\"\n        [placeholder]=\"endPlaceholder || ('end_date' | auiI18n)\"\n      />\n    </ng-container>\n    <ng-container *ngIf=\"!isRange\">\n      <input\n        aui-input\n        auiTooltipType=\"plain\"\n        [value]=\"$any(value)?.format(format)\"\n        [readonly]=\"true\"\n        #focusRef\n        [size]=\"size\"\n        auiTooltipType=\"info\"\n        (focus)=\"centerFocus = true\"\n        (blur)=\"centerFocus = false; blur.next()\"\n        [placeholder]=\"placeholder || ('select_date' | auiI18n)\"\n      />\n    </ng-container>\n  </span>\n  <span [class]=\"bem.element('addon')\" (click)=\"focusInput()\">\n    <aui-icon\n      *ngIf=\"showClear; else calendar\"\n      class=\"clear\"\n      icon=\"close_small\"\n      (click)=\"$event.stopImmediatePropagation(); this.clear.next()\"\n    ></aui-icon>\n    <ng-template #calendar>\n      <aui-icon icon=\"calendar\"></aui-icon>\n    </ng-template>\n  </span>\n</div>\n",
+                    template: "<div\n  [class]=\"bem.element('container')\"\n  [ngClass]=\"{\n    isFocused: isFocus,\n    'is-range': isRange,\n    disabled: disabled\n  }\"\n  (mouseenter)=\"hovered = true\"\n  (mouseleave)=\"hovered = false\"\n>\n  <span [class]=\"bem.element('content')\">\n    <ng-container *ngIf=\"isRange\">\n      <input\n        style=\"flex: 1\"\n        aui-input\n        #focusRef\n        [value]=\"$any(value || [])[0]?.format(format)\"\n        [readonly]=\"true\"\n        [size]=\"size\"\n        (focus)=\"leftFocus = true\"\n        (blur)=\"leftFocus = false; blur.next()\"\n        [placeholder]=\"startPlaceholder || ('start_date' | auiI18n)\"\n      />\n      <span class=\"placeholder\" (click)=\"focusInput()\">{{\n        'to' | auiI18n\n      }}</span>\n      <input\n        style=\"flex: 1\"\n        aui-input\n        [value]=\"$any(value || [])[1]?.format(format)\"\n        [readonly]=\"true\"\n        [size]=\"size\"\n        (focus)=\"rightFocus = true\"\n        (blur)=\"rightFocus = false; blur.next()\"\n        [placeholder]=\"endPlaceholder || ('end_date' | auiI18n)\"\n      />\n    </ng-container>\n    <ng-container *ngIf=\"!isRange\">\n      <input\n        aui-input\n        auiTooltipType=\"plain\"\n        [value]=\"$any(value)?.format(format)\"\n        [readonly]=\"true\"\n        #focusRef\n        [size]=\"size\"\n        auiTooltipType=\"info\"\n        (focus)=\"centerFocus = true\"\n        (blur)=\"centerFocus = false; blur.next()\"\n        [placeholder]=\"placeholder || ('select_date' | auiI18n)\"\n      />\n    </ng-container>\n  </span>\n  <span [class]=\"bem.element('addon')\" (click)=\"focusInput()\">\n    <aui-icon\n      *ngIf=\"showClear; else calendar\"\n      class=\"clear\"\n      icon=\"close_small\"\n      (click)=\"$event.stopImmediatePropagation(); this.clear.next()\"\n    ></aui-icon>\n    <ng-template #calendar>\n      <aui-icon icon=\"calendar\"></aui-icon>\n    </ng-template>\n  </span>\n</div>\n",
                     // tslint:disable-next-line: validate-decorators
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["aui-date-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container,aui-date-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container,aui-range-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container,aui-range-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container{border-color:#eb0027!important}:host{display:inline-block;width:100%}.aui-date-picker-trigger__container{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;border:1px solid #c8cacd;position:relative;cursor:pointer}.aui-date-picker-trigger__container input[readonly]{cursor:pointer;background-color:#fff;border:#c8cacd}.aui-date-picker-trigger__container .aui-input--medium{height:30px}.aui-date-picker-trigger__container .aui-input--large{height:38px}.aui-date-picker-trigger__container .aui-input--small{height:26px}.aui-date-picker-trigger__container .aui-input--mini{height:22px}.aui-date-picker-trigger__container.is-focus,.aui-date-picker-trigger__container:hover{border-color:#007af5}.aui-date-picker-trigger__container.is-disabled{background:rgb(var(--aui-color-n-8));border:1px solid #c8cacd!important}.aui-date-picker-trigger__container.is-disabled input[readonly]{background:transparent;cursor:not-allowed}.aui-date-picker-trigger__container.is-disabled:hover{cursor:not-allowed}.aui-date-picker-trigger__content{flex:1;display:flex;align-items:center}.aui-date-picker-trigger__content .placeholder{color:rgb(var(--aui-color-n-6))}.aui-date-picker-trigger__addon{color:rgb(var(--aui-color-n-4));margin-right:8px;font-size:16px;width:16px;height:16px;line-height:1em}.aui-date-picker-trigger__addon .clear{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-date-picker-trigger__addon .clear:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
+                    styles: ["aui-date-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container,aui-date-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container,aui-range-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container,aui-range-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container{border-color:rgb(var(--aui-color-red))!important}aui-date-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container.isFocused,aui-date-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container.isFocused,aui-range-picker.ng-invalid.ng-dirty .aui-date-picker-trigger__container.isFocused,aui-range-picker.ng-invalid.ng-submitted .aui-date-picker-trigger__container.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}:host{display:block}.aui-date-picker-trigger__container{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border:1px solid #c8cacd;position:relative;width:100%;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-m)}.aui-date-picker-trigger__container:hover:not(.disabled){border-color:rgb(var(--aui-color-primary));cursor:pointer}.aui-date-picker-trigger__container .aui-input--medium{height:30px}.aui-date-picker-trigger__container .aui-input--large{height:38px}.aui-date-picker-trigger__container .aui-input--small{height:26px}.aui-date-picker-trigger__container .aui-input--mini{height:22px}.aui-date-picker-trigger__container.isFocused:not(.disabled){border-color:rgb(var(--aui-color-primary));box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}.aui-date-picker-trigger__container .aui-input{border:none;background-color:transparent!important}.aui-date-picker-trigger__container .aui-input:hover{cursor:pointer}.aui-date-picker-trigger__container .aui-input:focus{outline:none;box-shadow:none}.aui-date-picker-trigger__container.disabled{background:rgb(var(--aui-color-n-8));border:1px solid #c8cacd!important}.aui-date-picker-trigger__container.disabled .aui-input{background:transparent;cursor:not-allowed;color:rgb(var(--aui-color-n-7))}.aui-date-picker-trigger__container.disabled:hover{cursor:not-allowed}.aui-date-picker-trigger__content{flex:1;display:flex;align-items:center}.aui-date-picker-trigger__content .placeholder{color:rgb(var(--aui-color-n-6))}.aui-date-picker-trigger__addon{color:rgb(var(--aui-color-n-4));margin-right:8px;font-size:16px;width:16px;height:16px;line-height:16px}.aui-date-picker-trigger__addon .clear{border-radius:50%;color:rgb(var(--aui-color-n-4));cursor:pointer;transition:all .3s ease}.aui-date-picker-trigger__addon .clear:hover{color:#fff;background-color:rgb(var(--aui-color-n-4))}"]
                 },] }
     ];
     DatePickerTriggerComponent.ctorParameters = function () { return []; };
@@ -11955,6 +12331,545 @@
                 },] }
     ];
 
+    (function (DrawerSize) {
+        DrawerSize["Small"] = "small";
+        DrawerSize["Medium"] = "medium";
+        DrawerSize["Big"] = "big";
+    })(exports.DrawerSize || (exports.DrawerSize = {}));
+    var DrawerRef = /** @class */ (function () {
+        function DrawerRef() {
+        }
+        return DrawerRef;
+    }());
+
+    /**
+     * @packageDocumentation
+     * @module page-guard
+     */
+    var DrawerHeaderDirective = /** @class */ (function () {
+        function DrawerHeaderDirective() {
+        }
+        return DrawerHeaderDirective;
+    }());
+    DrawerHeaderDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiDrawerHeader]',
+                },] }
+    ];
+    var DrawerContentDirective = /** @class */ (function () {
+        function DrawerContentDirective() {
+        }
+        return DrawerContentDirective;
+    }());
+    DrawerContentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiDrawerContent]',
+                },] }
+    ];
+    var DrawerFooterDirective = /** @class */ (function () {
+        function DrawerFooterDirective() {
+        }
+        return DrawerFooterDirective;
+    }());
+    DrawerFooterDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[auiDrawerFooter]',
+                },] }
+    ];
+
+    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;
+        }
+        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();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrawerComponent.prototype, "transform", {
+            get: function () {
+                return "translateX(" + (this.visible ? 0 : '100%') + ")";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrawerComponent.prototype.ngOnInit = function () {
+            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.ngAfterViewInit = function () {
+            var _this = this;
+            this.attachBodyContent();
+            setTimeout(function () {
+                _this.drawerViewInit.emit();
+            }, 0);
+        };
+        DrawerComponent.prototype.attachOverlay = function () {
+            var _this = this;
+            if (!this.overlayRef) {
+                this.portal = new portal.TemplatePortal(this.drawerTemplate, this.viewContainerRef);
+                this.overlayRef = this.overlay.create(this.getOverlayConfig());
+            }
+            if (this.overlayRef) {
+                this.overlayRef.attach(this.portal);
+                this.overlayRef
+                    .outsidePointerEvents()
+                    .pipe(operators.takeUntil(this.onDestroy$))
+                    .subscribe(function (event) {
+                    var _a, _b;
+                    // 判断鼠标点击事件的 target 是否为 overlay-container 的子节点，如果是，则不关闭 drawer。
+                    // 为了避免点击 drawer 里的 tooltip 后 drawer 被关闭。
+                    if (_this.visible &&
+                        _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();
+                    }
+                });
+            }
+        };
+        DrawerComponent.prototype.getOverlayConfig = function () {
+            return new i1.OverlayConfig({
+                panelClass: DRAWER_OVERLAY_CLASS,
+                positionStrategy: this.overlay.position().global(),
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+            });
+        };
+        DrawerComponent.prototype.attachBodyContent = function () {
+            var _a;
+            (_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 = this.bodyPortalOutlet.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) {
+                    this.overlayRef.getConfig().scrollStrategy.enable();
+                }
+                else {
+                    this.overlayRef.getConfig().scrollStrategy.disable();
+                }
+            }
+        };
+        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\n            *ngTemplateOutlet=\"\n              $any(content || contentTemplate);\n              context: templateContext\n            \"\n          >\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,
+                    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-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))}"]
+                },] }
+    ];
+    DrawerComponent.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef },
+        { type: i1.Overlay },
+        { type: i0.Injector },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrawerComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        footer: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
+        offsetY: [{ type: i0.Input }],
+        visible: [{ type: i0.Input }],
+        content: [{ type: i0.Input }],
+        hideOnClickOutside: [{ type: i0.Input }],
+        showClose: [{ type: i0.Input }],
+        drawerClass: [{ type: i0.Input }],
+        mask: [{ type: i0.Input }],
+        maskClosable: [{ type: i0.Input }],
+        width: [{ type: i0.Input }],
+        drawerViewInit: [{ type: i0.Output }],
+        close: [{ type: i0.Output }],
+        drawerTemplate: [{ type: i0.ViewChild, args: ['drawerTemplate', { static: true },] }],
+        bodyPortalOutlet: [{ type: i0.ViewChild, args: [portal.CdkPortalOutlet, { static: false },] }],
+        titleTemplate: [{ type: i0.ContentChild, args: [DrawerHeaderDirective, { read: i0.TemplateRef },] }],
+        contentTemplate: [{ type: i0.ContentChild, args: [DrawerContentDirective, { read: i0.TemplateRef },] }],
+        footerTemplate: [{ type: i0.ContentChild, args: [DrawerFooterDirective, { read: i0.TemplateRef },] }]
+    };
+
+    var DrawerService = /** @class */ (function () {
+        function DrawerService(overlay) {
+            this.overlay = overlay;
+            this.unsubscribe$ = new rxjs.Subject();
+        }
+        DrawerService.prototype.open = function (options) {
+            var _a;
+            if (!this.drawerRef) {
+                this.createDrawer();
+                this.updateOptions(options);
+            }
+            return (_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.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,
+        DrawerContentDirective,
+        DrawerFooterDirective,
+    ];
+    var DrawerModule = /** @class */ (function () {
+        function DrawerModule() {
+        }
+        return DrawerModule;
+    }());
+    DrawerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, IconModule, IconModule, i1.OverlayModule],
+                    declarations: COMMON,
+                    exports: COMMON,
+                    providers: [DrawerService],
+                    entryComponents: [DrawerComponent],
+                },] }
+    ];
+
+    var StepState = {
+        Default: 'default',
+        Done: 'done',
+        Error: 'error',
+        Pending: 'pending',
+    };
+
+    var _b$1, _c$1;
+    var StepDefaultIcon = (_b$1 = {},
+        _b$1[StepState.Default] = 'number',
+        _b$1[StepState.Done] = 'check_circle',
+        _b$1[StepState.Error] = 'close_circle',
+        _b$1[StepState.Pending] = 'sync_circle',
+        _b$1);
+    var StepSelectedIcon = (_c$1 = {},
+        _c$1[StepState.Default] = 'number',
+        _c$1[StepState.Done] = 'check_circle_s',
+        _c$1[StepState.Error] = 'close_circle_s',
+        _c$1[StepState.Pending] = 'sync_circle_s',
+        _c$1);
+    var StepsComponent = /** @class */ (function () {
+        function StepsComponent() {
+            this._steps = [];
+            this.linear = false;
+            this.orientation = 'horizontal';
+            this.type = 'step';
+            this.currentIndexChange = new i0.EventEmitter();
+            this.selectedIndexChange = new i0.EventEmitter();
+            this.currentIndexChange$$ = new rxjs.BehaviorSubject(0);
+            this.stepsChange$$ = new rxjs.BehaviorSubject([]);
+            this.destroy$$ = new rxjs.Subject();
+        }
+        Object.defineProperty(StepsComponent.prototype, "steps", {
+            get: function () {
+                return this._steps;
+            },
+            set: function (val) {
+                this._steps = val;
+                this.stepsChange$$.next(val);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StepsComponent.prototype, "currentIndex", {
+            get: function () {
+                return this._currentIndex;
+            },
+            set: function (index) {
+                this.currentIndexChange$$.next(index);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StepsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.currentIndexChange$$
+                .pipe(operators.takeUntil(this.destroy$$))
+                .subscribe(function (index) {
+                if (_this.type === 'step') {
+                    _this.setCurrentIndex(index);
+                }
+            });
+            this.stepsChange$$.pipe(operators.takeUntil(this.destroy$$)).subscribe(function (steps) {
+                if (_this.type === 'progress') {
+                    _this.getProgressCurrentIndex(steps);
+                }
+            });
+        };
+        StepsComponent.prototype.setCurrentIndex = function (index) {
+            var _a;
+            if (this.linear) {
+                if ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) {
+                    var ret = Math.min(Math.max(0, index), this.steps.length - 1);
+                    var reversedPrevSteps = this.steps.slice(0, ret).reverse();
+                    var lastDoneStepIndex = reversedPrevSteps.length -
+                        reversedPrevSteps.findIndex(function (step) { return step.state === StepState.Done || step.optional; });
+                    this._currentIndex = Math.min(lastDoneStepIndex, ret);
+                }
+            }
+            else {
+                this._currentIndex = index;
+            }
+        };
+        StepsComponent.prototype.getProgressCurrentIndex = function (steps) {
+            if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+                if (this._currentIndex !== 0) {
+                    this.currentIndexChange.emit(0);
+                }
+                this._currentIndex = 0;
+            }
+            else {
+                var reversedSteps = this.steps.slice(0).reverse();
+                var doneStepIndex = reversedSteps.findIndex(function (step) { return step.state === StepState.Done; });
+                var lastDoneStepIndex = doneStepIndex > -1 ? reversedSteps.length - doneStepIndex : 0;
+                var newIndex = Math.min(lastDoneStepIndex, steps.length - 1);
+                if (this._currentIndex !== newIndex) {
+                    this.currentIndexChange.emit(newIndex);
+                }
+                if (this._currentIndex === this.selectedIndex) {
+                    this._currentIndex = this.selectedIndex = newIndex;
+                }
+                else {
+                    this._currentIndex = newIndex;
+                }
+            }
+        };
+        Object.defineProperty(StepsComponent.prototype, "isVertical", {
+            get: function () {
+                return this.orientation === 'vertical';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StepsComponent.prototype, "isProgress", {
+            get: function () {
+                return this.type === 'progress';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StepsComponent.prototype.getIcon = function (i, state) {
+            if (!state) {
+                return StepDefaultIcon.default;
+            }
+            return this.getActiveIndex() === i
+                ? StepSelectedIcon[state]
+                : StepDefaultIcon[state];
+        };
+        StepsComponent.prototype.select = function (i, step) {
+            var _a;
+            var currentStep = this.steps[this._currentIndex];
+            if (this.linear &&
+                currentStep.state !== StepState.Done &&
+                !currentStep.optional &&
+                i > this._currentIndex) {
+                return;
+            }
+            if (i < this._currentIndex && !((_a = step.editable) !== null && _a !== void 0 ? _a : true)) {
+                return;
+            }
+            if (this.isProgress) {
+                this.selectedIndexChange.emit(i);
+                this.selectedIndex = i;
+            }
+            else {
+                this.currentIndexChange.emit(i);
+                this._currentIndex = i;
+            }
+        };
+        StepsComponent.prototype.getActiveIndex = function () {
+            return this.selectedIndex !== undefined
+                ? this.selectedIndex
+                : this._currentIndex;
+        };
+        StepsComponent.prototype.isLastActive = function (i, steps) {
+            var firstDefaultIndex = steps.findIndex(function (step) { return !step.state || step.state === StepState.Default; });
+            return i === this.selectedIndex
+                ? true
+                : firstDefaultIndex === 0
+                    ? false
+                    : firstDefaultIndex === i;
+        };
+        StepsComponent.prototype.ngOnDestroy = function () {
+            this.destroy$$.next();
+        };
+        return StepsComponent;
+    }());
+    StepsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aui-steps',
+                    exportAs: 'auiSteps',
+                    template: "<div\n  class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n    type || 'step'\n  }}\"\n>\n  <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n    <div\n      class=\"aui-step\"\n      (click)=\"select(i, step)\"\n      [class.isLastActive]=\"isLastActive(i, steps)\"\n    >\n      <div class=\"aui-step__indicator\">\n        <ng-container *ngIf=\"isProgress\">\n          <ng-container [ngSwitch]=\"getIcon(i, step.state)\">\n            <span\n              class=\"aui-step__indicator-number aui-step__indicator-number--{{\n                step.state\n              }}\"\n              *ngSwitchCase=\"'number'\"\n              [class.selected]=\"getActiveIndex() === i\"\n            >\n              {{ i + 1 }}\n            </span>\n            <aui-icon\n              class=\"aui-step__indicator-icon aui-step__indicator-icon--{{\n                step.state\n              }}\"\n              *ngSwitchDefault\n              [class.selected]=\"getActiveIndex() === i\"\n              [icon]=\"getIcon(i, step.state)\"\n            ></aui-icon>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!isProgress\">\n          <span\n            class=\"aui-step__indicator-number\"\n            [class.selected]=\"_currentIndex === i\"\n            *ngIf=\"i >= _currentIndex\"\n          >\n            {{ i + 1 }}\n          </span>\n          <aui-icon\n            class=\"aui-step__indicator-icon aui-step__indicator-icon--done\"\n            [class.selected]=\"_currentIndex === i\"\n            *ngIf=\"i < _currentIndex\"\n            [icon]=\"getIcon(i, 'done')\"\n          ></aui-icon>\n        </ng-container>\n        <div\n          *ngIf=\"!isLast && isVertical\"\n          class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n            step.state\n          }}\"\n        ></div>\n      </div>\n      <div\n        class=\"aui-step__info aui-step__info--{{\n          isProgress ? step.state : i < _currentIndex ? 'done' : ''\n        }}\"\n        [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n      >\n        <div class=\"aui-step__name\">\n          {{ step.label }}\n        </div>\n        <div class=\"aui-step__description\" *ngIf=\"step.description\">\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n    <div\n      *ngIf=\"!isLast && !isVertical\"\n      class=\"aui-steps__horizontal-line\"\n    ></div>\n  </ng-container>\n</div>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.aui-step{display:flex;align-items:center}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;color:rgb(var(--aui-color-n-4))}.aui-step__indicator-number{border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:500;font-size:var(--aui-font-size-l);display:flex;justify-content:center;width:var(--aui-icon-size-xl);height:var(--aui-icon-size-xl)}.aui-step__indicator-number.selected{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary));color:#fff}.aui-step__indicator-icon{font-size:var(--aui-icon-size-xl);display:inline-flex;border-radius:50%}.aui-step__indicator-icon--done,.aui-step__indicator-icon--pending{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-step__indicator-icon--done.selected,.aui-step__indicator-icon--pending.selected{background-color:#fff}.aui-step__indicator-icon--error{background-color:rgb(var(--aui-color-r-6));color:rgb(var(--aui-color-red))}.aui-step__indicator-icon--error.selected{background-color:#fff}.aui-step__indicator-icon--pending{transform-origin:center;-webkit-animation:spin 4s linear infinite;animation:spin 4s linear infinite}.aui-step__name{font-size:var(--aui-font-size-l);max-width:128px}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--done .aui-step__name,.aui-step__info--error .aui-step__name,.aui-step__info--pending .aui-step__name,.aui-step__info--selected .aui-step__name{color:rgb(var(--aui-color-n-1))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;max-width:240px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 120px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}"]
+                },] }
+    ];
+    StepsComponent.propDecorators = {
+        steps: [{ type: i0.Input }],
+        linear: [{ type: i0.Input }],
+        currentIndex: [{ type: i0.Input }],
+        orientation: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        currentIndexChange: [{ type: i0.Output }],
+        selectedIndexChange: [{ type: i0.Output }]
+    };
+
+    var StepsModule = /** @class */ (function () {
+        function StepsModule() {
+        }
+        return StepsModule;
+    }());
+    StepsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule, IconModule],
+                    declarations: [StepsComponent],
+                    exports: [StepsComponent],
+                },] }
+    ];
+
     /**
      * Generated bundle index. Do not edit.
      */
@@ -12004,6 +12919,7 @@
     exports.ComponentSize = ComponentSize;
     exports.ConfirmDialogConfig = ConfirmDialogConfig;
     exports.CustomAutoCompleteDirective = CustomAutoCompleteDirective;
+    exports.DATA = DATA;
     exports.DATE = DATE;
     exports.DATE_NAV_RANGES = DATE_NAV_RANGES;
     exports.DATE_TYPES = DATE_TYPES;
@@ -12024,6 +12940,13 @@
     exports.DialogModule = DialogModule;
     exports.DialogRef = DialogRef;
     exports.DialogService = DialogService;
+    exports.DrawerComponent = DrawerComponent;
+    exports.DrawerContentDirective = DrawerContentDirective;
+    exports.DrawerFooterDirective = DrawerFooterDirective;
+    exports.DrawerHeaderDirective = DrawerHeaderDirective;
+    exports.DrawerModule = DrawerModule;
+    exports.DrawerRef = DrawerRef;
+    exports.DrawerService = DrawerService;
     exports.DropdownActiveDirective = DropdownActiveDirective;
     exports.DropdownButtonComponent = DropdownButtonComponent;
     exports.DropdownDirective = DropdownDirective;
@@ -12079,6 +13002,11 @@
     exports.MultiSelectComponent = MultiSelectComponent;
     exports.NOTIFICATION_CONFIG = NOTIFICATION_CONFIG;
     exports.NOTIFICATION_DEFAULT_CONFIG = NOTIFICATION_DEFAULT_CONFIG;
+    exports.NavItemComponent = NavItemComponent;
+    exports.NavItemContentDirective = NavItemContentDirective;
+    exports.NavItemGroupComponent = NavItemGroupComponent;
+    exports.NavItemGroupTitleDirective = NavItemGroupTitleDirective;
+    exports.NavItemIconDirective = NavItemIconDirective;
     exports.NavMenuComponent = NavMenuComponent;
     exports.NavMenuModule = NavMenuModule;
     exports.NotificationComponent = NotificationComponent;
@@ -12104,6 +13032,8 @@
     exports.PaginatorIntl = PaginatorIntl;
     exports.PaginatorModule = PaginatorModule;
     exports.PickerPanelComponent = PickerPanelComponent;
+    exports.PlatformNavComponent = PlatformNavComponent;
+    exports.PlatformNavModule = PlatformNavModule;
     exports.RadioButtonComponent = RadioButtonComponent;
     exports.RadioComponent = RadioComponent;
     exports.RadioGroupComponent = RadioGroupComponent;
@@ -12125,6 +13055,9 @@
     exports.StatusBarModule = StatusBarModule;
     exports.StatusBarSize = StatusBarSize;
     exports.StatusType = StatusType;
+    exports.StepState = StepState;
+    exports.StepsComponent = StepsComponent;
+    exports.StepsModule = StepsModule;
     exports.SubmenuComponent = SubmenuComponent;
     exports.SuggestionComponent = SuggestionComponent;
     exports.SuggestionGroupComponent = SuggestionGroupComponent;
@@ -12146,6 +13079,7 @@
     exports.TabLabelDirective = TabLabelDirective;
     exports.TabLabelWrapperDirective = TabLabelWrapperDirective;
     exports.TabSize = TabSize;
+    exports.TabTitleDirective = TabTitleDirective;
     exports.TabType = TabType;
     exports.TableCellDefDirective = TableCellDefDirective;
     exports.TableCellDirective = TableCellDirective;
@@ -12165,6 +13099,8 @@
     exports.TagModule = TagModule;
     exports.TagType = TagType;
     exports.TagsInputComponent = TagsInputComponent;
+    exports.ThemeModule = ThemeModule;
+    exports.ThemePipe = ThemePipe;
     exports.ThemeService = ThemeService;
     exports.TimePickerComponent = TimePickerComponent;
     exports.TimePickerModule = TimePickerModule;
@@ -12211,29 +13147,30 @@
     exports.ɵ0 = ɵ0;
     exports.ɵ1 = ɵ1;
     exports.ɵ2 = ɵ2;
-    exports.ɵa = TooltipCopyDirective;
-    exports.ɵb = DialogComponent;
-    exports.ɵc = ConfirmDialogComponent;
-    exports.ɵd = BaseRadio;
-    exports.ɵe = InputAddonBeforeDirective;
-    exports.ɵf = InputAddonAfterDirective;
-    exports.ɵg = InputPrefixDirective;
-    exports.ɵh = InputSuffixDirective;
-    exports.ɵi = SharedModule;
-    exports.ɵj = ClickOutsideDirective;
-    exports.ɵk = AutosizeDirective;
-    exports.ɵl = BaseSelect;
-    exports.ɵm = MenuGroupTitleDirective;
-    exports.ɵn = MessageWrapperComponent;
-    exports.ɵo = MessageComponent;
-    exports.ɵp = MessageAnimations;
-    exports.ɵq = BaseMessage;
-    exports.ɵr = NotificationWrapperComponent;
-    exports.ɵs = NavItemUlComponent;
-    exports.ɵt = NavItemLiComponent;
-    exports.ɵu = VirtualForOfDirective;
-    exports.ɵv = _isNumberValue;
-    exports.ɵw = DatePickerComponent;
+    exports.ɵa = TableCellComponent;
+    exports.ɵb = TooltipCopyDirective;
+    exports.ɵc = DialogComponent;
+    exports.ɵd = ConfirmDialogComponent;
+    exports.ɵe = BaseRadio;
+    exports.ɵf = InputAddonBeforeDirective;
+    exports.ɵg = InputAddonAfterDirective;
+    exports.ɵh = InputPrefixDirective;
+    exports.ɵi = InputSuffixDirective;
+    exports.ɵj = SharedModule;
+    exports.ɵk = ClickOutsideDirective;
+    exports.ɵl = AutosizeDirective;
+    exports.ɵm = BaseSelect;
+    exports.ɵn = MenuGroupTitleDirective;
+    exports.ɵo = MessageWrapperComponent;
+    exports.ɵp = MessageComponent;
+    exports.ɵq = MessageAnimations;
+    exports.ɵr = BaseMessage;
+    exports.ɵs = NotificationWrapperComponent;
+    exports.ɵt = NavItemUlComponent;
+    exports.ɵu = NavItemLiComponent;
+    exports.ɵv = VirtualForOfDirective;
+    exports.ɵw = _isNumberValue;
+    exports.ɵx = DatePickerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });