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

package/fesm2015/alauda-ui.js

@@ -1,18 +1,18 @@
-import { TemplateRef, Directive, ElementRef, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, NgModule, EventEmitter, isDevMode, Output, ChangeDetectorRef, Optional, Injectable, Inject, SkipSelf, Renderer2, ViewContainerRef, NgZone, HostListener, ViewChild, InjectionToken, Injector, ContentChild, ContentChildren, forwardRef, ɵɵdefineInjectable, ɵɵinject, Pipe, ApplicationRef, ComponentFactoryResolver, ViewChildren, Host } from '@angular/core';
-import { Observable, Subject, fromEvent, merge, BehaviorSubject, combineLatest, ReplaySubject, of, Subscription, EMPTY, animationFrameScheduler } from 'rxjs';
-import { startWith, map, publishReplay, refCount, debounceTime, takeUntil, switchMap, throttleTime, distinctUntilChanged, first, tap, take, pluck, observeOn, repeat, takeWhile, endWith, bufferCount, filter, distinctUntilKeyChanged } from 'rxjs/operators';
+import { TemplateRef, Injectable, Optional, Inject, SkipSelf, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ɵɵdefineInjectable, Pipe, ChangeDetectorRef, NgModule, ElementRef, Renderer2, Directive, EventEmitter, Output, HostBinding, isDevMode, ViewContainerRef, NgZone, HostListener, ViewChild, InjectionToken, Injector, ContentChild, ContentChildren, forwardRef, ɵɵinject, ApplicationRef, ComponentFactoryResolver, ViewChildren, Host, Type } from '@angular/core';
+import { Observable, ReplaySubject, Subject, merge, fromEvent, BehaviorSubject, combineLatest, of, Subscription, EMPTY, animationFrameScheduler } from 'rxjs';
+import { startWith, map, publishReplay, refCount, distinctUntilChanged, takeUntil, switchMap, throttleTime, debounceTime, first, tap, take, pluck, observeOn, repeat, takeWhile, endWith, bufferCount, filter, distinctUntilKeyChanged } from 'rxjs/operators';
 import { CdkCellDef, CdkCell, CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkHeaderRowDef, CdkHeaderRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkRow, CdkTable, CDK_TABLE_TEMPLATE, CDK_TABLE, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, CdkTableModule } from '@angular/cdk/table';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy, UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { FocusMonitor, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy, UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { CdkScrollable, OverlayConfig, Overlay, OverlayModule, ScrollDispatcher } from '@angular/cdk/overlay';
 import { __awaiter } from 'tslib';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule, DomPortalOutlet, CdkPortal } from '@angular/cdk/portal';
 import { writeText } from 'clipboard-polyfill';
 import { Directionality } from '@angular/cdk/bidi';
 import { ControlContainer, NgForm, FormGroupDirective, NgControl, NG_VALUE_ACCESSOR, Validators, FormBuilder, FormsModule, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { ObserversModule } from '@angular/cdk/observers';
 import { ViewportRuler, ScrollingModule as ScrollingModule$1, VIRTUAL_SCROLL_STRATEGY, _fixedSizeVirtualScrollStrategyFactory, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, CdkScrollable as CdkScrollable$1 } from '@angular/cdk/scrolling';
 import { CdkAccordion, CdkAccordionItem, CdkAccordionModule } from '@angular/cdk/accordion';
@@ -147,273 +147,716 @@ function watchContentExist(queryList) {
     return queryList.changes.pipe(startWith(queryList), map((list) => !!list.length), publishReplay(1), refCount());
 }
 
-/**
- * Cell definition for the aui-table.
- * Captures the template of a column's data row cell as well as cell-specific properties.
- */
-class TableCellDefDirective extends CdkCellDef {
+const 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>';
+
+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}.`);
 }
-TableCellDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[auiTableCellDef]',
-                providers: [
-                    {
-                        provide: CdkCellDef,
-                        useExisting: TableCellDefDirective,
-                    },
-                ],
-            },] }
-];
 
-const bem = buildBem('aui-table');
-/** Cell template container that adds the right classes and role. */
-class TableCellDirective extends CdkCell {
-    constructor(columnDef, elementRef) {
-        super(columnDef, elementRef);
-        elementRef.nativeElement.classList.add(bem.element(`column-${columnDef.cssClassFriendlyName}`));
+class IconRegisterService {
+    constructor(document, httpClient) {
+        this.httpClient = httpClient;
+        this.defaultIconPrefix = 'aui-icon';
+        this.doc = document;
+        this.registerSvgSymbolsByString(auiIcons);
+    }
+    getDefaultIconPrefix() {
+        return this.defaultIconPrefix;
+    }
+    replaceDefaultIconPrefix(prefix) {
+        this.defaultIconPrefix = prefix;
+    }
+    registerSvgSymbolsByUrl(url) {
+        if (!this.httpClient) {
+            throw getAuiIconNoHttpProviderError();
+        }
+        this.httpClient
+            .get(url, {
+            responseType: 'text',
+        })
+            .subscribe(res => {
+            this.registerSvgSymbolsByString(res);
+        }, () => {
+            throw getAuiIconFailedToLoadCustomIconFile(url);
+        });
+    }
+    registerSvgSymbolsByString(str) {
+        this.appendSvg(str);
+    }
+    appendSvg(svgString) {
+        const setEl = this.doc.createElement('div');
+        setEl.className = 'aui-icon-set';
+        setEl.style.display = 'none';
+        setEl.innerHTML = svgString;
+        this.doc.body.append(setEl);
     }
 }
-TableCellDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line: directive-selector
-                selector: 'aui-table-cell',
-                host: {
-                    class: 'aui-table__cell',
-                    role: 'gridcell',
-                },
-            },] }
+IconRegisterService.decorators = [
+    { type: Injectable }
 ];
-TableCellDirective.ctorParameters = () => [
-    { type: CdkColumnDef },
-    { type: ElementRef }
+IconRegisterService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
+    { type: HttpClient, decorators: [{ type: Optional }] }
 ];
+function ICON_REGISTER_PROVIDER_FACTORY(parentRegister, document, httpClient) {
+    return parentRegister || new IconRegisterService(document, httpClient);
+}
+const ICON_REGISTER_SERVICE_PROVIDER = {
+    provide: IconRegisterService,
+    deps: [
+        [new Optional(), new SkipSelf(), IconRegisterService],
+        [new Optional(), DOCUMENT],
+        [new Optional(), HttpClient],
+    ],
+    useFactory: ICON_REGISTER_PROVIDER_FACTORY,
+};
 
-/**
- * Column definition for the aui-table.
- * Defines a set of cells available for a table column.
- */
-class TableColumnDefDirective extends CdkColumnDef {
-    // Unique name for this column
-    // Why it does not work in `inputs` property?
-    set auiTableColumnDef(value) {
-        this.name = value;
+let id = 0;
+class IconComponent {
+    constructor(iconRegisterService) {
+        this.iconRegisterService = iconRegisterService;
+        this.link = '';
+        this.bem = buildBem('aui-icon');
+        this.id = id++;
+    }
+    parseIcon(icon) {
+        const defaultPrefix = this.iconRegisterService.getDefaultIconPrefix();
+        const arr = (icon || '').split(':');
+        return arr.length < 2 ? [defaultPrefix, arr[0]] : [arr[0], arr[1]];
+    }
+    getWidth() {
+        if (!this.size) {
+            return false;
+        }
+        return handlePixel((this.size || '').split(',')[0]);
+    }
+    getHeight() {
+        if (!this.size) {
+            return false;
+        }
+        const arr = (this.size || '').split(',');
+        return handlePixel(arr[1] || arr[0]);
+    }
+    getIconId(icon) {
+        const [prefix, name] = this.parseIcon(icon);
+        return `${prefix}-${name}`;
+    }
+    getClass(id) {
+        return `${this.bem.block(this.margin)} ${id}`;
     }
 }
-TableColumnDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[auiTableColumnDef]',
-                providers: [
-                    {
-                        provide: CdkColumnDef,
-                        useExisting: TableColumnDefDirective,
-                    },
-                ],
-                inputs: ['sticky'],
+IconComponent.decorators = [
+    { type: 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: ViewEncapsulation.None,
+                changeDetection: 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)}}"]
             },] }
 ];
-TableColumnDefDirective.propDecorators = {
-    auiTableColumnDef: [{ type: Input }]
+IconComponent.ctorParameters = () => [
+    { type: IconRegisterService }
+];
+IconComponent.propDecorators = {
+    icon: [{ type: Input }],
+    light: [{ type: Input }],
+    dark: [{ type: Input }],
+    link: [{ type: Input }],
+    margin: [{ type: Input }],
+    size: [{ type: Input }],
+    color: [{ type: Input }]
 };
 
-/**
- * Header cell definition for the aui-table.
- * Captures the template of a column's header cell and as well as cell-specific properties.
- */
-class TableHeaderCellDefDirective extends CdkHeaderCellDef {
+class ThemeService {
+    constructor() {
+        this.currentAppTheme$$ = new ReplaySubject(1);
+        this.currentAppTheme$ = this.currentAppTheme$$
+            .asObservable()
+            .pipe(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';
+        }
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.browserTheme = darkModeQuery.matches ? 'dark' : 'light';
+        darkModeQuery.addEventListener('change', ({ matches }) => {
+            this.browserTheme = matches ? 'dark' : 'light';
+            if (this.themeMode === 'auto') {
+                this.themeChanged();
+            }
+        });
+        this.themeChanged();
+    }
+    setThemeMode(mode) {
+        this.htmlEl.setAttribute('aui-color-mode', mode);
+        this.themeMode = mode;
+        this.themeChanged();
+    }
+    getAppTheme() {
+        return this.themeMode === 'auto' ? this.browserTheme : this.themeMode;
+    }
+    themeChanged() {
+        this.currentAppTheme$$.next(this.getAppTheme());
+    }
 }
-TableHeaderCellDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[auiTableHeaderCellDef]',
-                providers: [
-                    {
-                        provide: CdkHeaderCellDef,
-                        useExisting: TableHeaderCellDefDirective,
-                    },
-                ],
-            },] }
+ThemeService.ɵprov = ɵɵdefineInjectable({ factory: function ThemeService_Factory() { return new ThemeService(); }, token: ThemeService, providedIn: "root" });
+ThemeService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
+ThemeService.ctorParameters = () => [];
 
-const bem$1 = buildBem('aui-table');
-/** Header cell template container that adds the right classes and role. */
-class TableHeaderCellDirective extends CdkHeaderCell {
-    constructor(columnDef, elementRef) {
-        super(columnDef, elementRef);
-        elementRef.nativeElement.classList.add(bem$1.element(`column-${columnDef.cssClassFriendlyName}`));
+class ThemePipe {
+    constructor(themeService, cdr) {
+        this.destroy$$ = new Subject();
+        themeService.currentAppTheme$
+            .pipe(takeUntil(this.destroy$$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+            cdr.markForCheck();
+        });
+    }
+    transform(v) {
+        if (v instanceof Function) {
+            return v(this.currentTheme);
+        }
+        return v[this.currentTheme];
+    }
+    ngOnDestroy() {
+        this.destroy$$.next();
+        this.destroy$$.complete();
     }
 }
-TableHeaderCellDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line: directive-selector
-                selector: 'aui-table-header-cell',
-                host: {
-                    class: 'aui-table__header-cell',
-                    role: 'columnheader',
-                },
-            },] }
+ThemePipe.decorators = [
+    { type: Pipe, args: [{ name: 'auiTheme', pure: false },] }
 ];
-TableHeaderCellDirective.ctorParameters = () => [
-    { type: CdkColumnDef },
-    { type: ElementRef }
+ThemePipe.ctorParameters = () => [
+    { type: ThemeService },
+    { type: ChangeDetectorRef }
 ];
 
-/**
- * Header row definition for the aui-table.
- * Captures the header row's template and other header properties such as the columns to display.
- */
-class TableHeaderRowDefDirective extends CdkHeaderRowDef {
+class ThemeModule {
 }
-TableHeaderRowDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[auiTableHeaderRowDef]',
-                providers: [
-                    {
-                        provide: CdkHeaderRowDef,
-                        useExisting: TableHeaderRowDefDirective,
-                    },
-                ],
+ThemeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [ThemePipe],
+                exports: [ThemePipe],
             },] }
 ];
-TableHeaderRowDefDirective.propDecorators = {
-    columns: [{ type: Input, args: ['auiTableHeaderRowDef',] }],
-    sticky: [{ type: Input, args: ['auiTableHeaderRowDefSticky',] }]
-};
 
-/** Header template container that contains the cell outlet. Adds the right class and role. */
-class TableHeaderRowComponent extends CdkHeaderRow {
+class IconModule {
 }
-TableHeaderRowComponent.decorators = [
+IconModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, ThemeModule],
+                declarations: [IconComponent],
+                exports: [IconComponent],
+                providers: [ICON_REGISTER_SERVICE_PROVIDER],
+            },] }
+];
+
+class ButtonGroupComponent {
+}
+ButtonGroupComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aui-table-header-row',
-                template: CDK_ROW_TEMPLATE,
-                host: {
-                    class: 'aui-table__header-row',
-                    role: 'row',
-                },
+                selector: 'aui-button-group',
+                template: "<div class=\"aui-button-group\"><ng-content></ng-content></div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                exportAs: 'auiTableHeaderRow',
-                preserveWhitespaces: false
+                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)}"]
+            },] }
+];
+
+const 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',
+};
+
+const prefix = 'aui-button--';
+class ButtonComponent {
+    constructor(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);
+    }
+    get type() {
+        return this._type;
+    }
+    set type(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;
+    }
+    get size() {
+        return this._size;
+    }
+    set size(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;
+    }
+    get plain() {
+        return this._plain;
+    }
+    set plain(val) {
+        if (this._plain === val) {
+            return;
+        }
+        this.switchAssertClass('isPlain', val);
+        this._plain = val;
+    }
+    get loading() {
+        return this._loading;
+    }
+    set loading(val) {
+        if (this._loading === val) {
+            return;
+        }
+        this.switchAssertClass('isLoading', val);
+        this._loading = val;
+    }
+    get round() {
+        return this._round;
+    }
+    set round(val) {
+        if (this._round === val) {
+            return;
+        }
+        this.switchAssertClass('isRound', val);
+        this._round = val;
+    }
+    get square() {
+        return this._square;
+    }
+    set square(val) {
+        if (this._square === val) {
+            return;
+        }
+        this.switchAssertClass('isSquare', val);
+        this._square = val;
+    }
+    ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.el.nativeElement);
+    }
+    switchAssertClass(className, val) {
+        if (val) {
+            this.renderer.addClass(this.el.nativeElement, className);
+        }
+        else {
+            this.renderer.removeClass(this.el.nativeElement, className);
+        }
+    }
+}
+ButtonComponent.decorators = [
+    { type: 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",
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: 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 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)}"]
+            },] }
+];
+ButtonComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: FocusMonitor }
+];
+ButtonComponent.propDecorators = {
+    type: [{ type: Input, args: ['aui-button',] }],
+    size: [{ type: Input }],
+    plain: [{ type: Input }],
+    loading: [{ type: Input }],
+    round: [{ type: Input }],
+    square: [{ type: Input }]
+};
+
+class ButtonModule {
+}
+ButtonModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, IconModule],
+                declarations: [ButtonComponent, ButtonGroupComponent],
+                exports: [ButtonComponent, ButtonGroupComponent],
             },] }
 ];
 
 /**
- * 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.
+ * Cell definition for the aui-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
  */
-class TableRowDefDirective extends CdkRowDef {
+class TableCellDefDirective extends CdkCellDef {
 }
-TableRowDefDirective.decorators = [
+TableCellDefDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[auiTableRowDef]',
+                selector: '[auiTableCellDef]',
                 providers: [
                     {
-                        provide: CdkRowDef,
-                        useExisting: TableRowDefDirective,
+                        provide: CdkCellDef,
+                        useExisting: TableCellDefDirective,
                     },
                 ],
             },] }
 ];
-TableRowDefDirective.propDecorators = {
-    columns: [{ type: Input, args: ['auiTableRowDefColumns',] }],
-    when: [{ type: Input, args: ['auiTableRowDefWhen',] }]
-};
 
-/** Data row template container that contains the cell outlet. Adds the right class and role. */
-class TableRowComponent extends CdkRow {
+class TableCellComponent extends CdkCell {
     constructor() {
         super(...arguments);
-        this.disabled = false;
+        this.expandChange = new EventEmitter();
+    }
+    get expanded() {
+        return this.expand ? 'expanded' : null;
     }
 }
-TableRowComponent.decorators = [
+TableCellComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aui-table-row',
-                template: CDK_ROW_TEMPLATE,
-                host: {
-                    class: 'aui-table__row',
-                    role: 'row',
-                },
+                selector: 'aui-table-cell[expand]',
+                template: `
+    <ng-container *ngIf="!template">
+      <button
+        (click)="expandChange.next()"
+        class="aui-table__cell-expand-button"
+        [class.expanded]="expand"
+        [class.collapsed]="!expand"
+        aui-button="primary"
+        size="mini"
+        [square]="true"
+        [round]="true"
+      >
+        <aui-icon [icon]="expand ? 'angle_down' : 'angle_right'"></aui-icon>
+      </button>
+    </ng-container>
+
+    <ng-container *ngIf="expand && template">
+      <div class="aui-table__cell-expand-detail" [@expand]="expanded">
+        <ng-content></ng-content>
+      </div>
+    </ng-container>
+  `,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                exportAs: 'auiTableRow',
-                preserveWhitespaces: false
-            },] }
-];
-TableRowComponent.propDecorators = {
-    disabled: [{ type: Input }, { type: HostBinding, args: ['class.isDisabled',] }]
+                exportAs: 'auiTableCell',
+                preserveWhitespaces: false,
+                animations: [
+                    trigger('expand', [
+                        state('*', style({ height: 0 })),
+                        state('expanded', style({ height: '*' })),
+                        transition('* => expanded', [animate(250)]),
+                        transition('expanded => *', [animate(250)]),
+                    ]),
+                ]
+            },] }
+];
+TableCellComponent.propDecorators = {
+    expand: [{ type: Input }],
+    template: [{ type: Input }],
+    expandChange: [{ type: Output }]
 };
 
-const CLASS_PREFIX = 'aui-table';
-const WRAPPER_CLASS = `${CLASS_PREFIX}__scroll-wrapper`;
-const HAS_SCROLL_CLASS = `${WRAPPER_CLASS}--has-scroll`;
-const SCROLLING_CLASS = `${WRAPPER_CLASS}--scrolling`;
-const SCROLL_BEFORE_END_CLASS = `${WRAPPER_CLASS}--before-end`;
-class TableScrollWrapperDirective {
-    constructor(el) {
-        this.el = el;
-        this.scrollDis = 0;
-        this.destroy$$ = new Subject();
-    }
-    ngAfterViewChecked() {
-        this.scrollDis =
-            this.el.nativeElement.scrollWidth - this.el.nativeElement.offsetWidth;
-        if (this.scrollDis > 0) {
-            this.el.nativeElement.classList.add(HAS_SCROLL_CLASS);
-        }
-    }
-    ngAfterViewInit() {
-        fromEvent(this.el.nativeElement, 'scroll')
-            .pipe(debounceTime(100), takeUntil(this.destroy$$))
-            .subscribe(() => {
-            const 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);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$$.next();
-        this.destroy$$.complete();
+const bem = buildBem('aui-table');
+/** Cell template container that adds the right classes and role. */
+class TableCellDirective extends CdkCell {
+    constructor(columnDef, elementRef) {
+        super(columnDef, elementRef);
+        elementRef.nativeElement.classList.add(bem.element(`column-${columnDef.cssClassFriendlyName}`));
     }
 }
-TableScrollWrapperDirective.decorators = [
+TableCellDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[auiTableScrollWrapper]',
+                // tslint:disable-next-line: directive-selector
+                selector: 'aui-table-cell',
                 host: {
-                    class: `${WRAPPER_CLASS} ${SCROLL_BEFORE_END_CLASS}`,
+                    class: 'aui-table__cell',
+                    role: 'gridcell',
                 },
             },] }
 ];
-TableScrollWrapperDirective.ctorParameters = () => [
+TableCellDirective.ctorParameters = () => [
+    { type: CdkColumnDef },
     { type: ElementRef }
 ];
 
-class TableComponent extends CdkTable {
-    // FIXME: workaround to override because it will break constructor if it is field, but why MatTable works?
-    // @ts-expect-error
-    get stickyCssClass() {
-        return 'aui-table-sticky';
-    }
-    set stickyCssClass(_stickyCssClass) {
-        //
+/**
+ * Column definition for the aui-table.
+ * Defines a set of cells available for a table column.
+ */
+class TableColumnDefDirective extends CdkColumnDef {
+    // Unique name for this column
+    // Why it does not work in `inputs` property?
+    set auiTableColumnDef(value) {
+        this.name = value;
     }
 }
-TableComponent.decorators = [
+TableColumnDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTableColumnDef]',
+                providers: [
+                    {
+                        provide: CdkColumnDef,
+                        useExisting: TableColumnDefDirective,
+                    },
+                ],
+                inputs: ['sticky'],
+            },] }
+];
+TableColumnDefDirective.propDecorators = {
+    auiTableColumnDef: [{ type: Input }]
+};
+
+/**
+ * Header cell definition for the aui-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+class TableHeaderCellDefDirective extends CdkHeaderCellDef {
+}
+TableHeaderCellDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTableHeaderCellDef]',
+                providers: [
+                    {
+                        provide: CdkHeaderCellDef,
+                        useExisting: TableHeaderCellDefDirective,
+                    },
+                ],
+            },] }
+];
+
+const bem$1 = buildBem('aui-table');
+/** Header cell template container that adds the right classes and role. */
+class TableHeaderCellDirective extends CdkHeaderCell {
+    constructor(columnDef, elementRef) {
+        super(columnDef, elementRef);
+        elementRef.nativeElement.classList.add(bem$1.element(`column-${columnDef.cssClassFriendlyName}`));
+    }
+}
+TableHeaderCellDirective.decorators = [
+    { type: Directive, args: [{
+                // tslint:disable-next-line: directive-selector
+                selector: 'aui-table-header-cell',
+                host: {
+                    class: 'aui-table__header-cell',
+                    role: 'columnheader',
+                },
+            },] }
+];
+TableHeaderCellDirective.ctorParameters = () => [
+    { type: CdkColumnDef },
+    { type: ElementRef }
+];
+
+/**
+ * Header row definition for the aui-table.
+ * Captures the header row's template and other header properties such as the columns to display.
+ */
+class TableHeaderRowDefDirective extends CdkHeaderRowDef {
+}
+TableHeaderRowDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTableHeaderRowDef]',
+                providers: [
+                    {
+                        provide: CdkHeaderRowDef,
+                        useExisting: TableHeaderRowDefDirective,
+                    },
+                ],
+            },] }
+];
+TableHeaderRowDefDirective.propDecorators = {
+    columns: [{ type: Input, args: ['auiTableHeaderRowDef',] }],
+    sticky: [{ type: Input, args: ['auiTableHeaderRowDefSticky',] }]
+};
+
+/** Header template container that contains the cell outlet. Adds the right class and role. */
+class TableHeaderRowComponent extends CdkHeaderRow {
+}
+TableHeaderRowComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aui-table-header-row',
+                template: CDK_ROW_TEMPLATE,
+                host: {
+                    class: 'aui-table__header-row',
+                    role: 'row',
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: 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.
+ */
+class TableRowDefDirective extends CdkRowDef {
+}
+TableRowDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTableRowDef]',
+                providers: [
+                    {
+                        provide: CdkRowDef,
+                        useExisting: TableRowDefDirective,
+                    },
+                ],
+            },] }
+];
+TableRowDefDirective.propDecorators = {
+    columns: [{ type: Input, args: ['auiTableRowDefColumns',] }],
+    when: [{ type: Input, args: ['auiTableRowDefWhen',] }]
+};
+
+/** Data row template container that contains the cell outlet. Adds the right class and role. */
+class TableRowComponent extends CdkRow {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+    }
+}
+TableRowComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aui-table-row',
+                template: CDK_ROW_TEMPLATE,
+                host: {
+                    class: 'aui-table__row',
+                    role: 'row',
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                exportAs: 'auiTableRow',
+                preserveWhitespaces: false
+            },] }
+];
+TableRowComponent.propDecorators = {
+    disabled: [{ type: Input }, { type: HostBinding, args: ['class.isDisabled',] }]
+};
+
+const CLASS_PREFIX = 'aui-table';
+const WRAPPER_CLASS = `${CLASS_PREFIX}__scroll-wrapper`;
+const HAS_SCROLL_CLASS = `${WRAPPER_CLASS}--has-scroll`;
+const SCROLLING_CLASS = `${WRAPPER_CLASS}--scrolling`;
+const SCROLL_BEFORE_END_CLASS = `${WRAPPER_CLASS}--before-end`;
+class TableScrollWrapperDirective {
+    constructor(el) {
+        this.el = el;
+        this.destroy$$ = new Subject();
+    }
+    get containerEl() {
+        return this.el.nativeElement;
+    }
+    ngAfterViewInit() {
+        requestAnimationFrame(() => {
+            this.viewMutation();
+        });
+    }
+    viewMutation() {
+        merge(observeResizeOn(this.containerEl), fromEvent(this.containerEl, 'scroll'))
+            .pipe(startWith(null), takeUntil(this.destroy$$))
+            .subscribe(() => {
+            const scrollDis = this.containerEl.scrollWidth - this.containerEl.offsetWidth;
+            this.placeClassList(this.containerEl.classList, scrollDis > 0, HAS_SCROLL_CLASS);
+            const scrollLeft = this.containerEl.scrollLeft;
+            this.placeClassList(this.containerEl.classList, scrollLeft > 0, SCROLLING_CLASS);
+            this.placeClassList(this.containerEl.classList, scrollLeft !== scrollDis, SCROLL_BEFORE_END_CLASS);
+        });
+    }
+    placeClassList(classList, condition, className) {
+        classList[condition ? 'add' : 'remove'](className);
+    }
+    ngOnDestroy() {
+        this.destroy$$.next();
+    }
+}
+TableScrollWrapperDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTableScrollWrapper]',
+                host: {
+                    class: `${SCROLL_BEFORE_END_CLASS}`,
+                },
+            },] }
+];
+TableScrollWrapperDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+TableScrollWrapperDirective.propDecorators = {
+    auiTableScrollWrapper: [{ type: HostBinding, args: [`class.${WRAPPER_CLASS}`,] }, { type: Input, args: ['auiTableScrollWrapper',] }]
+};
+
+class TableComponent extends CdkTable {
+    // FIXME: workaround to override because it will break constructor if it is field, but why MatTable works?
+    // @ts-expect-error
+    get stickyCssClass() {
+        return 'aui-table-sticky';
+    }
+    set stickyCssClass(_stickyCssClass) {
+        //
+    }
+}
+TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aui-table',
                 exportAs: 'auiTable',
                 encapsulation: ViewEncapsulation.None,
-                template: CDK_TABLE_TEMPLATE,
+                template: `<div
+    class="aui-table__content"
+    [auiTableScrollWrapper]="enableScrollWrapper"
+  >
+    ${CDK_TABLE_TEMPLATE}
+  </div>`,
                 host: {
                     class: 'aui-table',
                 },
@@ -433,19 +876,23 @@ TableComponent.decorators = [
                         useClass: _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}"]
+                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: Input }]
+};
 
 class TableModule {
 }
 TableModule.decorators = [
     { type: NgModule, args: [{
-                imports: [CommonModule, CdkTableModule],
+                imports: [CommonModule, ButtonModule, IconModule, CdkTableModule],
                 declarations: [
                     TableComponent,
                     TableRowComponent,
                     TableHeaderRowComponent,
+                    TableCellComponent,
                     TableCellDirective,
                     TableHeaderCellDirective,
                     TableRowDefDirective,
@@ -459,6 +906,7 @@ TableModule.decorators = [
                     TableComponent,
                     TableRowComponent,
                     TableHeaderRowComponent,
+                    TableCellComponent,
                     TableCellDirective,
                     TableHeaderCellDirective,
                     TableRowDefDirective,
@@ -555,377 +1003,78 @@ SortDirective.propDecorators = {
 };
 
 class SortHeaderComponent {
-    constructor(cdr, _sort, _cdkColumnRef) {
-        this._sort = _sort;
-        this._cdkColumnRef = _cdkColumnRef;
-        this.arrowDirection = '';
-        this.bem = buildBem('aui-sort-header');
-        if (!_sort) {
-            throw getSortHeaderNotContainedWithinSortError();
-        }
-        this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges).subscribe(() => {
-            if (this._isSorted()) {
-                this._updateArrowDirection();
-            }
-            if (!this._isSorted() && this._viewState === 'active') {
-                this._viewState = '';
-            }
-            cdr.markForCheck();
-        });
-    }
-    ngOnInit() {
-        if (!this.id && this._cdkColumnRef) {
-            this.id = this._cdkColumnRef.name;
-        }
-        this._updateArrowDirection();
-        this._viewState = this._isSorted() ? 'active' : '';
-        this._sort.register(this);
-    }
-    ngOnDestroy() {
-        this._sort.deregister(this);
-        this._rerenderSubscription.unsubscribe();
-    }
-    _handleClick() {
-        this._sort.sort(this);
-        this._viewState = this._isSorted() ? 'active' : '';
-    }
-    _isSorted() {
-        return (this._sort.active === this.id &&
-            ['asc', 'desc'].includes(this._sort.direction));
-    }
-    _updateArrowDirection() {
-        this.arrowDirection = this._isSorted()
-            ? this._sort.direction
-            : this.start || this._sort.start;
-    }
-}
-SortHeaderComponent.decorators = [
-    { type: 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",
-                encapsulation: ViewEncapsulation.None,
-                preserveWhitespaces: false,
-                changeDetection: 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}"]
-            },] }
-];
-SortHeaderComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SortDirective, decorators: [{ type: Optional }] },
-    { type: CdkColumnDef, decorators: [{ type: Optional }] }
-];
-SortHeaderComponent.propDecorators = {
-    id: [{ type: Input, args: ['aui-sort-header',] }],
-    start: [{ type: Input }]
-};
-
-class SortModule {
-}
-SortModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [SortDirective, SortHeaderComponent],
-                exports: [SortDirective, SortHeaderComponent],
-            },] }
-];
-
-const 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>';
-
-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}.`);
-}
-
-class IconRegisterService {
-    constructor(document, httpClient) {
-        this.httpClient = httpClient;
-        this.defaultIconPrefix = 'aui-icon';
-        this.doc = document;
-        this.registerSvgSymbolsByString(auiIcons);
-    }
-    getDefaultIconPrefix() {
-        return this.defaultIconPrefix;
-    }
-    replaceDefaultIconPrefix(prefix) {
-        this.defaultIconPrefix = prefix;
-    }
-    registerSvgSymbolsByUrl(url) {
-        if (!this.httpClient) {
-            throw getAuiIconNoHttpProviderError();
-        }
-        this.httpClient
-            .get(url, {
-            responseType: 'text',
-        })
-            .subscribe(res => {
-            this.registerSvgSymbolsByString(res);
-        }, () => {
-            throw getAuiIconFailedToLoadCustomIconFile(url);
-        });
-    }
-    registerSvgSymbolsByString(str) {
-        this.appendSvg(str);
-    }
-    appendSvg(svgString) {
-        const setEl = this.doc.createElement('div');
-        setEl.className = 'aui-icon-set';
-        setEl.style.display = 'none';
-        setEl.innerHTML = svgString;
-        this.doc.body.append(setEl);
-    }
-}
-IconRegisterService.decorators = [
-    { type: Injectable }
-];
-IconRegisterService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
-    { type: HttpClient, decorators: [{ type: Optional }] }
-];
-function ICON_REGISTER_PROVIDER_FACTORY(parentRegister, document, httpClient) {
-    return parentRegister || new IconRegisterService(document, httpClient);
-}
-const ICON_REGISTER_SERVICE_PROVIDER = {
-    provide: IconRegisterService,
-    deps: [
-        [new Optional(), new SkipSelf(), IconRegisterService],
-        [new Optional(), DOCUMENT],
-        [new Optional(), HttpClient],
-    ],
-    useFactory: ICON_REGISTER_PROVIDER_FACTORY,
-};
-
-let id = 0;
-class IconComponent {
-    constructor(iconRegistryService) {
-        this.iconRegistryService = iconRegistryService;
-        this.icon = 'none';
-        this.link = '';
-        this.bem = buildBem('aui-icon');
-        this.id = id++;
-    }
-    parseIcon() {
-        const defaultPrefix = this.iconRegistryService.getDefaultIconPrefix();
-        const arr = (this.icon || '').split(':');
-        return arr.length < 2 ? [defaultPrefix, arr[0]] : [arr[0], arr[1]];
-    }
-    getWidth() {
-        if (!this.size) {
-            return false;
-        }
-        return handlePixel((this.size || '').split(',')[0]);
-    }
-    getHeight() {
-        if (!this.size) {
-            return false;
-        }
-        const arr = (this.size || '').split(',');
-        return handlePixel(arr[1] || arr[0]);
-    }
-    getIconId() {
-        const [prefix, name] = this.parseIcon();
-        return `${prefix}-${name}`;
-    }
-    getClass() {
-        return `${this.bem.block(this.margin)} ${this.getIconId()}`;
-    }
-}
-IconComponent.decorators = [
-    { type: 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: ViewEncapsulation.None,
-                changeDetection: 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)}}"]
-            },] }
-];
-IconComponent.ctorParameters = () => [
-    { type: IconRegisterService }
-];
-IconComponent.propDecorators = {
-    icon: [{ type: Input }],
-    link: [{ type: Input }],
-    margin: [{ type: Input }],
-    size: [{ type: Input }],
-    color: [{ type: Input }]
-};
-
-class IconModule {
-}
-IconModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [IconComponent],
-                exports: [IconComponent],
-                providers: [ICON_REGISTER_SERVICE_PROVIDER],
-            },] }
-];
-
-class ButtonGroupComponent {
-}
-ButtonGroupComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aui-button-group',
-                template: "<div class=\"aui-button-group\"><ng-content></ng-content></div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: 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}"]
-            },] }
-];
-
-const 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',
-};
-
-const prefix = 'aui-button--';
-class ButtonComponent {
-    constructor(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);
-    }
-    get type() {
-        return this._type;
-    }
-    set type(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;
-    }
-    get size() {
-        return this._size;
-    }
-    set size(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;
-    }
-    get plain() {
-        return this._plain;
-    }
-    set plain(val) {
-        if (this._plain === val) {
-            return;
-        }
-        this.switchAssertClass('isPlain', val);
-        this._plain = val;
-    }
-    get loading() {
-        return this._loading;
-    }
-    set loading(val) {
-        if (this._loading === val) {
-            return;
+    constructor(cdr, _sort, _cdkColumnRef) {
+        this._sort = _sort;
+        this._cdkColumnRef = _cdkColumnRef;
+        this.arrowDirection = '';
+        this.bem = buildBem('aui-sort-header');
+        if (!_sort) {
+            throw getSortHeaderNotContainedWithinSortError();
         }
-        this.switchAssertClass('isLoading', val);
-        this._loading = val;
-    }
-    get round() {
-        return this._round;
+        this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges).subscribe(() => {
+            if (this._isSorted()) {
+                this._updateArrowDirection();
+            }
+            if (!this._isSorted() && this._viewState === 'active') {
+                this._viewState = '';
+            }
+            cdr.markForCheck();
+        });
     }
-    set round(val) {
-        if (this._round === val) {
-            return;
+    ngOnInit() {
+        if (!this.id && this._cdkColumnRef) {
+            this.id = this._cdkColumnRef.name;
         }
-        this.switchAssertClass('isRound', val);
-        this._round = val;
+        this._updateArrowDirection();
+        this._viewState = this._isSorted() ? 'active' : '';
+        this._sort.register(this);
     }
-    get square() {
-        return this._square;
+    ngOnDestroy() {
+        this._sort.deregister(this);
+        this._rerenderSubscription.unsubscribe();
     }
-    set square(val) {
-        if (this._square === val) {
-            return;
-        }
-        this.switchAssertClass('isSquare', val);
-        this._square = val;
+    _handleClick() {
+        this._sort.sort(this);
+        this._viewState = this._isSorted() ? 'active' : '';
     }
-    ngOnDestroy() {
-        this.focusMonitor.stopMonitoring(this.el.nativeElement);
+    _isSorted() {
+        return (this._sort.active === this.id &&
+            ['asc', 'desc'].includes(this._sort.direction));
     }
-    switchAssertClass(className, val) {
-        if (val) {
-            this.renderer.addClass(this.el.nativeElement, className);
-        }
-        else {
-            this.renderer.removeClass(this.el.nativeElement, className);
-        }
+    _updateArrowDirection() {
+        this.arrowDirection = this._isSorted()
+            ? this._sort.direction
+            : this.start || this._sort.start;
     }
 }
-ButtonComponent.decorators = [
+SortHeaderComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
-                changeDetection: 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: 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 = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: FocusMonitor }
+SortHeaderComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: SortDirective, decorators: [{ type: Optional }] },
+    { type: CdkColumnDef, decorators: [{ type: Optional }] }
 ];
-ButtonComponent.propDecorators = {
-    type: [{ type: Input, args: ['aui-button',] }],
-    size: [{ type: Input }],
-    plain: [{ type: Input }],
-    loading: [{ type: Input }],
-    round: [{ type: Input }],
-    square: [{ type: Input }]
+SortHeaderComponent.propDecorators = {
+    id: [{ type: Input, args: ['aui-sort-header',] }],
+    start: [{ type: Input }]
 };
 
-class ButtonModule {
+class SortModule {
 }
-ButtonModule.decorators = [
+SortModule.decorators = [
     { type: NgModule, args: [{
-                imports: [CommonModule, IconModule],
-                declarations: [ButtonComponent, ButtonGroupComponent],
-                exports: [ButtonComponent, ButtonGroupComponent],
+                imports: [CommonModule],
+                declarations: [SortDirective, SortHeaderComponent],
+                exports: [SortDirective, SortHeaderComponent],
             },] }
 ];
 
@@ -1032,6 +1181,7 @@ class TooltipComponent {
     constructor(elRef, cdr) {
         this.elRef = elRef;
         this.cdr = cdr;
+        this.bem = buildBem('aui-tooltip');
         this.hover$ = new Subject();
     }
     setupInputs(inputs) {
@@ -1053,7 +1203,7 @@ class TooltipComponent {
             this.inputType$.pipe(startWith(TooltipType.Default)),
             this.inputClass$.pipe(startWith('')),
         ]).pipe(map(([inputPosition, inputType, inputClass]) => {
-            const b = 'aui-tooltip';
+            const b = this.bem.block();
             const dir = inputPosition.split(' ')[0];
             return inputType === TooltipType.Plain
                 ? `${b}--${dir} ${inputClass}`
@@ -1069,7 +1219,7 @@ TooltipComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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 = () => [
@@ -1588,7 +1738,7 @@ SectionComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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}"]
             },] }
 ];
 
@@ -1604,7 +1754,7 @@ CardComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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 = {
@@ -2880,7 +3030,7 @@ class CheckboxComponent extends CommonFormControl {
 CheckboxComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 preserveWhitespaces: false,
@@ -2891,7 +3041,7 @@ CheckboxComponent.decorators = [
                         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 = () => [
@@ -3029,7 +3179,7 @@ InputGroupComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -3093,7 +3243,7 @@ SearchComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -3245,6 +3395,7 @@ class TagsInputComponent extends CommonFormControl {
         this.emitValueChange(this.snapshot.value.filter((_, i) => i !== index));
     }
     onInput() {
+        var _a, _b, _c;
         const value = this.inputRef.nativeElement.value;
         // make sure value sync to span element
         requestAnimationFrame(() => {
@@ -3255,6 +3406,10 @@ class TagsInputComponent extends CommonFormControl {
                 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);
+        }
     }
     onKeyDown(event) {
         const inputEl = event.target;
@@ -3264,9 +3419,11 @@ class TagsInputComponent extends CommonFormControl {
             event.preventDefault();
         }
         else if (event.key === 'Enter') {
-            this.pushValue(inputEl.value);
             event.stopPropagation();
             event.preventDefault();
+            requestAnimationFrame(() => {
+                this.pushValue(inputEl.value);
+            });
         }
     }
     onInputFocus() {
@@ -3363,7 +3520,7 @@ TagsInputComponent.decorators = [
                         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 = () => [
@@ -3442,10 +3599,15 @@ class TagComponent {
         this.invalid = false;
         this.round = true;
         this.color = '';
+        this.allowClick = false;
         this.close = new EventEmitter();
     }
     get rootClass() {
-        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' : ''}`;
+    }
+    // 只有常规标签支持单击样式
+    get isNormalTag() {
+        return !this.solid && !this.closeable && !this.invalid;
     }
     get customStyle() {
         const arr = this.color.split(',');
@@ -3463,7 +3625,7 @@ TagComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -3475,29 +3637,31 @@ TagComponent.propDecorators = {
     invalid: [{ type: Input }],
     round: [{ type: Input }],
     color: [{ type: Input }],
+    allowClick: [{ type: Input }],
     close: [{ type: Output }]
 };
 
 class CheckTagComponent {
     constructor() {
         this.bem = buildBem('aui-tag');
+        this.hovered = false;
         this.checked = false;
         this.size = ComponentSize.Medium;
         this.round = true;
         this.checkedChange = new EventEmitter();
     }
     get rootClass() {
-        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' : ''}`;
     }
 }
 CheckTagComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -3703,7 +3867,7 @@ NumberInputComponent.decorators = [
                         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 = {
@@ -3779,6 +3943,7 @@ const en = {
         sunday: 'Sun',
         now: 'Now',
         select_all: 'Select All',
+        today: 'Today',
     },
 };
 
@@ -3870,6 +4035,7 @@ const zh = {
         sunday: '日',
         now: '此刻',
         select_all: '全选',
+        today: '今天',
     },
 };
 
@@ -3985,7 +4151,7 @@ MenuItemComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -4063,7 +4229,7 @@ MenuComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -4101,7 +4267,7 @@ DropdownButtonComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -4123,7 +4289,7 @@ MenuGroupComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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))}"]
             },] }
 ];
 
@@ -4132,7 +4298,7 @@ class SubmenuComponent extends MenuItemComponent {
         super(...arguments);
         this.bem = buildBem('aui-submenu');
         this.trigger = TooltipTrigger.Hover;
-        this.size = ComponentSize.Medium;
+        this.size = ComponentSize.Small;
     }
     get disabled() {
         return this._disabled || !this.hasEnabledItem;
@@ -4149,7 +4315,7 @@ SubmenuComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -4306,7 +4472,7 @@ OptionComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -4856,7 +5022,7 @@ class MultiSelectComponent extends BaseSelect {
 MultiSelectComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 preserveWhitespaces: false,
@@ -4871,7 +5037,7 @@ MultiSelectComponent.decorators = [
                         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 = () => [
@@ -4899,11 +5065,11 @@ class OptionGroupComponent {
 OptionGroupComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -4931,6 +5097,9 @@ class SelectComponent extends BaseSelect {
     get rootClass() {
         return `aui-select aui-select--${this.size}`;
     }
+    get containerClass() {
+        return `aui-option-container aui-option-container--${this.size}`;
+    }
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.selectedOption$ = combineLatest([
@@ -4985,7 +5154,7 @@ class SelectComponent extends BaseSelect {
 SelectComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 preserveWhitespaces: false,
@@ -5000,7 +5169,7 @@ SelectComponent.decorators = [
                         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 = {
@@ -5152,12 +5321,12 @@ class PaginatorComponent {
     constructor(intl, cdr) {
         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 EventEmitter();
         this.pageSizeChange = new EventEmitter();
@@ -5232,11 +5401,11 @@ class PaginatorComponent {
 PaginatorComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -5251,7 +5420,6 @@ PaginatorComponent.propDecorators = {
     total: [{ type: Input }],
     length: [{ type: Input }],
     layout: [{ type: Input }],
-    size: [{ type: Input }],
     disabled: [{ type: Input }],
     currentPageChange: [{ type: Output }],
     pageSizeChange: [{ type: Output }]
@@ -5799,12 +5967,12 @@ class NotificationComponent extends MessageComponent {
 NotificationComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: 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 = () => [
@@ -5972,6 +6140,21 @@ TabLabelWrapperDirective.ctorParameters = () => [
 TabLabelWrapperDirective.propDecorators = {
     disabled: [{ type: Input }]
 };
+class TabTitleDirective extends CdkPortal {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor(templateRef, viewContainerRef) {
+        super(templateRef, viewContainerRef);
+    }
+}
+TabTitleDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiTabTitle]',
+            },] }
+];
+TabTitleDirective.ctorParameters = () => [
+    { type: TemplateRef },
+    { type: ViewContainerRef }
+];
 /**
  * The portal host directive for the contents of the tab.
  */
@@ -6388,11 +6571,11 @@ class TabHeaderComponent {
 TabHeaderComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 preserveWhitespaces: false,
                 changeDetection: 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 = () => [
@@ -6406,6 +6589,7 @@ TabHeaderComponent.propDecorators = {
     selectFocusedIndex: [{ type: Output }],
     indexFocused: [{ type: Output }],
     _headerAddon: [{ type: ContentChild, args: [TabHeaderAddonDirective, { static: false },] }],
+    _title: [{ type: ContentChild, args: [TabTitleDirective, { static: false },] }],
     _labelWrappers: [{ type: ContentChildren, args: [TabLabelWrapperDirective,] }],
     _tabListContainer: [{ type: ViewChild, args: ['tabListContainer', { static: true },] }],
     _tabList: [{ type: ViewChild, args: ['tabList', { static: true },] }],
@@ -6736,7 +6920,7 @@ TabGroupComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 preserveWhitespaces: false,
@@ -6750,8 +6934,10 @@ TabGroupComponent.propDecorators = {
     _tabs: [{ type: ContentChildren, args: [TabComponent,] }],
     _headerAddon: [{ type: ContentChild, args: [TabHeaderAddonDirective, { static: false },] }],
     _tabHeader: [{ type: ViewChild, args: [TabHeaderComponent, { static: false },] }],
+    _tabTitle: [{ type: ContentChild, args: [TabTitleDirective, { static: false },] }],
     selectedIndex: [{ type: Input }],
     type: [{ type: Input }],
+    title: [{ type: Input }],
     size: [{ type: Input }],
     lazy: [{ type: Input }],
     selectedIndexChange: [{ type: Output }],
@@ -6778,6 +6964,7 @@ TabsModule.decorators = [
                     TabLabelDirective,
                     TabContentDirective,
                     TabHeaderAddonDirective,
+                    TabTitleDirective,
                     TabHeaderComponent,
                     TabBodyComponent,
                     TabBodyPortalDirective,
@@ -6790,6 +6977,7 @@ TabsModule.decorators = [
                     TabLabelDirective,
                     TabContentDirective,
                     TabHeaderAddonDirective,
+                    TabTitleDirective,
                     TabLabelWrapperDirective,
                     TabHeaderComponent,
                 ],
@@ -6918,6 +7106,16 @@ class TreeSelectComponent extends CommonFormControl {
             }
         }
     }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.closeOption();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    closeOption() {
+        this.tooltipRef.disposeTooltip();
+    }
     updateSelectDisplay(value) {
         const pickedNode = this.flattedNodes.find(node => this.trackFn(node.value) === this.trackFn(value));
         if (pickedNode) {
@@ -6965,7 +7163,7 @@ class TreeSelectComponent extends CommonFormControl {
 TreeSelectComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 preserveWhitespaces: false,
@@ -6976,7 +7174,7 @@ TreeSelectComponent.decorators = [
                         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 = {
@@ -7106,7 +7304,7 @@ TreeNodeComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -7457,7 +7655,7 @@ SuggestionComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -7492,7 +7690,7 @@ AutocompleteComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -7519,7 +7717,7 @@ SuggestionGroupComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -7779,7 +7977,7 @@ StatusBarComponent.decorators = [
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -7799,6 +7997,110 @@ StatusBarModule.decorators = [
             },] }
 ];
 
+class NavItemIconDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NavItemIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '*[auiNavItemIcon]',
+                exportAs: 'auiNavItemIcon',
+            },] }
+];
+NavItemIconDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+class NavItemContentDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NavItemContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '*[auiNavItemContent]',
+                exportAs: 'auiNavItemContent',
+            },] }
+];
+NavItemContentDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+let uniqueId$5 = 0;
+class NavItemComponent {
+    constructor(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;
+        }
+    }
+    get key() {
+        return this._key;
+    }
+    set key(val) {
+        if (val) {
+            this._key = val;
+        }
+    }
+    get subItems() {
+        var _a;
+        return (_a = this._subItems) === null || _a === void 0 ? void 0 : _a.filter(item => item !== this);
+    }
+}
+NavItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aui-nav-item',
+                template: '',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                preserveWhitespaces: false
+            },] }
+];
+NavItemComponent.ctorParameters = () => [
+    { type: NavItemComponent, decorators: [{ type: SkipSelf }, { type: Optional }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => NavItemGroupComponent),] }] }
+];
+NavItemComponent.propDecorators = {
+    _subItems: [{ type: ContentChildren, args: [NavItemComponent,] }],
+    key: [{ type: Input }],
+    divider: [{ type: Input }],
+    icon: [{ type: ContentChild, args: [NavItemIconDirective, { static: true },] }],
+    content: [{ type: ContentChild, args: [NavItemContentDirective, { static: true },] }]
+};
+
+class NavItemGroupTitleDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NavItemGroupTitleDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '*[auiNavItemGroupTitle]',
+                exportAs: 'auiNavItemGroupTitle',
+            },] }
+];
+NavItemGroupTitleDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+class NavItemGroupComponent {
+}
+NavItemGroupComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aui-nav-item-group',
+                template: '',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                preserveWhitespaces: false
+            },] }
+];
+NavItemGroupComponent.propDecorators = {
+    title: [{ type: ContentChild, args: [NavItemGroupTitleDirective,] }],
+    items: [{ type: ContentChildren, args: [forwardRef(() => NavItemComponent),] }]
+};
+
 class NavItemUlComponent {
     constructor() {
         this.mainPanelCollapsed = true;
@@ -7811,11 +8113,11 @@ class NavItemUlComponent {
 NavItemUlComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -7833,14 +8135,12 @@ class NavMenuComponent {
         this.secondaryPanelHover$$ = new BehaviorSubject(false);
         this.mainPanelCollapsed = false;
         this.secondaryPanelCollapsed = false;
-        this.hideMainPanelToggle = true;
+        this.hideMainPanelToggle = false;
         this.hideSecondaryPanelToggle = false;
         this.theme = 'dark';
         this.activatedKeyChange = new EventEmitter();
         this.mainPanelCollapsedChange = new EventEmitter();
         this.secondaryPanelCollapsedChange = new EventEmitter();
-        this.paths = [];
-        this.flatItems = [];
     }
     get activatedKey() {
         return this._activatedKey;
@@ -7850,49 +8150,38 @@ class NavMenuComponent {
         this.activatedKey$$.next(val);
     }
     ngAfterContentInit() {
-        const items = this.items ||
-            this.groups.reduce((prev, cur) => [...prev, ...cur.items], []);
-        this.flatItems = this.flattenNav(items);
-        this.paths = this.getPaths(items);
-        this.activeKeys$ = this.activatedKey$$.pipe(map(key => this.findPathByLastKey(key)), publishReplay(1), refCount());
-        this.expandedKeys$ = merge(this.activatedKey$$, this.expandedKey$$).pipe(map((key) => this.findPathByLastKey(key)), publishReplay(1), refCount());
+        this.items$ = this.items.changes.pipe(startWith(this.items), map((list) => list.toArray()), publishReplay(1), refCount());
+        this.groups$ = this.groups.changes.pipe(startWith(this.groups), map((list) => list.toArray()), publishReplay(1), refCount());
+        this.activeKeys$ = combineLatest([
+            this.activatedKey$$,
+            this.flatItems.changes.pipe(startWith(this.flatItems)),
+        ]).pipe(map(([key, items]) => items.find(item => item.key === key)), map(item => this.getItemPath(item)), publishReplay(1), refCount());
+        this.expandedKeys$ = combineLatest([
+            merge(this.activatedKey$$, this.expandedKey$$),
+            this.flatItems.changes.pipe(startWith(this.flatItems)),
+        ]).pipe(map(([key, items]) => items.find(item => item.key === key)), map(item => this.getItemPath(item)), publishReplay(1), refCount());
         this.stickedItem$ = this.focusedItemKey$$
             .pipe(bufferCount(2, 1), startWith([null, null]), debounceTime(0), switchMap(([prevKey, currKey]) => currKey
             ? of(currKey)
             : this.secondaryPanelHover$$.pipe(debounceTime(0), switchMap(hover => (hover ? of(prevKey) : of(null))))))
-            .pipe(switchMap((key) => {
-            const stickedItem = this.flatItems.find(item => item.key === key);
+            .pipe(switchMap(key => combineLatest([
+            of(key),
+            this.flatItems.changes.pipe(startWith(this.flatItems)),
+        ])), switchMap(([key, items]) => {
+            const stickedItem = items.find(item => item.key === key);
             return (stickedItem === null || stickedItem === void 0 ? void 0 : stickedItem.subItems.length) > 0
                 ? of(stickedItem)
-                : this.expandedKeys$.pipe(map(keys => keys[0]), map(expandedKey => this.flatItems.find(item => item.key === expandedKey)));
+                : this.expandedKeys$.pipe(map(keys => keys[0]), map(expandedKey => items.find(item => item.key === expandedKey)));
         }), filter(item => !!item), distinctUntilKeyChanged('key'), publishReplay(1), refCount());
         this.hasFocusedItem$ = combineLatest([
+            this.flatItems.changes.pipe(startWith(this.flatItems)),
             this.focusedItemKey$$.pipe(distinctUntilChanged()),
             this.secondaryPanelHover$$,
-        ]).pipe(map(([key, hover]) => {
-            const focusedItem = this.flatItems.find(item => item.key === key);
+        ]).pipe(map(([items, key, hover]) => {
+            const focusedItem = items.find(item => item.key === key);
             return (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.subItems.length) > 0 || hover;
         }), debounceTime(0));
     }
-    flattenNav(items) {
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return [];
-        }
-        return items.reduce((prev, cur) => [...prev, ...this.flattenNav(cur.children)], items);
-    }
-    findPathByLastKey(key) {
-        return this.paths.find(path => [...path].pop() === key);
-    }
-    getPaths(items, parent) {
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return [];
-        }
-        const pre = parent ? [...parent] : [];
-        return items.reduce((prev, cur) => [
-            ...prev,
-            ...this.getPaths(cur.children, [...pre, cur.key]),
-        ], items.map(item => [...pre, item.key]));
-    }
     handleMainPanelExpandButtonClicked() {
         this.mainPanelCollapsedChange.emit(!this.mainPanelCollapsed);
     }
@@ -7914,15 +8203,23 @@ class NavMenuComponent {
     expandedKeyChanged(key) {
         this.expandedKey$$.next(key);
     }
+    getItemPath(item) {
+        if (!item) {
+            return [];
+        }
+        return item.parentItem
+            ? [...this.getItemPath(item.parentItem), item.key]
+            : [item.key];
+    }
 }
 NavMenuComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = {
@@ -7932,11 +8229,12 @@ NavMenuComponent.propDecorators = {
     hideMainPanelToggle: [{ type: Input }],
     hideSecondaryPanelToggle: [{ type: Input }],
     theme: [{ type: Input }],
-    items: [{ type: Input }],
-    groups: [{ type: Input }],
     activatedKeyChange: [{ type: Output }],
     mainPanelCollapsedChange: [{ type: Output }],
-    secondaryPanelCollapsedChange: [{ type: Output }]
+    secondaryPanelCollapsedChange: [{ type: Output }],
+    items: [{ type: ContentChildren, args: [NavItemComponent,] }],
+    groups: [{ type: ContentChildren, args: [NavItemGroupComponent,] }],
+    flatItems: [{ type: ContentChildren, args: [NavItemComponent, { descendants: true },] }]
 };
 
 class NavItemLiComponent {
@@ -7945,22 +8243,20 @@ class NavItemLiComponent {
         this.item$$ = new ReplaySubject(1);
         this.mainPanelCollapsed = true;
         this.itemFocused = new EventEmitter();
-        this.isActive$ = combineLatest([this.navMenu.activeKeys$, this.item$$]).pipe(map(([activeKeys, item]) => activeKeys === null || activeKeys === void 0 ? void 0 : activeKeys.includes(item.key)), tap(isActive => {
+        this.isActive$ = combineLatest([this.navMenu.activeKeys$, this.item$$]).pipe(map(([activeKeys, item]) => activeKeys.includes(item.key)), tap(isActive => {
             this.snapshot.isActive = isActive;
         }), publishReplay(1), refCount());
-        this.isExpanded$ = combineLatest([this.navMenu.expandedKeys$, this.item$$]).pipe(map(([expandedKeys, item]) => { 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)); }), tap(isExpanded => {
+        this.isExpanded$ = combineLatest([this.navMenu.expandedKeys$, this.item$$]).pipe(map(([expandedKeys, item]) => item.subItems.length && expandedKeys.includes(item.key)), tap(isExpanded => {
             this.snapshot.isExpanded = isExpanded;
         }), publishReplay(1), refCount());
         this.isSticked$ = combineLatest([
             this.navMenu.stickedItem$.pipe(map(item => item.key)),
             this.item$$,
-        ]).pipe(map(([stickedKey, item]) => this.depth === 0 && stickedKey === item.key), publishReplay(1), refCount());
+        ]).pipe(map(([stickedKey, item]) => item.depth === 0 && stickedKey === item.key), publishReplay(1), refCount());
         this.snapshot = {
             isActive: false,
             isExpanded: false,
         };
-        this.hovered = false;
-        this.popMenusDisplayed = false;
     }
     get item() {
         return this._item;
@@ -7969,75 +8265,137 @@ class NavItemLiComponent {
         this._item = val;
         this.item$$.next(val);
     }
-    get depth() {
-        const path = this.navMenu.paths.find(path => [...path].pop() === this.item.key);
-        return path.indexOf(this.item.key);
-    }
     get hasSubItem() {
-        var _a;
-        return !!((_a = this.item.children) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    get isLeaf() {
-        return this.depth === 1;
+        return !!this.item.subItems.length;
     }
     get displayItemContent() {
-        return !this.mainPanelCollapsed || this.depth !== 0;
+        return !this.mainPanelCollapsed || this.item.depth !== 0;
     }
-    get isExternal() {
+    handleContentClicked() {
         var _a;
-        return (_a = this.item.href) === null || _a === void 0 ? void 0 : _a.startsWith('http');
+        if (!this.displayItemContent && this.snapshot.isExpanded) {
+            return;
+        }
+        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);
+        }
+    }
+    handleContentFocused(hover) {
+        this.itemFocused.emit(hover ? this.item.key : null);
+    }
+}
+NavItemLiComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aui-nav-item-li',
+                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: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                preserveWhitespaces: false,
+                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 = () => [
+    { type: NavMenuComponent }
+];
+NavItemLiComponent.propDecorators = {
+    item: [{ type: Input }],
+    mainPanelCollapsed: [{ type: Input }],
+    itemFocused: [{ type: Output }],
+    subUl: [{ type: ViewChild, args: [NavItemUlComponent, { static: true },] }]
+};
+
+class NavMenuModule {
+}
+NavMenuModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, ScrollingModule$1, IconModule, TooltipModule],
+                declarations: [
+                    NavMenuComponent,
+                    NavItemGroupComponent,
+                    NavItemComponent,
+                    NavItemIconDirective,
+                    NavItemContentDirective,
+                    NavItemGroupTitleDirective,
+                    NavItemUlComponent,
+                    NavItemLiComponent,
+                ],
+                exports: [
+                    NavMenuComponent,
+                    NavItemGroupComponent,
+                    NavItemComponent,
+                    NavItemIconDirective,
+                    NavItemContentDirective,
+                    NavItemGroupTitleDirective,
+                ],
+            },] }
+];
+
+class PlatformNavComponent {
+    constructor() {
+        this.mainPanelCollapsed = false;
+        this.secondaryPanelCollapsed = false;
+        this.hideMainPanelToggle = false;
+        this.hideSecondaryPanelToggle = false;
+        this.theme = 'dark';
+        this.mainPanelCollapsedChange = new EventEmitter();
+        this.secondaryPanelCollapsedChange = new EventEmitter();
+        this.activatedKeyChange = new EventEmitter();
+        this.activatedItemChange = new EventEmitter();
+    }
+    handleActivatedKeyChange(key) {
+        this.activatedKeyChange.emit(key);
+        this.activatedItemChange.emit(this.findActivatedItem(key));
     }
-    handleContentClicked() {
-        if (!this.displayItemContent && this.snapshot.isExpanded && !this.isLeaf) {
-            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);
-        }
-        else {
-            this.navMenu.activatedKeyChanged(this.item.key);
-        }
+    trackByKey(_, item) {
+        return item.key;
     }
-    handleContentFocused(hover) {
-        this.hovered = hover;
-        this.itemFocused.emit(hover ? this.item.key : null);
+    findActivatedItem(key) {
+        const items = this.items ||
+            this.groups.reduce((prevValue, currValue) => [...prevValue, ...currValue.items], []);
+        return this.flatItems(items).find(item => item.key === key);
     }
-    findParentKey(key) {
-        const path = this.navMenu.paths.find(path => new Set(path).has(key));
-        return path.slice(0, path.indexOf(key)).pop();
+    flatItems(items) {
+        return items.reduce((prevValue, currValue) => currValue.children
+            ? [...prevValue, ...this.flatItems(currValue.children)]
+            : [...prevValue, currValue], []);
     }
 }
-NavItemLiComponent.decorators = [
+PlatformNavComponent.decorators = [
     { type: 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",
+                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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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-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}"]
             },] }
 ];
-NavItemLiComponent.ctorParameters = () => [
-    { type: NavMenuComponent }
-];
-NavItemLiComponent.propDecorators = {
-    item: [{ type: Input }],
+PlatformNavComponent.propDecorators = {
+    items: [{ type: Input }],
+    groups: [{ type: Input }],
     mainPanelCollapsed: [{ type: Input }],
-    itemFocused: [{ type: Output }],
-    subUl: [{ type: ViewChild, args: [NavItemUlComponent, { static: true },] }]
+    secondaryPanelCollapsed: [{ type: Input }],
+    hideMainPanelToggle: [{ type: Input }],
+    hideSecondaryPanelToggle: [{ type: Input }],
+    activatedKey: [{ type: Input }],
+    theme: [{ type: Input }],
+    mainPanelCollapsedChange: [{ type: Output }],
+    secondaryPanelCollapsedChange: [{ type: Output }],
+    activatedKeyChange: [{ type: Output }],
+    activatedItemChange: [{ type: Output }]
 };
 
-class NavMenuModule {
+class PlatformNavModule {
 }
-NavMenuModule.decorators = [
+PlatformNavModule.decorators = [
     { type: NgModule, args: [{
-                imports: [CommonModule, ScrollingModule$1, IconModule, TooltipModule],
-                declarations: [NavMenuComponent, NavItemUlComponent, NavItemLiComponent],
-                exports: [NavMenuComponent],
+                imports: [CommonModule, NavMenuModule, IconModule],
+                declarations: [PlatformNavComponent],
+                exports: [PlatformNavComponent],
             },] }
 ];
 
@@ -8118,6 +8476,7 @@ class AccordionItemComponent extends CdkAccordionItem {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(accordion, cdr, uniqueSelectionDispatcher) {
         super(accordion, cdr, uniqueSelectionDispatcher);
+        this.hideToggle = false;
         this.togglePosition = 'left';
         this.expandedChange = new EventEmitter();
     }
@@ -8561,21 +8920,6 @@ ScrollingModule.decorators = [
             },] }
 ];
 
-class ThemeService {
-    getCurrentColorMode() {
-        return (document
-            .querySelector('html')
-            .getAttribute('aui-color-mode') || 'light');
-    }
-    setColorMode(mode) {
-        document.querySelector('html').setAttribute('aui-color-mode', mode);
-    }
-}
-ThemeService.ɵprov = ɵɵdefineInjectable({ factory: function ThemeService_Factory() { return new ThemeService(); }, token: ThemeService, providedIn: "root" });
-ThemeService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-
 let uid = 0;
 // tslint:disable-next-line: directive-class-suffix
 class AnchorDirectiveChild {
@@ -9128,6 +9472,9 @@ class TimePickerComponent extends CommonFormControl {
         this.hovered = false;
         this.bem = bem$3;
     }
+    get rootClass() {
+        return `${bem$3.element('container')} ${this.focused ? 'isFocused' : ''} ${this.disabled ? 'disabled' : ''}`;
+    }
     writeValue(value) {
         super.writeValue(value);
         if (!value) {
@@ -9171,7 +9518,7 @@ class TimePickerComponent extends CommonFormControl {
         }
         // dateFormatValue may need reset
         this.setValue(this.timeValue);
-        this.openChange.next(false);
+        this.submit();
     }
     openTooltip() {
         if (this.tooltip.isCreated) {
@@ -9185,7 +9532,10 @@ class TimePickerComponent extends CommonFormControl {
         this.submit();
     }
     submit(close = true, value) {
-        close && this.tooltip.disposeTooltip();
+        if (close) {
+            this.tooltip.disposeTooltip();
+            this.openChange.next(false);
+        }
         const refer = value !== null && value !== void 0 ? value : this.timeValue;
         this.emitValue(refer
             ? {
@@ -9199,7 +9549,7 @@ class TimePickerComponent extends CommonFormControl {
 TimePickerComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -9209,7 +9559,7 @@ TimePickerComponent.decorators = [
                         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 = {
@@ -9419,7 +9769,7 @@ class TimePickerPanelComponent extends CommonFormControl {
 TimePickerPanelComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -9518,7 +9868,7 @@ class DatePickerPanelComponent extends CommonFormControl {
         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);
         }
         const nextNavRange = nextNavRangeType(this.navRange, getNavRangeByType(this.type));
         if (this.navRange !== nextNavRange) {
@@ -9536,11 +9886,14 @@ class DatePickerPanelComponent extends CommonFormControl {
         this.selectedDate = updateDateByTimeModel(this.selectedDate, time);
         this.emitValueChange(this.selectedDate);
     }
+    setToday() {
+        this.confirmValue(dayjs(), true);
+    }
 }
 DatePickerPanelComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 providers: [
@@ -9580,7 +9933,7 @@ class CalendarFooterComponent {
 CalendarFooterComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: 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}"]
@@ -9589,6 +9942,7 @@ CalendarFooterComponent.decorators = [
 CalendarFooterComponent.propDecorators = {
     clearable: [{ type: Input }],
     clearText: [{ type: Input }],
+    customAction: [{ type: Input }],
     confirm: [{ type: Output }],
     clear: [{ type: Output }]
 };
@@ -9672,10 +10026,10 @@ class CalendarHeaderComponent {
 CalendarHeaderComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: 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 = {
@@ -9805,7 +10159,7 @@ PickerPanelComponent.decorators = [
                 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: ViewEncapsulation.None,
                 changeDetection: 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 = () => [
@@ -9928,7 +10282,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
         this.syncTime();
         if (this.rangeValue.length === 2) {
             this.reorder(this.rangeValue);
-            this.emitValueChange(this.rangeValue);
+            this.confirmValue(this.rangeValue, !this.showTime);
         }
     }
     reorder(sortedDate) {
@@ -9942,9 +10296,9 @@ class DateRangePickerPanelComponent extends CommonFormControl {
             this.matchValues[1] = date;
         }
     }
-    confirmValue() {
-        this.emitValueChange(this.rangeValue);
-        this.confirm.next();
+    confirmValue(value, closeThen = true) {
+        this.emitValueChange(value);
+        closeThen && this.confirm.next();
     }
     timeChange(time) {
         var _a;
@@ -9982,7 +10336,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
 DateRangePickerPanelComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -10054,7 +10408,7 @@ class DatePickerComponent extends CommonFormControl {
 DatePickerComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 // tslint:disable-next-line: validate-decorators
                 encapsulation: ViewEncapsulation.Emulated,
@@ -10083,6 +10437,7 @@ DatePickerComponent.propDecorators = {
     showFooter: [{ type: Input }],
     footerTemplate: [{ type: Input }],
     extraFooter: [{ type: Input }],
+    placeholder: [{ type: Input }],
     openChange: [{ type: Output }]
 };
 
@@ -10117,7 +10472,7 @@ class RangePickerComponent extends CommonFormControl {
 RangePickerComponent.decorators = [
     { type: 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: ViewEncapsulation.Emulated,
@@ -10172,7 +10527,7 @@ class DatePickerTriggerComponent {
             : ((_a = this.value) === null || _a === void 0 ? void 0 : _a[0]) || ((_b = this.value) === null || _b === void 0 ? void 0 : _b[1]);
     }
     get showClear() {
-        return this.clearable && this.hasValue && this.hovered;
+        return !this.disabled && this.clearable && this.hasValue && this.hovered;
     }
     focusInput() {
         this.focusInputRef.elementRef.nativeElement.focus();
@@ -10181,11 +10536,11 @@ class DatePickerTriggerComponent {
 DatePickerTriggerComponent.decorators = [
     { type: 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: ViewEncapsulation.Emulated,
                 changeDetection: 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 = () => [];
@@ -10234,9 +10589,482 @@ DatePickerModule.decorators = [
             },] }
 ];
 
+var DrawerSize;
+(function (DrawerSize) {
+    DrawerSize["Small"] = "small";
+    DrawerSize["Medium"] = "medium";
+    DrawerSize["Big"] = "big";
+})(DrawerSize || (DrawerSize = {}));
+class DrawerRef {
+}
+
+/**
+ * @packageDocumentation
+ * @module page-guard
+ */
+class DrawerHeaderDirective {
+}
+DrawerHeaderDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiDrawerHeader]',
+            },] }
+];
+class DrawerContentDirective {
+}
+DrawerContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiDrawerContent]',
+            },] }
+];
+class DrawerFooterDirective {
+}
+DrawerFooterDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[auiDrawerFooter]',
+            },] }
+];
+
+const DATA = new InjectionToken('drawer-data');
+const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
+const SIZE_MAPPER = {
+    [DrawerSize.Small]: 400,
+    [DrawerSize.Medium]: 600,
+    [DrawerSize.Big]: 800,
+};
+class DrawerComponent extends DrawerRef {
+    constructor(viewContainerRef, overlay, injector, cdr) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.injector = injector;
+        this.cdr = cdr;
+        this.size = DrawerSize.Medium;
+        this.offsetY = 0;
+        this.hideOnClickOutside = false;
+        this.showClose = true;
+        this._value = SIZE_MAPPER[DrawerSize.Medium];
+        this.afterClosed$ = new Subject();
+        this.afterOpen$ = new Subject();
+        this.drawerViewInit = new EventEmitter();
+        this.close = new EventEmitter();
+        this.onDestroy$ = new Subject();
+        this.isTemplateRef = isTemplateRef;
+        this.componentInstance = null;
+        this.templateContext = {};
+    }
+    set width(value) {
+        this._value = value;
+    }
+    get width() {
+        return this._value;
+    }
+    get drawerClasses() {
+        return Object.assign({ drawer: true }, (!this.drawerClass ? null : { [this.drawerClass]: true }));
+    }
+    get afterClosed() {
+        return this.afterClosed$.asObservable();
+    }
+    get afterOpen() {
+        return this.afterOpen$.asObservable();
+    }
+    get transform() {
+        return `translateX(${this.visible ? 0 : '100%'})`;
+    }
+    ngOnInit() {
+        this.attachOverlay();
+        this.updateBodyOverflow();
+        this.templateContext = { $implicit: this.contentParams };
+        this.cdr.detectChanges();
+    }
+    ngOnChanges(changes) {
+        const { visible } = changes;
+        if (visible) {
+            const value = visible.currentValue;
+            if (value) {
+                this.open();
+            }
+            else {
+                this.closure();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.attachBodyContent();
+        setTimeout(() => {
+            this.drawerViewInit.emit();
+        }, 0);
+    }
+    attachOverlay() {
+        if (!this.overlayRef) {
+            this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
+            this.overlayRef = this.overlay.create(this.getOverlayConfig());
+        }
+        if (this.overlayRef) {
+            this.overlayRef.attach(this.portal);
+            this.overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe(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();
+                }
+            });
+        }
+    }
+    getOverlayConfig() {
+        return new OverlayConfig({
+            panelClass: DRAWER_OVERLAY_CLASS,
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+    }
+    attachBodyContent() {
+        var _a;
+        (_a = this.bodyPortalOutlet) === null || _a === void 0 ? void 0 : _a.dispose();
+        const content = this.content || this.contentTemplate;
+        if (content instanceof Type) {
+            const componentPortal = new ComponentPortal(content, null, Injector.create({
+                providers: [
+                    {
+                        provide: DATA,
+                        useValue: this.contentParams,
+                    },
+                ],
+                parent: this.injector,
+            }));
+            const componentRef = this.bodyPortalOutlet.attachComponentPortal(componentPortal);
+            this.componentInstance = componentRef.instance;
+            Object.assign(componentRef.instance, this.contentParams);
+            componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    updateBodyOverflow() {
+        if (this.overlayRef) {
+            if (this.visible) {
+                this.overlayRef.getConfig().scrollStrategy.enable();
+            }
+            else {
+                this.overlayRef.getConfig().scrollStrategy.disable();
+            }
+        }
+    }
+    open() {
+        this.visible = true;
+        this.afterOpen$.next();
+        this.afterOpen$.complete();
+        this.updateBodyOverflow();
+        this.cdr.markForCheck();
+    }
+    closure(result = null) {
+        this.visible = false;
+        this.close.next();
+        this.afterClosed$.next(result);
+        this.afterClosed$.complete();
+        this.updateBodyOverflow();
+        this.cdr.markForCheck();
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        this.overlayRef = null;
+    }
+    maskClick() {
+        if (this.maskClosable && this.mask) {
+            this.closure();
+        }
+    }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.disposeOverlay();
+    }
+}
+DrawerComponent.decorators = [
+    { type: 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: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
+    { type: ViewContainerRef },
+    { type: Overlay },
+    { type: Injector },
+    { type: ChangeDetectorRef }
+];
+DrawerComponent.propDecorators = {
+    title: [{ type: Input }],
+    footer: [{ type: Input }],
+    size: [{ type: Input }],
+    offsetY: [{ type: Input }],
+    visible: [{ type: Input }],
+    content: [{ type: Input }],
+    hideOnClickOutside: [{ type: Input }],
+    showClose: [{ type: Input }],
+    drawerClass: [{ type: Input }],
+    mask: [{ type: Input }],
+    maskClosable: [{ type: Input }],
+    width: [{ type: Input }],
+    drawerViewInit: [{ type: Output }],
+    close: [{ type: Output }],
+    drawerTemplate: [{ type: ViewChild, args: ['drawerTemplate', { static: true },] }],
+    bodyPortalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: false },] }],
+    titleTemplate: [{ type: ContentChild, args: [DrawerHeaderDirective, { read: TemplateRef },] }],
+    contentTemplate: [{ type: ContentChild, args: [DrawerContentDirective, { read: TemplateRef },] }],
+    footerTemplate: [{ type: ContentChild, args: [DrawerFooterDirective, { read: TemplateRef },] }]
+};
+
+class DrawerService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.unsubscribe$ = new Subject();
+    }
+    open(options) {
+        var _a;
+        if (!this.drawerRef) {
+            this.createDrawer();
+            this.updateOptions(options);
+        }
+        return (_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.instance;
+    }
+    updateOptions(options) {
+        Object.assign(this.drawerRef.instance, options);
+    }
+    createDrawer() {
+        this.overlayRef = this.overlay.create();
+        this.drawerRef = this.overlayRef.attach(new ComponentPortal(DrawerComponent));
+        this.drawerRef.instance.drawerViewInit
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.drawerRef.instance.open();
+        });
+        this.drawerRef.instance.afterClosed
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.overlayRef.dispose();
+            this.drawerRef = null;
+            this.unsubscribe$.next();
+            this.unsubscribe$.complete();
+        });
+    }
+}
+DrawerService.ɵprov = ɵɵdefineInjectable({ factory: function DrawerService_Factory() { return new DrawerService(ɵɵinject(Overlay)); }, token: DrawerService, providedIn: "root" });
+DrawerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+DrawerService.ctorParameters = () => [
+    { type: Overlay }
+];
+
+const COMMON = [
+    DrawerComponent,
+    DrawerHeaderDirective,
+    DrawerContentDirective,
+    DrawerFooterDirective,
+];
+class DrawerModule {
+}
+DrawerModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, IconModule, IconModule, OverlayModule],
+                declarations: COMMON,
+                exports: COMMON,
+                providers: [DrawerService],
+                entryComponents: [DrawerComponent],
+            },] }
+];
+
+const StepState = {
+    Default: 'default',
+    Done: 'done',
+    Error: 'error',
+    Pending: 'pending',
+};
+
+const StepDefaultIcon = {
+    [StepState.Default]: 'number',
+    [StepState.Done]: 'check_circle',
+    [StepState.Error]: 'close_circle',
+    [StepState.Pending]: 'sync_circle',
+};
+const StepSelectedIcon = {
+    [StepState.Default]: 'number',
+    [StepState.Done]: 'check_circle_s',
+    [StepState.Error]: 'close_circle_s',
+    [StepState.Pending]: 'sync_circle_s',
+};
+class StepsComponent {
+    constructor() {
+        this._steps = [];
+        this.linear = false;
+        this.orientation = 'horizontal';
+        this.type = 'step';
+        this.currentIndexChange = new EventEmitter();
+        this.selectedIndexChange = new EventEmitter();
+        this.currentIndexChange$$ = new BehaviorSubject(0);
+        this.stepsChange$$ = new BehaviorSubject([]);
+        this.destroy$$ = new Subject();
+    }
+    get steps() {
+        return this._steps;
+    }
+    set steps(val) {
+        this._steps = val;
+        this.stepsChange$$.next(val);
+    }
+    get currentIndex() {
+        return this._currentIndex;
+    }
+    set currentIndex(index) {
+        this.currentIndexChange$$.next(index);
+    }
+    ngOnInit() {
+        this.currentIndexChange$$
+            .pipe(takeUntil(this.destroy$$))
+            .subscribe(index => {
+            if (this.type === 'step') {
+                this.setCurrentIndex(index);
+            }
+        });
+        this.stepsChange$$.pipe(takeUntil(this.destroy$$)).subscribe(steps => {
+            if (this.type === 'progress') {
+                this.getProgressCurrentIndex(steps);
+            }
+        });
+    }
+    setCurrentIndex(index) {
+        var _a;
+        if (this.linear) {
+            if ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) {
+                const ret = Math.min(Math.max(0, index), this.steps.length - 1);
+                const reversedPrevSteps = this.steps.slice(0, ret).reverse();
+                const lastDoneStepIndex = reversedPrevSteps.length -
+                    reversedPrevSteps.findIndex(step => step.state === StepState.Done || step.optional);
+                this._currentIndex = Math.min(lastDoneStepIndex, ret);
+            }
+        }
+        else {
+            this._currentIndex = index;
+        }
+    }
+    getProgressCurrentIndex(steps) {
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            if (this._currentIndex !== 0) {
+                this.currentIndexChange.emit(0);
+            }
+            this._currentIndex = 0;
+        }
+        else {
+            const reversedSteps = this.steps.slice(0).reverse();
+            const doneStepIndex = reversedSteps.findIndex(step => step.state === StepState.Done);
+            const lastDoneStepIndex = doneStepIndex > -1 ? reversedSteps.length - doneStepIndex : 0;
+            const 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;
+            }
+        }
+    }
+    get isVertical() {
+        return this.orientation === 'vertical';
+    }
+    get isProgress() {
+        return this.type === 'progress';
+    }
+    getIcon(i, state) {
+        if (!state) {
+            return StepDefaultIcon.default;
+        }
+        return this.getActiveIndex() === i
+            ? StepSelectedIcon[state]
+            : StepDefaultIcon[state];
+    }
+    select(i, step) {
+        var _a;
+        const 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;
+        }
+    }
+    getActiveIndex() {
+        return this.selectedIndex !== undefined
+            ? this.selectedIndex
+            : this._currentIndex;
+    }
+    isLastActive(i, steps) {
+        const firstDefaultIndex = steps.findIndex(step => !step.state || step.state === StepState.Default);
+        return i === this.selectedIndex
+            ? true
+            : firstDefaultIndex === 0
+                ? false
+                : firstDefaultIndex === i;
+    }
+    ngOnDestroy() {
+        this.destroy$$.next();
+    }
+}
+StepsComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush,
+                encapsulation: 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: Input }],
+    linear: [{ type: Input }],
+    currentIndex: [{ type: Input }],
+    orientation: [{ type: Input }],
+    type: [{ type: Input }],
+    currentIndexChange: [{ type: Output }],
+    selectedIndexChange: [{ type: Output }]
+};
+
+class StepsModule {
+}
+StepsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, IconModule],
+                declarations: [StepsComponent],
+                exports: [StepsComponent],
+            },] }
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, BackTopComponent, BackTopModule, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonForm, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CustomAutoCompleteDirective, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DropdownActiveDirective, DropdownButtonComponent, DropdownDirective, DropdownModule, FixedSizeTableVirtualScrollDirective, FixedSizeTableVirtualScrollStrategy, FixedSizeVirtualScrollDirective, FormDirective, FormItemAddonDirective, FormItemComponent, FormItemControlDirective, FormItemErrorDirective, FormItemHintDirective, FormItemLabelDirective, FormItemWidth, FormModule, HIDDEN_DELAY, HOUR, HOUR_ITEMS, I18NInterfaceToken, I18nModule, I18nPipe, I18nService, ICON_REGISTER_PROVIDER_FACTORY, ICON_REGISTER_SERVICE_PROVIDER, INPUT_ERROR_KEY, IconComponent, IconModule, IconRegisterService, IncludesDirective, InlineAlertComponent, InlineAlertModule, InlineAlertTitleDirective, InlineAlertType, InputComponent, InputGroupComponent, InputModule, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuContentDirective, MenuGroupComponent, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NavMenuComponent, NavMenuModule, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PAGINATOR_INTL_PROVIDER, PAGINATOR_INTL_PROVIDER_FACTORY, PageComponent, PageContentDirective, PageEvent, PageHeaderDirective, PageModule, PageSiderDirective, PageSnackbarDirective, PageToolbarDirective, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, SECOND, SECOND_ITEMS, ScrollingModule, SearchComponent, SectionComponent, SectionTitleDirective, SelectAllStatus, SelectComponent, SelectModule, Side, SortDirective, SortHeaderComponent, SortModule, StatusBarComponent, StatusBarModule, StatusBarSize, StatusType, SubmenuComponent, SuggestionComponent, SuggestionGroupComponent, SuggestionGroupTitleDirective, SwitchComponent, SwitchModule, TOOLTIP_COPY_INTL_INTL_PROVIDER, TOOLTIP_COPY_INTL_PROVIDER_FACTORY, TabBodyComponent, TabBodyPortalDirective, TabChangeEvent, TabComponent, TabContentDirective, TabContextService, TabGroupComponent, TabHeaderActiveIndicatorComponent, TabHeaderAddonDirective, TabHeaderComponent, TabLabelDirective, TabLabelWrapperDirective, TabSize, TabType, TableCellDefDirective, TableCellDirective, TableColumnDefDirective, TableComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TableRowComponent, TableRowDefDirective, TableScrollWrapperDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _isNumberValue, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceNumber, coerceString, en, getAnchorTreeItems, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isTemplateRef, isTimePickerModel, isUndefined, last, observeMutationOn, observeResizeOn, scrollIntoView, sleep, watchContentExist, zh, ɵ0, ɵ1, ɵ2, TooltipCopyDirective as ɵa, DialogComponent as ɵb, ConfirmDialogComponent as ɵc, BaseRadio as ɵd, InputAddonBeforeDirective as ɵe, InputAddonAfterDirective as ɵf, InputPrefixDirective as ɵg, InputSuffixDirective as ɵh, SharedModule as ɵi, ClickOutsideDirective as ɵj, AutosizeDirective as ɵk, BaseSelect as ɵl, MenuGroupTitleDirective as ɵm, MessageWrapperComponent as ɵn, MessageComponent as ɵo, MessageAnimations as ɵp, BaseMessage as ɵq, NotificationWrapperComponent as ɵr, NavItemUlComponent as ɵs, NavItemLiComponent as ɵt, VirtualForOfDirective as ɵu, _isNumberValue as ɵv, DatePickerComponent as ɵw };
+export { AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, BackTopComponent, BackTopModule, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonForm, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CustomAutoCompleteDirective, DATA, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DrawerComponent, DrawerContentDirective, DrawerFooterDirective, DrawerHeaderDirective, DrawerModule, DrawerRef, DrawerService, DrawerSize, DropdownActiveDirective, DropdownButtonComponent, DropdownDirective, DropdownModule, FixedSizeTableVirtualScrollDirective, FixedSizeTableVirtualScrollStrategy, FixedSizeVirtualScrollDirective, FormDirective, FormItemAddonDirective, FormItemComponent, FormItemControlDirective, FormItemErrorDirective, FormItemHintDirective, FormItemLabelDirective, FormItemWidth, FormModule, HIDDEN_DELAY, HOUR, HOUR_ITEMS, I18NInterfaceToken, I18nModule, I18nPipe, I18nService, ICON_REGISTER_PROVIDER_FACTORY, ICON_REGISTER_SERVICE_PROVIDER, INPUT_ERROR_KEY, IconComponent, IconModule, IconRegisterService, IncludesDirective, InlineAlertComponent, InlineAlertModule, InlineAlertTitleDirective, InlineAlertType, InputComponent, InputGroupComponent, InputModule, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuContentDirective, MenuGroupComponent, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NavItemComponent, NavItemContentDirective, NavItemGroupComponent, NavItemGroupTitleDirective, NavItemIconDirective, NavMenuComponent, NavMenuModule, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PAGINATOR_INTL_PROVIDER, PAGINATOR_INTL_PROVIDER_FACTORY, PageComponent, PageContentDirective, PageEvent, PageHeaderDirective, PageModule, PageSiderDirective, PageSnackbarDirective, PageToolbarDirective, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, PlatformNavComponent, PlatformNavModule, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, SECOND, SECOND_ITEMS, ScrollingModule, SearchComponent, SectionComponent, SectionTitleDirective, SelectAllStatus, SelectComponent, SelectModule, Side, SortDirective, SortHeaderComponent, SortModule, StatusBarComponent, StatusBarModule, StatusBarSize, StatusType, StepState, StepsComponent, StepsModule, SubmenuComponent, SuggestionComponent, SuggestionGroupComponent, SuggestionGroupTitleDirective, SwitchComponent, SwitchModule, TOOLTIP_COPY_INTL_INTL_PROVIDER, TOOLTIP_COPY_INTL_PROVIDER_FACTORY, TabBodyComponent, TabBodyPortalDirective, TabChangeEvent, TabComponent, TabContentDirective, TabContextService, TabGroupComponent, TabHeaderActiveIndicatorComponent, TabHeaderAddonDirective, TabHeaderComponent, TabLabelDirective, TabLabelWrapperDirective, TabSize, TabTitleDirective, TabType, TableCellDefDirective, TableCellDirective, TableColumnDefDirective, TableComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TableRowComponent, TableRowDefDirective, TableScrollWrapperDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeModule, ThemePipe, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _isNumberValue, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceNumber, coerceString, en, getAnchorTreeItems, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isTemplateRef, isTimePickerModel, isUndefined, last, observeMutationOn, observeResizeOn, scrollIntoView, sleep, watchContentExist, zh, ɵ0, ɵ1, ɵ2, TableCellComponent as ɵa, TooltipCopyDirective as ɵb, DialogComponent as ɵc, ConfirmDialogComponent as ɵd, BaseRadio as ɵe, InputAddonBeforeDirective as ɵf, InputAddonAfterDirective as ɵg, InputPrefixDirective as ɵh, InputSuffixDirective as ɵi, SharedModule as ɵj, ClickOutsideDirective as ɵk, AutosizeDirective as ɵl, BaseSelect as ɵm, MenuGroupTitleDirective as ɵn, MessageWrapperComponent as ɵo, MessageComponent as ɵp, MessageAnimations as ɵq, BaseMessage as ɵr, NotificationWrapperComponent as ɵs, NavItemUlComponent as ɵt, NavItemLiComponent as ɵu, VirtualForOfDirective as ɵv, _isNumberValue as ɵw, DatePickerComponent as ɵx };
 //# sourceMappingURL=alauda-ui.js.map