@alauda/ui 6.4.6-beta.3 → 6.4.6-beta.6

package/fesm2015/alauda-ui.mjs

@@ -60,6 +60,9 @@ const ComponentSize = {
     Medium: 'medium',
     Small: 'small',
     Mini: 'mini',
+    /**
+     * represents default internally, @link https://github.com/angular/vscode-ng-language-service/issues/1147
+     */
     Empty: '',
 };
 
@@ -71,8 +74,17 @@ const ButtonType = {
     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',
 };
 
@@ -82,6 +94,7 @@ function sleep(ms = 0) {
     });
 }
 
+// Experimental bem classname helper
 class Bem {
     constructor(namespace) {
         this.namespace = namespace;
@@ -127,6 +140,7 @@ function buildBem(namespace) {
 
 function coerceString(val) {
     var _a;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     return val == null ? '' : (_a = val === null || val === void 0 ? void 0 : val.toString()) !== null && _a !== void 0 ? _a : '';
 }
 function coerceAttrBoolean(val) {
@@ -136,6 +150,9 @@ function coerceNumber(val, fallbackValue = 0) {
     return _isNumberValue(val) ? Number(val) : fallbackValue;
 }
 function _isNumberValue(value) {
+    // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,
+    // and other non-number values as NaN, where Number just uses 0) but it considers the string
+    // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.
     return !isNaN(parseFloat(value)) && !isNaN(Number(value));
 }
 
@@ -268,6 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         type: Optional
                     }] }];
     } });
+// eslint-disable-next-line sonar/function-name
 function ICON_REGISTER_PROVIDER_FACTORY(parentRegister, document, httpClient) {
     return parentRegister || new IconRegisterService(document, httpClient);
 }
@@ -495,6 +513,7 @@ class ButtonComponent {
         return this._size;
     }
     set size(val) {
+        // when change from other size to default
         if (!val) {
             val = ComponentSize.Medium;
         }
@@ -650,12 +669,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 class AccordionItemComponent extends CdkAccordionItem {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(accordion, cdr, uniqueSelectionDispatcher) {
         super(accordion, cdr, uniqueSelectionDispatcher);
         this.background = true;
     }
     ngAfterContentInit() {
         if (this._lazyContentTpl) {
+            // Render the content as soon as the accordion becomes open.
             this.opened
                 .pipe(startWith(null), filter(() => !!this.expanded), take(1))
                 .subscribe(() => {
@@ -944,6 +965,7 @@ class AnchorTreeComponent extends AnchorDirectiveChild {
     watchLabelsChange() {
         this.depose$$.next();
         const cdr = this.injector.get(ChangeDetectorRef);
+        // FIXME: Is there any better way to achieve this?
         combineLatest(this.treeItems.map(({ labelChange }) => labelChange).filter(Boolean))
             .pipe(debounceTime(0), takeUntil(this.depose$$))
             .subscribe(() => cdr.markForCheck());
@@ -1661,6 +1683,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['auiTooltipActive']
             }] } });
 
+/**
+ * Texts to render on the code editor.
+ */
 class TooltipCopyIntl {
     constructor() {
         this.copyTip = 'Click to copy';
@@ -1673,10 +1698,13 @@ TooltipCopyIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TooltipCopyIntl, decorators: [{
             type: Injectable
         }] });
+// eslint-disable-next-line sonar/function-name
 function TOOLTIP_COPY_INTL_PROVIDER_FACTORY(parentIntl) {
     return parentIntl || new TooltipCopyIntl();
 }
+/** @docs-private */
 const TOOLTIP_COPY_INTL_INTL_PROVIDER = {
+    // If there is already an CodeEditorIntl available, use that. Otherwise, provide a new one.
     provide: TooltipCopyIntl,
     deps: [[new Optional(), new SkipSelf(), TooltipCopyIntl]],
     useFactory: TOOLTIP_COPY_INTL_PROVIDER_FACTORY,
@@ -2135,7 +2163,9 @@ class BackTopComponent {
         this.target$$ = new BehaviorSubject(this.target);
         this.visibilityHeight$$ = new BehaviorSubject(this.visibilityHeight);
         this.isDisplayed$ = combineLatest([
-            this.target$$.asObservable().pipe(map(target => this.getTarget(target)), switchMap(target => fromEvent(target, 'scroll').pipe(throttleTime(50, undefined, { leading: true, trailing: true }), map(() => this.getTargetScrollTop(target))))),
+            this.target$$.asObservable().pipe(map(target => this.getTarget(target)), switchMap(target => fromEvent(target, 'scroll').pipe(
+            // use default scheduler
+            throttleTime(50, undefined, { leading: true, trailing: true }), map(() => this.getTargetScrollTop(target))))),
             this.visibilityHeight$$,
         ]).pipe(map(([scrollTop, visibilityHeight]) => scrollTop >= visibilityHeight), distinctUntilChanged());
     }
@@ -2402,6 +2432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/**
+ * form control 内部不保持 value 属性，当不使用 ngModel 时可以通过 [(value)] 实现双向绑定；
+ * 也可以分别传入 value 和 监听 valueChange 事件以实现阻断用户操作的功能。
+ */
 class CommonFormControl {
     constructor(cdr) {
         this.cdr = cdr;
@@ -2480,6 +2514,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], valueChange: [{
                 type: Output
             }] } });
+/**
+ * @deprecated use {@link CommonFormControl} instead
+ */
 const CommonForm = CommonFormControl;
 
 const LabelPosition = {
@@ -3008,6 +3045,7 @@ const YEAR = 'year';
 const HOUR = 'hour';
 const MINUTE = 'minute';
 const SECOND = 'second';
+// 根据日期类型，分为年，月，日
 var DatePickerType;
 (function (DatePickerType) {
     DatePickerType["Day"] = "date";
@@ -3060,6 +3098,7 @@ function getDatePanelIterable(date, navRange, weekStartDay) {
             counts = YEAR_PANEL_COLUMN_COUNT * YEAR_PANEL_ROW_COUNT;
             break;
         }
+        // No default
     }
     let i = 0;
     return {
@@ -3286,18 +3325,22 @@ class CalendarHeaderComponent {
     get headerRange() {
         return calcRangeValue(this.dateNavRange, this.anchor);
     }
+    // maxAvail > current date ：right btn hide
+    // minAvail > current date ：left btn hide
     shouldShowNav(type, side) {
         var _a;
         const availValue = (_a = (side === Side.Left ? this._minAvail : this._maxAvail)) === null || _a === void 0 ? void 0 : _a.clone();
         if (!availValue) {
             return true;
         }
+        // 对于年的判别，2014-5-1至2015-6-1日，仍当展示按钮
         const constrainDate = [DateNavRange.Month, DateNavRange.Year].includes(type)
             ? availValue.add(side === Side.Left ? 1 : -1, type)
             : availValue;
         return (this.compareNavValue(type, constrainDate, this.anchor) ===
             (side === Side.Left ? -1 : 1));
     }
+    // @return isBetween|isEqual:0, isBefore:-1,isAfter:1
     compareNavValue(type, constrain, anchor) {
         const range = calcRangeValue(type, anchor);
         const constrainValue = constrain;
@@ -3387,9 +3430,12 @@ class PickerPanelComponent {
         return composeDisabledDateFn(date => this.minDate && date.isBefore(this.minDate), date => this.maxDate && date.isAfter(this.maxDate), this.disabledDate);
     }
     ngOnChanges() {
+        // 如果 dateValue 是一个数组，必然是同一个面板上，否则应当给与不同的面板不同的dateValue值
         const headerRange = calcRangeValue(this.navRange, this.anchor);
         this.renderPanelData(headerRange.start, this.navRange);
     }
+    // 根据当前数据，计算渲染表格
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     renderPanelData(date, navRange) {
         const value = [];
         let colCounts = 0;
@@ -3414,6 +3460,7 @@ class PickerPanelComponent {
                 rowCounts = MONTH_PANEL_ROW_COUNT;
                 break;
             }
+            // No default
         }
         for (let k = 0; k < rowCounts; k++) {
             const row = [];
@@ -3568,6 +3615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/* eslint-disable sonarjs/no-duplicate-string */
 class InputComponent {
     constructor(elementRef, renderer) {
         this.elementRef = elementRef;
@@ -3575,6 +3623,9 @@ class InputComponent {
         this._size = ComponentSize.Medium;
         this._disabled = false;
         this.size$ = new BehaviorSubject(this.size);
+        /**
+         * workaround for @link https://github.com/microsoft/TypeScript/pull/42425
+         */
         this.disabled$ = new BehaviorSubject(this.disabled);
         this.renderer.addClass(this.elementRef.nativeElement, 'aui-input');
         this.renderer.addClass(this.elementRef.nativeElement, 'aui-input--' + this.size);
@@ -3676,6 +3727,7 @@ class TimePickerPanelComponent extends CommonFormControl {
         this.ComponentSize = ComponentSize;
         this.bem = bem$4;
         this.enabledColumns = 0;
+        // 用于控制初次滚动，是否展示滚动动画效果
         this.firstScrolled = false;
         this.model$.subscribe(_ => {
             this.cdr.markForCheck();
@@ -3793,6 +3845,7 @@ class TimePickerPanelComponent extends CommonFormControl {
         }
         else {
             const difference = targetOffset - currentTop;
+            // 每个tick滚动距离
             const perTick = (difference / duration) * 10;
             requestAnimationFrame(() => {
                 element.scrollTop = currentTop + perTick;
@@ -4165,6 +4218,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
         this.FOOTER_DATE_FORMAT = 'YYYY-MM-dd';
         this.leftAnchor = dayjs();
         this.rightAnchor = dayjs().add(1, MONTH);
+        // 用于存放 range data 序列，数量为 2 时清除
         this.rangeValue = [];
         this.leftDisabledTimeFn = this.getDisabledTimeCachedFn(Side.Left);
         this.rightDisabledTimeFn = this.getDisabledTimeCachedFn(Side.Right);
@@ -4194,6 +4248,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
             this.rightDateRange = type;
         }
     }
+    // range 组件范围受控
     getDateDisabledFn(side, constrainValue) {
         return composeDisabledDateFn((date, navRange) => {
             if (navRange === DateNavRange.Month) {
@@ -4445,6 +4500,9 @@ const DEFAULT_VALUE = {
     minRows: 3,
     maxRows: 6,
 };
+/**
+ * Directive to automatically resize a textarea to fit its content.
+ */
 class AutosizeDirective {
     constructor(elRef, ngControl) {
         this.elRef = elRef;
@@ -4483,7 +4541,9 @@ AutosizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AutosizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'textarea[autosize][ngModel],textarea[autosize][formControl],textarea[autosize][formControlName]',
+                    selector: 
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    'textarea[autosize][ngModel],textarea[autosize][formControl],textarea[autosize][formControlName]',
                     exportAs: 'TextareaAutosize',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i4.NgControl }]; }, propDecorators: { autoSize: [{
@@ -4583,6 +4643,7 @@ class TagComponent {
     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' : ''} ${this.allowClick && this.isNormalTag ? 'allowClick' : ''}`;
     }
+    // 只有常规标签支持单击样式
     get isNormalTag() {
         return !this.solid && !this.closeable && !this.invalid;
     }
@@ -4774,10 +4835,10 @@ class SearchComponent {
     }
 }
 SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SearchComponent, selector: "aui-search", inputs: { size: "size", searchButton: "searchButton", clearable: "clearable", searching: "searching", placeholder: "placeholder", disabled: "disabled", keyword: "keyword" }, outputs: { keywordChange: "keywordChange", search: "search", clear: "clear" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  [ngClass]=\"bem.block(size)\"\n  [class.hasIcon]=\"!searchButton\"\n  [class.hasButton]=\"searchButton\"\n  [class.isClearable]=\"clearable\"\n  [class.isSearching]=\"searching\"\n  [class.isDisabled]=\"disabled\"\n>\n  <div\n    *ngIf=\"!searchButton\"\n    [class]=\"bem.element('icon')\"\n  >\n    <aui-icon icon=\"search_s\"></aui-icon>\n  </div>\n  <input\n    #input\n    aui-input\n    autocomplete=\"off\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"emitChange($event)\"\n    [disabled]=\"disabled\"\n    (keyup.enter)=\"emitSearch()\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    [size]=\"size\"\n  />\n  <div\n    *ngIf=\"showSpinner\"\n    [class]=\"bem.element('spinner')\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon>\n  </div>\n  <div\n    [hidden]=\"!showClear\"\n    [class]=\"bem.element('clear')\"\n    (click)=\"emitClear()\"\n  >\n    <aui-icon icon=\"close_small\"></aui-icon>\n  </div>\n  <div\n    *ngIf=\"searchButton\"\n    [class]=\"bem.element('button')\"\n    (click)=\"emitSearch()\"\n  >\n    <div [class]=\"bem.element('button-icon')\">\n      <aui-icon [icon]=\"searching ? 'spinner' : 'search_s'\"></aui-icon>\n    </div>\n  </div>\n</div>\n", 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-disabled-text));cursor:not-allowed}.aui-search--large{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-search--large aui-icon{font-size:var(--aui-icon-size-l)}.aui-search--large .aui-search__clear,.aui-search--large .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--large.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasIcon.isSearching .aui-search__input,.aui-search--large.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--large.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--large.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--medium{font-size:var(--aui-font-size-m);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) + 1px)}.aui-search--medium .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--medium .aui-search__button-icon{padding:0 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 + 1px)}.aui-search--medium.hasIcon.isSearching .aui-search__input,.aui-search--medium.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--medium.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--medium.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--small{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-search--small aui-icon{font-size:var(--aui-icon-size-m)}.aui-search--small .aui-search__clear,.aui-search--small .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--small.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasIcon.isSearching .aui-search__input,.aui-search--small.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--small.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--small.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--mini{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-search--mini aui-icon{font-size:var(--aui-icon-size-s)}.aui-search--mini .aui-search__clear,.aui-search--mini .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--mini.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasIcon.isSearching .aui-search__input,.aui-search--mini.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--mini.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--mini.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-placeholder-text))}.aui-search__button{position:absolute;top:0;right:1px;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:1px 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-help-text));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SearchComponent, selector: "aui-search", inputs: { size: "size", searchButton: "searchButton", clearable: "clearable", searching: "searching", placeholder: "placeholder", disabled: "disabled", keyword: "keyword" }, outputs: { keywordChange: "keywordChange", search: "search", clear: "clear" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  [ngClass]=\"bem.block(size)\"\n  [class.hasIcon]=\"!searchButton\"\n  [class.hasButton]=\"searchButton\"\n  [class.isClearable]=\"clearable\"\n  [class.isSearching]=\"searching\"\n  [class.isDisabled]=\"disabled\"\n>\n  <div\n    *ngIf=\"!searchButton\"\n    [class]=\"bem.element('icon')\"\n  >\n    <aui-icon icon=\"search_s\"></aui-icon>\n  </div>\n  <input\n    #input\n    aui-input\n    autocomplete=\"off\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"emitChange($event)\"\n    [disabled]=\"disabled\"\n    (keyup.enter)=\"emitSearch()\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    [size]=\"size\"\n  />\n  <div\n    *ngIf=\"showSpinner\"\n    [class]=\"bem.element('spinner')\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon>\n  </div>\n  <div\n    [hidden]=\"!showClear\"\n    [class]=\"bem.element('clear')\"\n    (click)=\"emitClear()\"\n  >\n    <aui-icon icon=\"close_small\"></aui-icon>\n  </div>\n  <div\n    *ngIf=\"searchButton\"\n    [class]=\"bem.element('button')\"\n    (click)=\"emitSearch()\"\n  >\n    <div [class]=\"bem.element('button-icon')\">\n      <aui-icon [icon]=\"searching ? 'spinner' : 'search_s'\"></aui-icon>\n    </div>\n  </div>\n</div>\n", 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-disabled-text));cursor:not-allowed}.aui-search--large{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-search--large aui-icon{font-size:var(--aui-icon-size-l)}.aui-search--large .aui-search__clear,.aui-search--large .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--large.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasIcon.isSearching .aui-search__input,.aui-search--large.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--large.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--large.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--medium{font-size:var(--aui-font-size-m);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) + 1px)}.aui-search--medium .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--medium .aui-search__button-icon{padding:0 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 + 1px)}.aui-search--medium.hasIcon.isSearching .aui-search__input,.aui-search--medium.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--medium.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--medium.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--small{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-search--small aui-icon{font-size:var(--aui-icon-size-m)}.aui-search--small .aui-search__clear,.aui-search--small .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--small.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasIcon.isSearching .aui-search__input,.aui-search--small.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--small.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--small.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--mini{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-search--mini aui-icon{font-size:var(--aui-icon-size-s)}.aui-search--mini .aui-search__clear,.aui-search--mini .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--mini.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasIcon.isSearching .aui-search__input,.aui-search--mini.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--mini.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--mini.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-placeholder-text))}.aui-search__button{position:absolute;top:0;right:1px;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:1px 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-help-text));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aui-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div\n  [ngClass]=\"bem.block(size)\"\n  [class.hasIcon]=\"!searchButton\"\n  [class.hasButton]=\"searchButton\"\n  [class.isClearable]=\"clearable\"\n  [class.isSearching]=\"searching\"\n  [class.isDisabled]=\"disabled\"\n>\n  <div\n    *ngIf=\"!searchButton\"\n    [class]=\"bem.element('icon')\"\n  >\n    <aui-icon icon=\"search_s\"></aui-icon>\n  </div>\n  <input\n    #input\n    aui-input\n    autocomplete=\"off\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"emitChange($event)\"\n    [disabled]=\"disabled\"\n    (keyup.enter)=\"emitSearch()\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    [size]=\"size\"\n  />\n  <div\n    *ngIf=\"showSpinner\"\n    [class]=\"bem.element('spinner')\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon>\n  </div>\n  <div\n    [hidden]=\"!showClear\"\n    [class]=\"bem.element('clear')\"\n    (click)=\"emitClear()\"\n  >\n    <aui-icon icon=\"close_small\"></aui-icon>\n  </div>\n  <div\n    *ngIf=\"searchButton\"\n    [class]=\"bem.element('button')\"\n    (click)=\"emitSearch()\"\n  >\n    <div [class]=\"bem.element('button-icon')\">\n      <aui-icon [icon]=\"searching ? 'spinner' : 'search_s'\"></aui-icon>\n    </div>\n  </div>\n</div>\n", 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-disabled-text));cursor:not-allowed}.aui-search--large{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-search--large aui-icon{font-size:var(--aui-icon-size-l)}.aui-search--large .aui-search__clear,.aui-search--large .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--large.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasIcon.isSearching .aui-search__input,.aui-search--large.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--large.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--large.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--medium{font-size:var(--aui-font-size-m);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) + 1px)}.aui-search--medium .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--medium .aui-search__button-icon{padding:0 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 + 1px)}.aui-search--medium.hasIcon.isSearching .aui-search__input,.aui-search--medium.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--medium.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--medium.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--small{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-search--small aui-icon{font-size:var(--aui-icon-size-m)}.aui-search--small .aui-search__clear,.aui-search--small .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--small.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasIcon.isSearching .aui-search__input,.aui-search--small.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--small.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--small.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--mini{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-search--mini aui-icon{font-size:var(--aui-icon-size-s)}.aui-search--mini .aui-search__clear,.aui-search--mini .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--mini.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasIcon.isSearching .aui-search__input,.aui-search--mini.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--mini.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--mini.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s)* 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-placeholder-text))}.aui-search__button{position:absolute;top:0;right:1px;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:1px 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-help-text));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}\n"] }]
+            args: [{ selector: 'aui-search', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div\n  [ngClass]=\"bem.block(size)\"\n  [class.hasIcon]=\"!searchButton\"\n  [class.hasButton]=\"searchButton\"\n  [class.isClearable]=\"clearable\"\n  [class.isSearching]=\"searching\"\n  [class.isDisabled]=\"disabled\"\n>\n  <div\n    *ngIf=\"!searchButton\"\n    [class]=\"bem.element('icon')\"\n  >\n    <aui-icon icon=\"search_s\"></aui-icon>\n  </div>\n  <input\n    #input\n    aui-input\n    autocomplete=\"off\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"emitChange($event)\"\n    [disabled]=\"disabled\"\n    (keyup.enter)=\"emitSearch()\"\n    [ngClass]=\"bem.element('input')\"\n    [placeholder]=\"placeholder\"\n    [size]=\"size\"\n  />\n  <div\n    *ngIf=\"showSpinner\"\n    [class]=\"bem.element('spinner')\"\n  >\n    <aui-icon icon=\"spinner\"></aui-icon>\n  </div>\n  <div\n    [hidden]=\"!showClear\"\n    [class]=\"bem.element('clear')\"\n    (click)=\"emitClear()\"\n  >\n    <aui-icon icon=\"close_small\"></aui-icon>\n  </div>\n  <div\n    *ngIf=\"searchButton\"\n    [class]=\"bem.element('button')\"\n    (click)=\"emitSearch()\"\n  >\n    <div [class]=\"bem.element('button-icon')\">\n      <aui-icon [icon]=\"searching ? 'spinner' : 'search_s'\"></aui-icon>\n    </div>\n  </div>\n</div>\n", 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-disabled-text));cursor:not-allowed}.aui-search--large{font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-search--large aui-icon{font-size:var(--aui-icon-size-l)}.aui-search--large .aui-search__clear,.aui-search--large .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--large .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--large.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasIcon.isSearching .aui-search__input,.aui-search--large.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--large.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--large.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-l) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--large.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-l) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--medium{font-size:var(--aui-font-size-m);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) + 1px)}.aui-search--medium .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--medium .aui-search__button-icon{padding:0 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 + 1px)}.aui-search--medium.hasIcon.isSearching .aui-search__input,.aui-search--medium.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--medium.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--medium.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--medium.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--small{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-search--small aui-icon{font-size:var(--aui-icon-size-m)}.aui-search--small .aui-search__clear,.aui-search--small .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--small .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--small.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasIcon.isSearching .aui-search__input,.aui-search--small.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--small.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--small.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-m) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--small.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-m) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search--mini{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-search--mini aui-icon{font-size:var(--aui-icon-size-s)}.aui-search--mini .aui-search__clear,.aui-search--mini .aui-search__spinner{right:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__icon{left:calc(var(--aui-inline-padding-xs) + 1px)}.aui-search--mini .aui-search__button-icon{padding:0 var(--aui-inline-padding-xs)}.aui-search--mini.hasIcon .aui-search__input{padding-left:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasIcon.isSearching .aui-search__input,.aui-search--mini.hasIcon.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 2 + 1px)}.aui-search--mini.hasButton .aui-search__input{padding-right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px)}.aui-search--mini.hasButton .aui-search__clear{right:calc(var(--aui-icon-size-s) + var(--aui-inline-padding-xs) * 3 + 1px * 2)}.aui-search--mini.hasButton.isClearable .aui-search__input{padding-right:calc(var(--aui-icon-size-s) * 2 + var(--aui-inline-padding-xs) * 4 + 3px)}.aui-search__icon{position:absolute;top:50%;transform:translateY(-50%);color:rgb(var(--aui-color-placeholder-text))}.aui-search__button{position:absolute;top:0;right:1px;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:1px 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-help-text));cursor:pointer;transition:all .3s ease}.aui-search__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], searchButton: [{
@@ -4855,12 +4916,13 @@ class TagsInputComponent extends CommonFormControl {
         this.bem = buildBem('aui-tags-input');
         this.placeholder = '';
         this.size = ComponentSize.Medium;
+        // TODO: implement this feature
         this.clearable = false;
         this.allowRepeat = false;
         this.allowEmpty = false;
         this.readonlyTags = [];
         this.maxRowCount = 0;
-        this.customRowHeight = 0;
+        this.customRowHeight = 0; // 0: use default style const value, > 1: for ```tagClassFn``` maybe affect lineHeight
         this.withMaxRowCount = createWithMaxRowCount(this);
         this.focused = false;
         this.model = [];
@@ -4930,6 +4992,7 @@ class TagsInputComponent extends CommonFormControl {
     onInput() {
         var _a, _b, _c;
         const value = this.inputRef.nativeElement.value;
+        // make sure value sync to span element
         requestAnimationFrame(() => {
             if (!value.length) {
                 this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
@@ -4991,11 +5054,13 @@ class TagsInputComponent extends CommonFormControl {
             return;
         }
         this.inputControl.setValue(this.inputRef.nativeElement.value);
+        // inputControl 自身的状态为同步计算
         this.syncControlStatus();
         if (this.inputControl.valid) {
             this.emitValue(this.model.concat(value));
         }
         else if (this.inputControl.pending) {
+            // PENDING 后只会变为 VALID 或 INVALID 的决议状态
             this.inputControl.statusChanges.pipe(take(1)).subscribe(_ => {
                 this.syncControlStatus();
                 if (this.inputControl.valid) {
@@ -5019,6 +5084,7 @@ class TagsInputComponent extends CommonFormControl {
             (_d = this.controlContainer) === null || _d === void 0 ? void 0 : _d.control.setErrors(Object.assign(Object.assign({}, (_f = (_e = this.controlContainer) === null || _e === void 0 ? void 0 : _e.control) === null || _f === void 0 ? void 0 : _f.errors), { [INPUT_ERROR_KEY]: errors }));
         }
         else if (disabled) {
+            // 与当前 input 校验脱离
             (_h = (_g = this.controlContainer) === null || _g === void 0 ? void 0 : _g.control) === null || _h === void 0 ? void 0 : _h.updateValueAndValidity();
         }
     }
@@ -5758,6 +5824,7 @@ class DialogService {
                     resolve(action.result);
                 }
                 else {
+                    // eslint-disable-next-line prefer-promise-reject-errors
                     reject(action.result);
                 }
             });
@@ -5881,6 +5948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 class DialogContentComponent extends CdkScrollable {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(elementRef, scrollDispatcher, ngZone, dir) {
         super(elementRef, scrollDispatcher, ngZone, dir);
         this.bem = buildBem('aui-dialog');
@@ -6001,6 +6069,10 @@ var DrawerSize;
 class DrawerRef {
 }
 
+/**
+ * @packageDocumentation
+ * @module page-guard
+ */
 class DrawerHeaderDirective {
 }
 DrawerHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6093,6 +6165,7 @@ class DrawerComponent extends DrawerRef {
                 this.open();
             }
             else if (!visible.firstChange) {
+                // 不希望默认关闭时，drawer 渲染后就触发 close 事件
                 this.dispose();
             }
         }
@@ -6115,6 +6188,8 @@ class DrawerComponent extends DrawerRef {
                 .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 &&
@@ -6764,6 +6839,11 @@ var MessageType;
     MessageType["Warning"] = "warning";
     MessageType["Info"] = "info";
 })(MessageType || (MessageType = {}));
+/**
+ * messageOptions: contains Basic configuration
+ * Just for some containers like Message-Container
+ * Detailed document： http://confluence.alaudatech.com/pages/viewpage.action?pageId=23383163
+ */
 class MessageConfig {
 }
 const MESSAGE_CONFIG = new InjectionToken('MESSAGE_CONFIG');
@@ -7049,6 +7129,10 @@ class NotificationComponent extends MessageComponent {
             });
         }
     }
+    /**
+     * Attach a TemplatePortal as content to this modal container.
+     * @param portal Portal to be attached as the modal content.
+     */
     attachTemplatePortal(portal) {
         return this.portalOutlet.attachTemplatePortal(portal);
     }
@@ -7142,9 +7226,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/**
+ * To modify the labels and text displayed, create a new instance of MatPaginatorIntl and
+ * include it in a custom provider
+ */
 class PaginatorIntl {
     constructor() {
+        /**
+         * Stream that emits whenever the labels here are changed. Use this to notify
+         * components if the labels have changed after initialization.
+         */
         this.changes = new Subject();
+        /** A label for the page size selector. */
         this.itemsPerPageLabel = 'perPage';
         this.jumperLabelPrefix = 'Goto';
         this.jumperLabelSuffix = '';
@@ -7156,10 +7249,12 @@ PaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PaginatorIntl, decorators: [{
             type: Injectable
         }] });
+// eslint-disable-next-line sonar/function-name
 function PAGINATOR_INTL_PROVIDER_FACTORY(parentIntl) {
     return parentIntl || new PaginatorIntl();
 }
 const PAGINATOR_INTL_PROVIDER = {
+    // If there is already an PaginatorIntl available, use that. Otherwise, provide a new one.
     provide: PaginatorIntl,
     deps: [[new Optional(), new SkipSelf(), PaginatorIntl]],
     useFactory: PAGINATOR_INTL_PROVIDER_FACTORY,
@@ -7398,6 +7493,7 @@ class BaseSelect extends CommonFormControl {
             this.customOptions.changes.pipe(startWith(this.customOptions)),
             this.contentOptions.changes.pipe(startWith(this.contentOptions)),
         ]).pipe(map(([customOptions, contentOptions]) => [...customOptions.toArray(), ...contentOptions.toArray()]), publishRef());
+        // support dynamic options loading on filtering
         this.allOptions$.pipe(takeUntil(this.destroy$$)).subscribe(() => {
             if (this.opened) {
                 requestAnimationFrame(() => {
@@ -7406,7 +7502,9 @@ class BaseSelect extends CommonFormControl {
             }
         });
         this.hasMatchedOption$ = combineLatest([
-            this.allOptions$.pipe(map(customOptions => customOptions.filter(option => option !== this.inputtingOption)), switchMap(options => options.length > 0
+            this.allOptions$.pipe(map(customOptions => customOptions.filter(option => option !== this.inputtingOption)), 
+            // eslint-disable-next-line sonarjs/no-identical-functions
+            switchMap(options => options.length > 0
                 ? combineLatest(options.map(option => option.value$))
                 : of([]))),
             this.filterString$,
@@ -7657,6 +7755,7 @@ class SelectComponent extends BaseSelect {
                     label: option.label ||
                         ((_a = this.labelFn) === null || _a === void 0 ? void 0 : _a.call(this, option.value)) ||
                         coerceString(this.trackFn(option.value)),
+                    // https://github.com/angular/angular/issues/24515
                     labelContext: Object.assign({}, option.labelContext),
                 }
                 : {
@@ -7716,6 +7815,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['inputRef', { static: true }]
             }] } });
 
+/**
+ * Change event object that is emitted when the user selects a
+ * different page size or navigates to another page.
+ * @deprecated use Output events directly instead
+ */
 class PageEvent {
 }
 class PaginatorComponent {
@@ -7739,6 +7843,9 @@ class PaginatorComponent {
     set pageIndex(val) {
         this.currentPage = val + 1;
     }
+    /**
+     * @deprecated use `total` instead
+     */
     get length() {
         return this.total;
     }
@@ -7841,7 +7948,7 @@ class MultiSelectComponent extends BaseSelect {
         this.model = [];
         this.values$ = this.model$;
         this.maxRowCount = 0;
-        this.customRowHeight = 0;
+        this.customRowHeight = 0; // 0: use default style const value, > 1: for ```tagClassFn``` maybe affect lineHeight
         this.inputValue = '';
         this.withMaxRowCount = createWithMaxRowCount(this);
         this.focused = false;
@@ -7912,6 +8019,7 @@ class MultiSelectComponent extends BaseSelect {
                     value,
                 };
         })
+            // sort disabled options as first
             .sort((a, b) => {
             if (a.disabled) {
                 return -1;
@@ -8059,6 +8167,7 @@ class MultiSelectComponent extends BaseSelect {
         this.setInputWidth();
         this.filterString = '';
     }
+    // calculate input element width according to its value
     setInputWidth() {
         const { value } = this.inputRef.nativeElement;
         if (!value.length) {
@@ -8154,6 +8263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+// @dynamic
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
 class AuiSelectValidators {
     static includes(options, trackFn = val => val) {
         return (control) => options.some(option => trackFn(option) === trackFn(control.value))
@@ -8209,7 +8320,9 @@ IncludesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IncludesDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'aui-select[ngModel][includes],aui-select[formControl][includes],aui-select[formControlName][includes]',
+                    selector: 
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    'aui-select[ngModel][includes],aui-select[formControl][includes],aui-select[formControlName][includes]',
                     providers: [
                         {
                             provide: NG_VALIDATORS,
@@ -8330,6 +8443,9 @@ class RadioGroupComponent extends CommonFormControl {
     set size(val) {
         this.size$$.next(val);
     }
+    /**
+     * @deprecated use `plain` instead
+     */
     set isPlain(val) {
         this.plain = val;
     }
@@ -8440,6 +8556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 class RadioComponent extends BaseRadio {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(radioGroup, focusMonitor, cdr) {
         super(radioGroup, focusMonitor, cdr);
         this.bem = buildBem('aui-radio');
@@ -8456,6 +8573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
         }], ctorParameters: function () { return [{ type: RadioGroupComponent }, { type: i2$1.FocusMonitor }, { type: i0.ChangeDetectorRef }]; } });
 
 class RadioButtonComponent extends BaseRadio {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(radioGroup, focusMonitor, cdr) {
         super(radioGroup, focusMonitor, cdr);
         this.bem = buildBem('aui-radio-button');
@@ -8529,10 +8647,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
 
 class TableComponent extends CdkTable {
+    // FIXME: workaround to override because it will break constructor if it is field, but why MatTable works?
+    // @ts-ignore
     get stickyCssClass() {
         return 'aui-table-sticky';
     }
     set stickyCssClass(_) {
+        // nothing
     }
     ngAfterContentInit() {
         this._createPlaceholder();
@@ -8597,6 +8718,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: [TablePlaceholderDefDirective, { static: true }]
             }] } });
 
+/**
+ * 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 {
 }
 TableCellDefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TableCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -8735,6 +8860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 const bem$1 = buildBem('aui-table');
+/** Cell template container that adds the right classes and role. */
 class TableCellDirective extends CdkCell {
     constructor(columnDef, elementRef) {
         super(columnDef, elementRef);
@@ -8747,6 +8873,7 @@ TableCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", ver
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TableCellDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'aui-table-cell',
                     host: {
                         class: 'aui-table__cell',
@@ -8758,7 +8885,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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;
     }
@@ -8786,6 +8919,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TableHeaderCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -8809,6 +8946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
         }] });
 
 const bem = buildBem('aui-table');
+/** Header cell template container that adds the right classes and role. */
 class TableHeaderCellDirective extends CdkHeaderCell {
     constructor(columnDef, elementRef) {
         super(columnDef, elementRef);
@@ -8820,6 +8958,7 @@ TableHeaderCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TableHeaderCellDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'aui-table-header-cell',
                     host: {
                         class: 'aui-table__header-cell',
@@ -8828,6 +8967,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.CdkColumnDef }, { type: i0.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 {
     constructor() {
         super(...arguments);
@@ -8860,6 +9003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['auiTableHeaderRowDefSticky']
             }] } });
 
+/** Header template container that contains the cell outlet. Adds the right class and role. */
 class TableHeaderRowComponent extends CdkHeaderRow {
 }
 TableHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TableHeaderRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -8880,6 +9024,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/**
+ * 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 {
     constructor() {
         super(...arguments);
@@ -8914,6 +9063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 
+/** Data row template container that contains the cell outlet. Adds the right class and role. */
 class TableRowComponent extends CdkRow {
     constructor(elRef) {
         super();
@@ -9018,6 +9168,7 @@ class TableScrollShadowDirective {
         const scrollTop = this.containerEl.scrollTop;
         this.placeClassList(this.containerEl.classList, scrollTop > 0, HAS_TABLE_TOP_SHADOW);
         this.placeClassList(this.containerEl.classList, scrollTop < scrollDis, HAS_TABLE_BOTTOM_SHADOW);
+        // 兼容屏幕缩放是 sticky多列的样式问题
         this.table.updateStickyColumnStyles();
     }
     mutateHorizontalScroll() {
@@ -9174,8 +9325,10 @@ class FixedSizeTableVirtualScrollStrategy {
         this._updateContent();
     }
     onContentRendered() {
+        // no-op
     }
     onRenderedOffsetChanged() {
+        // no-op
     }
     scrollToIndex(index, behavior) {
         if (!this.viewport || !this._rowHeight) {
@@ -9263,6 +9416,7 @@ class FixedSizeTableVirtualScrollDirective {
     }
     isStickyEnabled() {
         return (!!this.scrollStrategy.viewport &&
+            // @ts-expect-error
             this.table._headerRowDefs
                 .map(def => def.sticky)
                 .reduce((prev, curr) => prev && curr, true));
@@ -9302,6 +9456,7 @@ FixedSizeTableVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: FixedSizeTableVirtualScrollDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'aui-virtual-scroll-viewport[fixedSize]',
                     exportAs: 'viewPort',
                     providers: [
@@ -9338,6 +9493,7 @@ FixedSizeVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: FixedSizeVirtualScrollDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'aui-virtual-scroll-viewport[itemSize]',
                     providers: [
                         {
@@ -9427,19 +9583,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/** @docs-private */
 function getSortDuplicateSortableIdError(id) {
     return new Error(`Cannot have two MatSortables with the same id (${id}).`);
 }
+/** @docs-private */
 function getSortHeaderNotContainedWithinSortError() {
     return new Error(`MatSortHeader must be placed within a parent element with the MatSort directive.`);
 }
+/** @docs-private */
 function getSortHeaderMissingIdError() {
     return new Error(`MatSortHeader must be provided with a unique id.`);
 }
+/** @docs-private */
 function getSortInvalidDirectionError(direction) {
     return new Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);
 }
 
+// Original code from material2
 class SortDirective {
     constructor() {
         this.sortables = new Map();
@@ -9659,6 +9820,9 @@ const StepSelectedIcon = {
 class StepsComponent {
     constructor() {
         this._steps = [];
+        /**
+         * @deprecated type 为 step 时一般在使用上下文中控制是否可以进行下一步；type 为 progress 时强制按顺序执行
+         */
         this.linear = false;
         this.orientation = 'horizontal';
         this.type = 'step';
@@ -9771,6 +9935,7 @@ class StepsComponent {
                 (currentStep.state !== StepState.Done && i > this._currentIndex))) {
             return false;
         }
+        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
         if (i < this._currentIndex && !this.selectable) {
             return false;
         }
@@ -10084,6 +10249,7 @@ class TabBodyComponent {
     constructor() {
         this.content$ = new BehaviorSubject(null);
     }
+    /** The tab body content to display. */
     get content() {
         return this._content;
     }
@@ -10108,7 +10274,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], content: [{
                 type: Input
             }] } });
+/** Used to flag tab labels for use with the portal directive */
 class TabLabelDirective extends CdkPortal {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
@@ -10121,6 +10289,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     selector: '[auiTabLabel]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+/**
+ * Lazy load the embedded template for a tab content.
+ */
 class TabContentDirective {
     constructor(template) {
         this.template = template;
@@ -10134,7 +10305,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     selector: '[auiTabContent]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+/** Used to project additional template from host to the tab header. */
 class TabHeaderAddonDirective extends CdkPortal {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
@@ -10147,10 +10320,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     selector: '[auiTabHeaderAddon]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+/**
+ * Used in the `aui-tab-group` view to display tab labels.
+ */
 class TabLabelWrapperDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
+    /** Whether or not the tab is disabled  */
     get disabled() {
         return this._disabled;
     }
@@ -10163,6 +10340,7 @@ class TabLabelWrapperDirective {
     getOffsetWidth() {
         return this.elementRef.nativeElement.offsetWidth;
     }
+    /** Sets focus on the wrapper element */
     focus() {
         this.elementRef.nativeElement.focus();
     }
@@ -10182,6 +10360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 class TabTitleDirective extends CdkPortal {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
@@ -10194,12 +10373,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     selector: '[auiTabTitle]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+/**
+ * The portal host directive for the contents of the tab.
+ */
 class TabBodyPortalDirective extends CdkPortalOutlet {
     constructor(componentFactoryResolver, viewContainerRef, _host) {
         super(componentFactoryResolver, viewContainerRef);
         this._host = _host;
         this._hostSubscription = Subscription.EMPTY;
     }
+    /** Set initial visibility or set up subscription for changing visibility. */
     ngOnInit() {
         super.ngOnInit();
         this._hostSubscription = this._host.content$.subscribe(content => {
@@ -10230,6 +10413,9 @@ class TabContextService {
             ? combineLatest([_parent.active$, this.active$$]).pipe(map(([a, b]) => a && b))
             : this.active$$).pipe(distinctUntilChanged());
     }
+    /**
+     * Whether the tab is currently active.
+     */
     get isActive() {
         return this.active$$.value;
     }
@@ -10249,19 +10435,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     }] }];
     } });
 
+/* eslint-disable no-prototype-builtins */
 class TabComponent {
     constructor(_viewContainerRef, tabContext) {
         this._viewContainerRef = _viewContainerRef;
         this.tabContext = tabContext;
+        /** Plain text label for the tab, used when there is no template label. */
         this.textLabel = '';
+        /** Whether or not to show the close button in the header */
         this.closeable = false;
         this.close = new EventEmitter();
+        /**
+         * The relatively indexed position where 0 represents the center, negative is left, and positive
+         * represents the right.
+         */
         this.position = null;
+        /**
+         * The initial relatively index origin of the tab if it was created and selected after there
+         * was already a selected tab. Provides context of what position the tab should originate from.
+         */
         this.origin = null;
+        /** Emits whenever the internal state of the tab changes. */
         this._stateChanges = new Subject();
+        /** Portal that will be the hosted content of the tab */
         this._contentPortal = null;
         this._disabled = false;
     }
+    /** Whether or not the tab is disabled  */
     get disabled() {
         return this._disabled;
     }
@@ -10313,8 +10513,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }] } });
 
 const TabSize = {
+    /** 卡片级尺寸 */
     Large: 'large',
+    /** 页面级尺寸 */
     Medium: 'medium',
+    /** 小尺寸 */
     Small: 'small',
 };
 const TabType = {
@@ -10329,6 +10532,11 @@ class TabHeaderActiveIndicatorComponent {
         this.type = TabType.Line;
         this.bem = buildBem('aui-tab-header-active-indicator');
     }
+    /**
+     * Calculates the styles from the provided element in order to align the indicator to that element.
+     * Shows the indicator if previously set as hidden.
+     * @param element
+     */
     alignToElement(element) {
         if (typeof requestAnimationFrame !== 'undefined') {
             this._ngZone.runOutsideAngular(() => {
@@ -10339,6 +10547,10 @@ class TabHeaderActiveIndicatorComponent {
             this._setStyles(element);
         }
     }
+    /**
+     * Sets the proper styles to the element.
+     * @param element
+     */
     _setStyles(element) {
         const positions = this._getElementPosition(element);
         const nativeEl = this._elementRef.nativeElement;
@@ -10361,6 +10573,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 
+/**
+ * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
+ * provide a small affordance to the label next to it.
+ */
 const EXAGGERATED_OVERSCROLL = 60;
 class TabHeaderComponent {
     constructor(_changeDetectorRef, _viewportRuler) {
@@ -10368,18 +10584,27 @@ class TabHeaderComponent {
         this._viewportRuler = _viewportRuler;
         this.bem = buildBem('aui-tab-header');
         this._showAddon = false;
+        /** Whether the controls for pagination should be displayed */
         this._showPaginationControls = false;
+        /** Whether the tab list can be scrolled more towards the end of the tab label list. */
         this._disableScrollAfter = true;
+        /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
         this._disableScrollBefore = true;
+        /** Whether the header should scroll to the selected index after the view has been checked. */
         this._selectedIndexChanged = false;
+        /** The distance in pixels that the tab labels should be translated to the left. */
         this._scrollDistance = 0;
         this._selectedIndex = 0;
+        /** Emits when the component is destroyed. */
         this._destroyed = new Subject();
         this.type = TabType.Line;
         this.size = TabSize.Medium;
+        /** Event emitted when the option is selected. */
         this.selectFocusedIndex = new EventEmitter();
+        /** Event emitted when a label is focused. */
         this.indexFocused = new EventEmitter();
     }
+    /** The index of the active tab. */
     get selectedIndex() {
         return this._selectedIndex;
     }
@@ -10396,11 +10621,14 @@ class TabHeaderComponent {
         this._destroyed.complete();
     }
     ngAfterContentChecked() {
+        // If the number of tab labels have changed, check if scrolling should be enabled
         if (this._tabLabelCount !== this._labelWrappers.length) {
             this._updatePagination();
             this._tabLabelCount = this._labelWrappers.length;
             this._changeDetectorRef.markForCheck();
         }
+        // If the selected index has changed, scroll to the label and check if the scrolling controls
+        // should be disabled.
         if (this._selectedIndexChanged) {
             this._scrollToLabel(this._selectedIndex);
             this._checkScrollingControls();
@@ -10408,6 +10636,8 @@ class TabHeaderComponent {
             this._selectedIndexChanged = false;
             this._changeDetectorRef.markForCheck();
         }
+        // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
+        // then translate the header to reflect this.
         if (this._scrollDistanceChanged) {
             this._updateTabScrollPosition();
             this._scrollDistanceChanged = false;
@@ -10419,6 +10649,9 @@ class TabHeaderComponent {
             this._changeDetectorRef.markForCheck();
         }
     }
+    /**
+     * Aligns the ink bar to the selected tab on load.
+     */
     ngAfterContentInit() {
         const resize = this._viewportRuler.change(150);
         const realign = () => {
@@ -10429,12 +10662,19 @@ class TabHeaderComponent {
             .withHorizontalOrientation('ltr')
             .withWrap();
         this._keyManager.updateActiveItem(0);
+        // Defer the first call in order to allow for slower browsers to lay out the elements.
+        // This helps in cases where the user lands directly on a page with paginated tabs.
         typeof requestAnimationFrame !== 'undefined'
             ? requestAnimationFrame(realign)
             : realign();
+        // On window resize, realign the ink bar and update the orientation of
+        // the key manager if the direction has changed.
         resize.pipe(takeUntil(this._destroyed)).subscribe(() => {
             realign();
         });
+        // If there is a change in the focus key manager we need to emit the `indexFocused`
+        // event in order to provide a public event that notifies about focus changes. Also we realign
+        // the tabs container by scrolling the new focused tab into the visible section.
         this._keyManager.change
             .pipe(takeUntil(this._destroyed))
             .subscribe(newFocusIndex => {
@@ -10442,17 +10682,22 @@ class TabHeaderComponent {
             this._setTabFocus(newFocusIndex);
         });
     }
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
     get scrollDistance() {
         return this._scrollDistance;
     }
     set scrollDistance(v) {
         this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
+        // Mark that the scroll distance has changed so that after the view is checked, the CSS
+        // transformation can move the header.
         this._scrollDistanceChanged = true;
         this._checkScrollingControls();
     }
+    /** Tracks which element has focus; used for keyboard navigation */
     get focusIndex() {
         return this._keyManager ? this._keyManager.activeItemIndex : 0;
     }
+    /** When the focus index is set, we must manually send focus to the correct label */
     set focusIndex(value) {
         if (!this._isValidIndex(value) ||
             this.focusIndex === value ||
@@ -10461,6 +10706,10 @@ class TabHeaderComponent {
         }
         this._keyManager.setActiveItem(value);
     }
+    /**
+     * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
+     * providing a valid index and return true.
+     */
     _isValidIndex(index) {
         if (!this._labelWrappers) {
             return true;
@@ -10489,6 +10738,10 @@ class TabHeaderComponent {
                 this._keyManager.onKeydown(event);
         }
     }
+    /**
+     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
+     * scrolling is enabled.
+     */
     _setTabFocus(tabIndex) {
         var _a;
         if (this._showPaginationControls) {
@@ -10496,10 +10749,19 @@ class TabHeaderComponent {
         }
         if (((_a = this._labelWrappers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this._labelWrappers.toArray()[tabIndex].focus();
+            // Do not let the browser manage scrolling to focus the element, this will be handled
+            // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
+            // should be the full width minus the offset width.
             const containerEl = this._tabListContainer.nativeElement;
             containerEl.scrollLeft = 0;
         }
     }
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _scrollToLabel(labelIndex) {
         const selectedLabel = this._labelWrappers
             ? this._labelWrappers.toArray()[labelIndex]
@@ -10507,37 +10769,63 @@ class TabHeaderComponent {
         if (!selectedLabel) {
             return;
         }
+        // The view length is the visible width of the tab labels.
         const viewLength = this._tabListContainer.nativeElement.offsetWidth;
         const labelBeforePos = selectedLabel.getOffsetLeft();
         const labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
         const beforeVisiblePos = this.scrollDistance;
         const afterVisiblePos = this.scrollDistance + viewLength;
         if (labelBeforePos < beforeVisiblePos) {
+            // Scroll header to move label to the before direction
             this.scrollDistance -=
                 beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
         }
         else if (labelAfterPos > afterVisiblePos) {
+            // Scroll header to move label to the after direction
             this.scrollDistance +=
                 labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
         }
     }
+    /**
+     * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
+     * the end of the list, respectively). The distance to scroll is computed to be a third of the
+     * length of the tab list view window.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _scrollHeader(scrollDir) {
         const viewLength = this._tabListContainer.nativeElement.offsetWidth;
+        // Move the scroll distance one-third the length of the tab list's viewport.
         this.scrollDistance += ((scrollDir === 'before' ? -1 : 1) * viewLength) / 3;
     }
+    /**
+     * Callback for when the MutationObserver detects that the content has changed.
+     */
     _onContentChanges() {
         this._updatePagination();
         this._alignActiveIndicatorToSelectedTab();
         this._changeDetectorRef.markForCheck();
     }
+    /**
+     * Updating the view whether pagination should be enabled or not
+     */
     _updatePagination() {
         this._checkPaginationEnabled();
         this._checkScrollingControls();
         this._updateTabScrollPosition();
     }
+    /**
+     * Evaluate whether the pagination controls should be displayed. If the scroll width of the
+     * tab list is wider than the size of the header container, then the pagination controls should
+     * be shown.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _checkPaginationEnabled() {
         const isEnabled = this._tabList.nativeElement.scrollWidth >
-            this._paginationWrapper.nativeElement.offsetWidth + 2;
+            this._paginationWrapper.nativeElement.offsetWidth + 2; // 2 is the border size
         if (!isEnabled) {
             this.scrollDistance = 0;
         }
@@ -10547,22 +10835,45 @@ class TabHeaderComponent {
             this._changeDetectorRef.markForCheck();
         }
     }
+    /**
+     * Evaluate whether the before and after controls should be enabled or disabled.
+     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
+     * before button. If the header is at the end of the list (scroll distance is equal to the
+     * maximum distance we can scroll), then disable the after button.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _checkScrollingControls() {
+        // Check if the pagination arrows should be activated.
         this._disableScrollBefore = this.scrollDistance === 0;
         this._disableScrollAfter =
             this.scrollDistance === this._getMaxScrollDistance();
         this._changeDetectorRef.markForCheck();
     }
+    /**
+     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
+     * is equal to the difference in width between the tab list container and tab header container.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
     _getMaxScrollDistance() {
         const lengthOfTabList = this._tabList.nativeElement.scrollWidth;
         const viewLength = this._tabListContainer.nativeElement.offsetWidth;
         return lengthOfTabList - viewLength || 0;
     }
+    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
     _updateTabScrollPosition() {
         const scrollDistance = this.scrollDistance;
         const translateX = -scrollDistance;
+        // Don't use `translate3d` here because we don't want to create a new layer. A new layer
+        // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar
+        // and ripples will exceed the boundaries of the visible tab bar.
+        // See: https://github.com/angular/material2/issues/10276
         this._tabList.nativeElement.style.transform = `translateX(${translateX}px)`;
     }
+    /** Tells the active indicator to align itself to the current label wrapper */
     _alignActiveIndicatorToSelectedTab() {
         var _a;
         const selectedLabelWrapper = ((_a = this._labelWrappers) === null || _a === void 0 ? void 0 : _a.length) > 0
@@ -10593,7 +10904,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], _title: [{
                 type: ContentChild,
                 args: [TabTitleDirective, { static: false }]
-            }], _labelWrappers: [{
+            }],
+        /**
+         * workaround for @link https://github.com/microsoft/TypeScript/pull/42425
+         */
+        _labelWrappers: [{
                 type: ContentChildren,
                 args: [TabLabelWrapperDirective]
             }], _tabListContainer: [{
@@ -10610,27 +10925,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: [TabHeaderActiveIndicatorComponent, { static: true }]
             }] } });
 
+/* eslint-disable no-prototype-builtins */
+/** A simple change event emitted on focus or selection changes. */
 class TabChangeEvent {
 }
 class TabGroupComponent {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
         this.bem = buildBem('aui-tab-group');
+        /** The tab index that should be selected after the content has been checked. */
         this._indexToSelect = 0;
+        /** Subscription to tabs being added/removed. */
         this._tabsSubscription = Subscription.EMPTY;
+        /** Subscription to changes in the tab labels. */
         this._tabLabelSubscription = Subscription.EMPTY;
         this._selectedIndex = null;
         this._tab = null;
         this._type = TabType.Line;
         this._size = TabSize.Medium;
+        /** Emits whenever the type changes */
         this._typeChange = new Subject();
+        /** Emits whenever the size changes */
         this._sizeChange = new Subject();
+        /** Output to enable support for two-way binding on `[(selectedIndex)]` */
         this.selectedIndexChange = new EventEmitter();
         this.tabChange = new EventEmitter();
+        /** Event emitted when the tab selection has changed. */
         this.selectedTabChange = new EventEmitter(true);
+        /** Event emitted when focus has changed within a tab group. */
         this.focusChange = new EventEmitter();
         this.activatedTabs = [];
     }
+    /** The index of the active tab. */
     get selectedIndex() {
         return this._selectedIndex;
     }
@@ -10690,20 +11016,34 @@ class TabGroupComponent {
             this._sizeChange.next();
         }
     }
+    /**
+     * After the content is checked, this component knows what tabs have been defined
+     * and what the selected index should be. This is where we can know exactly what position
+     * each tab should be in according to the new selected index.
+     */
     ngAfterContentChecked() {
+        // Don't clamp the `indexToSelect` immediately in the setter because it can happen that
+        // the amount of tabs changes before the actual change detection runs.
         const indexToSelect = (this._indexToSelect = this._clampTabIndex(this._indexToSelect));
+        // If there is a change in selected index, emit a change event. Should not trigger if
+        // the selected index has not yet been initialized.
         if (this._selectedIndex !== indexToSelect && this._selectedIndex != null) {
             this._changeActivatedTabs();
             const tabChangeEvent = this._createChangeEvent(indexToSelect);
             this.selectedTabChange.emit(tabChangeEvent);
+            // Emitting this value after change detection has run
+            // since the checked content may contain this variable'
             Promise.resolve().then(() => {
                 this.selectedIndexChange.emit(indexToSelect);
                 this.tabChange.emit(this._tabs.get(indexToSelect).name);
             });
         }
+        // Setup the position for each tab and optionally setup an origin on the next selected tab.
         this._tabs.forEach((tab, index) => {
             tab.position = index - indexToSelect;
             tab.tabContext.isActive = index === indexToSelect;
+            // If there is already a selected tab, then set up an origin for the next selected tab
+            // if it doesn't have one already.
             if (this._selectedIndex != null && tab.position === 0 && !tab.origin) {
                 tab.origin = indexToSelect - this._selectedIndex;
             }
@@ -10723,15 +11063,22 @@ class TabGroupComponent {
         }
         this._changeActivatedTabs();
         this._subscribeToTabLabels();
+        // Subscribe to changes in the amount of tabs, in order to be
+        // able to re-render the content as new tabs are added or removed.
         this._tabsSubscription = this._tabs.changes.subscribe(() => {
             const tabs = this._tabs.toArray();
             if (this._lazy) {
                 this.activatedTabs = this.activatedTabs.filter(tab => tabs.includes(tab));
             }
             const indexToSelect = this._clampTabIndex(this._indexToSelect);
+            // Maintain the previously-selected tab if a new tab is added or removed and there is no
+            // explicit change that selects a different tab.
             if (indexToSelect === this._selectedIndex) {
                 for (const [i, tab] of tabs.entries()) {
                     if (tab.tabContext.isActive) {
+                        // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed
+                        // event, otherwise the consumer may end up in an infinite loop in some edge cases like
+                        // adding a tab within the `selectedIndexChange` event.
                         this._indexToSelect = this._selectedIndex = i;
                         break;
                     }
@@ -10748,6 +11095,7 @@ class TabGroupComponent {
         this._typeChange.complete();
         this._sizeChange.complete();
     }
+    /** Handle click events, setting new selected index if appropriate. */
     _handleClick(tab, idx) {
         if (!tab.disabled) {
             this.selectedIndex = this._tabHeader.focusIndex = idx;
@@ -10756,6 +11104,7 @@ class TabGroupComponent {
     _focusChanged(index) {
         this.focusChange.emit(this._createChangeEvent(index));
     }
+    /** Re-aligns the ink bar to the selected tab element. */
     realignActiveIndicator() {
         if (this._tabHeader) {
             this._tabHeader._alignActiveIndicatorToSelectedTab();
@@ -10773,7 +11122,11 @@ class TabGroupComponent {
             this.activatedTabs.push(tab);
         }
     }
+    /** Clamps the given index to the bounds of 0 and the tabs length. */
     _clampTabIndex(index) {
+        // Note the `|| 0`, which ensures that values like NaN can't get through
+        // and which would otherwise throw the component into an infinite loop
+        // (since Math.max(NaN, 0) === NaN).
         return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
     }
     _findIndexByTab(name) {
@@ -10788,6 +11141,12 @@ class TabGroupComponent {
         }
         return event;
     }
+    /**
+     * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
+     * on the Tab component, whereas the data binding is inside the TabGroup. In order for the
+     * binding to be updated, we need to subscribe to changes in it and trigger change detection
+     * manually.
+     */
     _subscribeToTabLabels() {
         if (this._tabLabelSubscription) {
             this._tabLabelSubscription.unsubscribe();
@@ -10797,6 +11156,7 @@ class TabGroupComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
+    /** Retrieves the tabindex for the tab. */
     _getTabIndex(tab, idx) {
         if (tab.disabled) {
             return null;
@@ -10951,6 +11311,7 @@ class TreeSelectComponent extends CommonFormControl {
         this.filterString$ = this.filterString$$.asObservable();
         this.displayText = '';
         this.flattedNodes = [];
+        // `this` is not available in `trackBy`...
         this.trackByLabel = (_, node) => this.getLabelFromNode(node);
     }
     get nodesData() {
@@ -11287,5 +11648,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+/**
+ * Generated bundle index. Do not edit.
+ */
+
 export { AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, AutosizeDirective, 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, CssVarPipe, CustomAutoCompleteDirective, DATA, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerComponent, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogComponent, 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, InputAddonAfterDirective, InputAddonBeforeDirective, InputComponent, InputGroupComponent, InputModule, InputPrefixDirective, InputSuffixDirective, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuContentDirective, MenuGroupComponent, MenuGroupTitleDirective, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PAGINATOR_INTL_PROVIDER, PAGINATOR_INTL_PROVIDER_FACTORY, PageEvent, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, RgbColorPipe, RgbaColorPipe, 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, TableExpandButtonCellComponent, TableExpandPanelCellComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TablePlaceholderDefDirective, TablePlaceholderOutletDirective, TableRowComponent, TableRowDefDirective, TableScrollShadowDirective, TableScrollWrapperDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeModule, ThemePickerPipe, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyDirective, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualForOfDirective, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _isNumberValue, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceNumber, coerceString, cssVar, en, getAnchorTreeItems, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isString, isTemplateRef, isTimePickerModel, isUndefined, last, observeMutationOn, observeResizeOn, publishRef, rgbColor, rgbaColor, scrollIntoView, sleep, watchContentExist, zh };
 //# sourceMappingURL=alauda-ui.mjs.map