@alauda/ui 6.5.8-beta → 6.5.8-beta.1

package/fesm2015/alauda-ui.mjs

@@ -5,7 +5,7 @@ import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
-import { Observable, ReplaySubject, share, startWith, map, distinctUntilChanged, Subject, takeUntil, filter, take, merge, fromEvent, combineLatest, debounceTime, switchMap, of, EMPTY, tap, BehaviorSubject, withLatestFrom, first, throttleTime, pluck, firstValueFrom, NEVER, observeOn, animationFrameScheduler, repeat, takeWhile, endWith, Subscription } from 'rxjs';
+import { Observable, ReplaySubject, share, startWith, map, distinctUntilChanged, Subject, takeUntil, filter, take, merge, fromEvent, combineLatest, debounceTime, switchMap, of, EMPTY, tap, BehaviorSubject, withLatestFrom, first, delay, throttleTime, pluck, firstValueFrom, NEVER, observeOn, animationFrameScheduler, repeat, takeWhile, endWith, Subscription } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { trigger, state, style, transition, animate, query } from '@angular/animations';
@@ -1288,6 +1288,8 @@ class TooltipComponent {
         this.destroy$ = new Subject();
         this.animating$$ = new BehaviorSubject(false);
         this.hide$ = new Subject();
+        this.beforeHide$ = new Subject();
+        this.beforeShow$ = new Subject();
     }
     ngOnDestroy() {
         this.destroy$.next(null);
@@ -1328,10 +1330,12 @@ class TooltipComponent {
         }
     }
     show() {
+        this.beforeShow$.next(null);
         this.showHide = 'show';
         this.cdr.markForCheck();
     }
     hide() {
+        this.beforeHide$.next(null);
         this.showHide = 'hide';
         this.cdr.markForCheck();
     }
@@ -1347,9 +1351,9 @@ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 opacity: 0,
                 transform: 'scale(0)',
             })),
-            transition('* => show', [animate('240ms cubic-bezier(0, 0, 0.2, 1)')]),
+            transition('* => show', [animate('160ms cubic-bezier(0, 0, 0.2, 1)')]),
             transition('* => hide', [
-                animate('240ms cubic-bezier(0.38, 0, 0.24, 1)'),
+                animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
             ]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1365,9 +1369,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                                 opacity: 0,
                                 transform: 'scale(0)',
                             })),
-                            transition('* => show', [animate('240ms cubic-bezier(0, 0, 0.2, 1)')]),
+                            transition('* => show', [animate('160ms cubic-bezier(0, 0, 0.2, 1)')]),
                             transition('* => hide', [
-                                animate('240ms cubic-bezier(0.38, 0, 0.24, 1)'),
+                                animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
                             ]),
                         ]),
                     ], template: "<div\n  *ngIf=\"inputContent$ | async\"\n  [class]=\"class$ | async\"\n  (mouseenter)=\"hover$.next(true)\"\n  (mouseleave)=\"hover$.next(false)\"\n  [@.disabled]=\"disableAnimation\"\n  [@showHide]=\"showHide\"\n  (@showHide.start)=\"onAnimation($event)\"\n  (@showHide.done)=\"onAnimation($event)\"\n>\n  {{ text$ | async }}\n  <ng-container\n    *ngIf=\"template$ | async\"\n    [ngTemplateOutlet]=\"template$ | async\"\n    [ngTemplateOutletContext]=\"context$ | async\"\n  ></ng-container>\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.aui-tooltip{position:relative;padding:var(--aui-spacing-xl);border-radius:var(--aui-border-radius-m);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal);max-width:400px;word-wrap:break-word}:root .aui-tooltip{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-tooltip{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tooltip{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-tooltip{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-tooltip--default{padding:var(--aui-spacing-m) var(--aui-spacing-xl)}:root .aui-tooltip--default{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-1))}html[aui-theme-mode=light] .aui-tooltip--default{color:rgb(var(--aui-color-n-10));background-color:rgb(var(--aui-color-n-1))}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tooltip--default{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}}html[aui-theme-mode=dark] .aui-tooltip--default{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--info{color:rgb(var(--aui-color-n-1));background-color:rgb(var(--aui-color-popper-bg))}.aui-tooltip--top,.aui-tooltip--bottom{margin:var(--aui-spacing-s) 0}.aui-tooltip--start,.aui-tooltip--end{margin:0 var(--aui-spacing-s)}\n"] }]
@@ -1443,8 +1447,7 @@ class BaseTooltip {
         this.ngZone = ngZone;
         this.hideOnClick = false;
         this.disableAnimation = true;
-        this.showed = new EventEmitter();
-        this.hided = new EventEmitter();
+        this.visibleChange = new EventEmitter();
         this.componentClass = TooltipComponent;
         this.hostHovered = false;
         this.tooltipHovered = false;
@@ -1520,6 +1523,56 @@ class BaseTooltip {
     get isCreated() {
         return !!this.overlayRef;
     }
+    _updateTransformOrigin() {
+        // @ts-ignore
+        const positionStrategy = this.overlayRef._positionStrategy;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        const hasExactPosition = positionStrategy._hasExactPosition(); // 是不是应用了精确定位
+        if (!hasExactPosition) {
+            return;
+        }
+        // 如果是精确定位，也就是预设位置空间不足以承载弹出元素，被重新指定新的弹出位置
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        const paneRect = positionStrategy._pane.getBoundingClientRect(); // 弹出pane元素Rect
+        const triggerElReact = this.elRef.nativeElement.getBoundingClientRect(); // 触发点Rect
+        // @ts-ignore
+        const position = positionStrategy._lastPosition; // 当前策略位置（调整后的最佳的）
+        let xOrigin;
+        const yOrigin = position.overlayY;
+        if (position.overlayX === 'center') {
+            xOrigin = 'center';
+        }
+        else {
+            xOrigin = position.overlayX === 'start' ? 'left' : 'right';
+        }
+        const origins = [xOrigin, yOrigin];
+        if (xOrigin === 'center' ||
+            (xOrigin === 'left' &&
+                ![triggerElReact.right, triggerElReact.left].includes(paneRect.left)) ||
+            (xOrigin === 'right' &&
+                ![triggerElReact.right, triggerElReact.left].includes(paneRect.right))) {
+            const originLeft = triggerElReact.left - paneRect.left + triggerElReact.width / 2;
+            origins[0] = Math.min(originLeft, paneRect.width) + 'px';
+        }
+        if (yOrigin === 'center' ||
+            (yOrigin === 'top' &&
+                ![triggerElReact.bottom, triggerElReact.top].includes(paneRect.top)) || // 位置没有被完全被颠倒的
+            (yOrigin === 'bottom' &&
+                ![triggerElReact.bottom, triggerElReact.top].includes(paneRect.bottom)) // 位置没有被完全被颠倒的
+        ) {
+            const originTop = triggerElReact.top - paneRect.top + triggerElReact.height / 2;
+            origins[1] = Math.min(originTop, paneRect.height) + 'px';
+        }
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        const aniEls = positionStrategy._boundingBox.querySelectorAll(
+        // @ts-ignore
+        positionStrategy._transformOriginSelector);
+        [...aniEls].forEach(el => {
+            el.style.transformOrigin = origins.join(' ');
+        });
+    }
     _createTooltip() {
         var _a;
         if (this.disabled || this.isCreated) {
@@ -1540,6 +1593,9 @@ class BaseTooltip {
         this.componentIns.hide$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this._disposeTooltip();
         });
+        merge(this.componentIns.beforeHide$, this.componentIns.beforeShow$.pipe(delay(0)))
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(this._updateTransformOrigin.bind(this));
         if (this.trigger === TooltipTrigger.Hover) {
             this.componentIns.hover$
                 .pipe(takeUntil(this.componentIns.destroy$))
@@ -1553,7 +1609,7 @@ class BaseTooltip {
         }
         (_a = this.componentIns) === null || _a === void 0 ? void 0 : _a.show();
         this.cdr.markForCheck();
-        this.showed.emit();
+        this.visibleChange.emit(true);
     }
     _disposeTooltip() {
         var _a;
@@ -1567,7 +1623,7 @@ class BaseTooltip {
                     this.unlistenBody();
                     this.unlistenBody = null;
                 }
-                this.hided.emit();
+                this.visibleChange.emit(false);
             }
         });
     }
@@ -1704,13 +1760,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class TooltipDirective extends BaseTooltip {
     constructor() {
         super(...arguments);
-        this.showed = new EventEmitter();
-        this.hided = new EventEmitter();
+        this.visibleChange = new EventEmitter();
         this.disableAnimation = false;
     }
 }
 TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: TooltipDirective, selector: "[auiTooltip]", inputs: { content: ["auiTooltip", "content"], context: ["auiTooltipContext", "context"], class: ["auiTooltipClass", "class"], type: ["auiTooltipType", "type"], position: ["auiTooltipPosition", "position"], trigger: ["auiTooltipTrigger", "trigger"], disabled: ["auiTooltipDisabled", "disabled"], hideOnClick: ["auiTooltipHideOnClick", "hideOnClick"], disableAnimation: ["auiDisableAnimation", "disableAnimation"] }, outputs: { showed: "auiTooltipShow", hided: "auiTooltipHide" }, providers: [
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: TooltipDirective, selector: "[auiTooltip]", inputs: { content: ["auiTooltip", "content"], context: ["auiTooltipContext", "context"], class: ["auiTooltipClass", "class"], type: ["auiTooltipType", "type"], position: ["auiTooltipPosition", "position"], trigger: ["auiTooltipTrigger", "trigger"], disabled: ["auiTooltipDisabled", "disabled"], hideOnClick: ["auiTooltipHideOnClick", "hideOnClick"], disableAnimation: ["auiDisableAnimation", "disableAnimation"] }, outputs: { visibleChange: "auiTooltipVisibleChange" }, providers: [
         {
             provide: BaseTooltip,
             useExisting: TooltipDirective,
@@ -1738,12 +1793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         'hideOnClick:auiTooltipHideOnClick',
                     ],
                 }]
-        }], propDecorators: { showed: [{
+        }], propDecorators: { visibleChange: [{
                 type: Output,
-                args: ['auiTooltipShow']
-            }], hided: [{
-                type: Output,
-                args: ['auiTooltipHide']
+                args: ['auiTooltipVisibleChange']
             }], disableAnimation: [{
                 type: Input,
                 args: ['auiDisableAnimation']
@@ -1754,13 +1806,17 @@ class TooltipActiveDirective {
         this.el = el;
         this.renderer = renderer;
         this.customClass = '';
-        tooltipDirective.showed.subscribe(() => {
-            this.addClass();
-        });
-        tooltipDirective.hided.subscribe(() => {
-            this.removeClass();
+        this.destroy$ = new Subject();
+        tooltipDirective.visibleChange
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(visible => {
+            this[visible ? 'addClass' : 'removeClass']();
         });
     }
+    ngOnDestroy() {
+        this.destroy$.next(null);
+        this.destroy$.complete();
+    }
     addClass() {
         const classArr = typeof this.customClass === 'string'
             ? this.customClass.split(' ')
@@ -1850,7 +1906,7 @@ class TooltipCopyDirective extends BaseTooltip {
     }
     ngOnInit() {
         this.content = this.auiTooltipCopyTip;
-        this.hided.subscribe(() => {
+        this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.content = this.auiTooltipCopyTip;
         });
     }
@@ -1925,8 +1981,7 @@ class AutoCompleteDirective extends BaseTooltip {
         this.ngControl = ngControl;
         this.defaultFirstSuggestion = true;
         this.suggestionTrigger = 'auto';
-        this.showed = new EventEmitter();
-        this.hided = new EventEmitter();
+        this.visibleChange = new EventEmitter();
         this.selected = new EventEmitter();
         // Whether to automatically update input value after selection
         this.autoPatch = true;
@@ -1967,11 +2022,8 @@ class AutoCompleteDirective extends BaseTooltip {
         return this.innerSelector ? el.querySelector(this.innerSelector) : el;
     }
     ngOnInit() {
-        this.showed.subscribe(() => {
-            this.updateSuggestionsContext();
-        });
-        this.hided.subscribe(() => {
-            this.resetFocusedSuggestion();
+        this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+            this[visible ? 'updateSuggestionsContext' : 'resetFocusedSuggestion']();
         });
         if (this.ngControl) {
             this.ngControl.valueChanges
@@ -2130,7 +2182,7 @@ class AutoCompleteDirective extends BaseTooltip {
     }
 }
 AutoCompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i4.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AutoCompleteDirective, selector: "input[auiAutocomplete],textarea[auiAutocomplete]", inputs: { class: ["auiAutocompleteClass", "class"], autocomplete: ["auiAutocomplete", "autocomplete"], filterFn: "filterFn", defaultFirstSuggestion: ["auiAutocompleteDefaultFirstSuggestion", "defaultFirstSuggestion"], suggestionTrigger: ["auiAutocompleteTrigger", "suggestionTrigger"], autoPatch: ["auiAutocompleteAutoPatch", "autoPatch"] }, outputs: { showed: "auiAutocompleteShow", hided: "auiAutocompleteHide", selected: "auiAutocompleteSelected" }, host: { attributes: { "autocomplete": "off" } }, exportAs: ["auiAutocomplete"], usesInheritance: true, ngImport: i0 });
+AutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AutoCompleteDirective, selector: "input[auiAutocomplete],textarea[auiAutocomplete]", inputs: { class: ["auiAutocompleteClass", "class"], autocomplete: ["auiAutocomplete", "autocomplete"], filterFn: "filterFn", defaultFirstSuggestion: ["auiAutocompleteDefaultFirstSuggestion", "defaultFirstSuggestion"], suggestionTrigger: ["auiAutocompleteTrigger", "suggestionTrigger"], autoPatch: ["auiAutocompleteAutoPatch", "autoPatch"] }, outputs: { visibleChange: "auiAutocompleteVisibleChange", selected: "auiAutocompleteSelected" }, host: { attributes: { "autocomplete": "off" } }, exportAs: ["auiAutocomplete"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AutoCompleteDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2161,12 +2213,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], suggestionTrigger: [{
                 type: Input,
                 args: ['auiAutocompleteTrigger']
-            }], showed: [{
+            }], visibleChange: [{
                 type: Output,
-                args: ['auiAutocompleteShow']
-            }], hided: [{
-                type: Output,
-                args: ['auiAutocompleteHide']
+                args: ['auiAutocompleteVisibleChange']
             }], selected: [{
                 type: Output,
                 args: ['auiAutocompleteSelected']
@@ -4103,16 +4152,18 @@ class TimePickerComponent extends CommonFormControl {
                 break;
         }
     }
-    handleTooltipOpen() {
-        this.open.emit();
-    }
-    handleTooltipHide() {
-        if (this.onTouched) {
-            this.onTouched();
+    handleTooltipVisible(visible) {
+        if (visible) {
+            this.open.emit();
+        }
+        else {
+            if (this.onTouched) {
+                this.onTouched();
+            }
+            this.setValue(this.timeValue);
+            this.submit();
+            this.close.emit();
         }
-        this.setValue(this.timeValue);
-        this.submit();
-        this.close.emit();
     }
     openPanel() {
         if (this.tooltipRef.isCreated) {
@@ -4155,7 +4206,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => TimePickerComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipShow)=\"handleTooltipOpen()\"\n  (auiTooltipHide)=\"handleTooltipHide()\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: InputGroupComponent, selector: "aui-input-group" }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: ["format", "hourStep", "minuteStep", "secondStep", "footerTemplate", "disableHours", "disableMinutes", "disableSeconds"], outputs: ["confirm"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { 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"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: InputSuffixDirective, selector: "[auiInputSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipVisibleChange)=\"handleTooltipVisible($event)\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: InputGroupComponent, selector: "aui-input-group" }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: ["format", "hourStep", "minuteStep", "secondStep", "footerTemplate", "disableHours", "disableMinutes", "disableSeconds"], outputs: ["confirm"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { 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"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: InputSuffixDirective, selector: "[auiInputSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-time-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -4164,7 +4215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipShow)=\"handleTooltipOpen()\"\n  (auiTooltipHide)=\"handleTooltipHide()\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
+                    ], template: "<div\n  class=\"aui-time-picker\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"clearable && timeFormatValue\"\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"plain\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  [auiTooltipDisabled]=\"disabled\"\n  (auiTooltipVisibleChange)=\"handleTooltipVisible($event)\"\n>\n  <aui-input-group>\n    <input\n      aui-input\n      autocomplete=\"off\"\n      [size]=\"size\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"timeFormatValue\"\n      (ngModelChange)=\"changeFromInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      *ngIf=\"showIcon\"\n      auiInputSuffix\n      class=\"aui-time-picker__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-time-picker__indicator\"\n        icon=\"clock\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-time-picker__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #template>\n  <aui-time-picker-panel\n    [disabled]=\"disabled\"\n    [disableHours]=\"disableHours\"\n    [disableMinutes]=\"disableMinutes\"\n    [disableSeconds]=\"disableSeconds\"\n    [hourStep]=\"hourStep\"\n    [minuteStep]=\"minuteStep\"\n    [secondStep]=\"secondStep\"\n    [format]=\"format\"\n    [footerTemplate]=\"footerTemplate\"\n    [(ngModel)]=\"timeValue\"\n    (ngModelChange)=\"changeFromPanel($event)\"\n    (confirm)=\"submit()\"\n    (click)=\"$event.stopPropagation()\"\n    (mousedown)=\"$event.preventDefault()\"\n  ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative}.aui-time-picker.isDisabled .aui-time-picker__icon-container{color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
         }], propDecorators: { format: [{
                 type: Input
             }], size: [{
@@ -5509,6 +5560,12 @@ class DatePickerComponent extends CommonFormControl {
         this.value = null;
         this.emitValue(null);
     }
+    visibleChange(visible) {
+        this.openChange.next(visible);
+        if (!visible) {
+            this.emitValue(this.value);
+        }
+    }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DatePickerComponent, selector: "aui-date-picker", inputs: { clearable: "clearable", clearText: "clearText", format: "format", showTime: "showTime", type: "type", size: "size", disabledDate: "disabledDate", disabledTime: "disabledTime", minDate: "minDate", maxDate: "maxDate", weekStartDay: "weekStartDay", showFooter: "showFooter", footerTemplate: "footerTemplate", extraFooter: "extraFooter", placeholder: "placeholder" }, outputs: { openChange: "openChange" }, providers: [
@@ -5517,7 +5574,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => DatePickerComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipHide)=\"openChange.next(false); emitValue(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"], components: [{ type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }, { type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: ["clearable", "clearText", "type", "showTime", "disabledDate", "disabledTime", "weekStartDay", "showFooter", "footerTemplate", "extraFooter", "minDate", "maxDate"], outputs: ["confirm", "clear"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { 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 });
+    ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipVisibleChange)=\"visibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"], components: [{ type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }, { type: DatePickerPanelComponent, selector: "aui-date-picker-panel", inputs: ["clearable", "clearText", "type", "showTime", "disabledDate", "disabledTime", "weekStartDay", "showFooter", "footerTemplate", "extraFooter", "minDate", "maxDate"], outputs: ["confirm", "clear"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { 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: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
@@ -5526,7 +5583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipHide)=\"openChange.next(false); emitValue(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"] }]
+                    ], template: "<aui-date-picker-trigger\n  [size]=\"size\"\n  [value]=\"value\"\n  [format]=\"format\"\n  style=\"display: flex\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"date-picker-wrapper\"\n  [disabled]=\"!!disabled\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  [auiTooltipHideOnClick]=\"true\"\n  [placeholder]=\"placeholder\"\n  (auiTooltipVisibleChange)=\"visibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-picker-panel\n    [type]=\"type\"\n    style=\"padding-top: 9px; display: inline-block\"\n    [(ngModel)]=\"value\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [extraFooter]=\"extraFooter\"\n    [footerTemplate]=\"footerTemplate\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-picker-panel>\n</ng-template>\n", styles: ["aui-date-picker{display:inline-block;width:200px}\n"] }]
         }], propDecorators: { clearable: [{
                 type: Input
             }], clearText: [{
@@ -5588,6 +5645,12 @@ class RangePickerComponent extends CommonFormControl {
         this.value = null;
         this.emitValue(null);
     }
+    visibleChange(visible) {
+        this.openChange.next(visible);
+        if (!visible) {
+            this.emitValue(this.value);
+        }
+    }
 }
 RangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: RangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 RangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: RangePickerComponent, selector: "aui-range-picker", inputs: { clearable: "clearable", clearText: "clearText", format: "format", showFooter: "showFooter", showTime: "showTime", disabledDate: "disabledDate", minDate: "minDate", maxDate: "maxDate", disabledTime: "disabledTime", weekStartDay: "weekStartDay", size: "size" }, outputs: { openChange: "openChange" }, providers: [
@@ -5596,7 +5659,7 @@ RangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => RangePickerComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  [disabled]=\"!!disabled\"\n  style=\"display: flex\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipHide)=\"openChange.next(false); emitValue(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n", styles: [".aui-tooltip.range-picker-wrapper{max-width:none}aui-range-picker{display:inline-block;width:260px}\n"], components: [{ type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }, { type: DateRangePickerPanelComponent, selector: "aui-date-range-picker-panel", inputs: ["clearable", "clearText", "showTime", "showFooter", "disabledDate", "disabledTime", "weekStartDay", "minDate", "maxDate"], outputs: ["clear", "confirm"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { 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 });
+    ], usesInheritance: true, ngImport: i0, template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  [disabled]=\"!!disabled\"\n  style=\"display: flex\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipVisibleChange)=\"visibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n", styles: [".aui-tooltip.range-picker-wrapper{max-width:none}aui-range-picker{display:inline-block;width:260px}\n"], components: [{ type: DatePickerTriggerComponent, selector: "aui-date-picker-trigger", inputs: ["format", "size", "isRange", "value", "clearable", "placeholder", "startPlaceholder", "endPlaceholder", "disabled"], outputs: ["blur", "clear"] }, { type: DateRangePickerPanelComponent, selector: "aui-date-range-picker-panel", inputs: ["clearable", "clearText", "showTime", "showFooter", "disabledDate", "disabledTime", "weekStartDay", "minDate", "maxDate"], outputs: ["clear", "confirm"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { 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: RangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-range-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
@@ -5605,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: forwardRef(() => RangePickerComponent),
                             multi: true,
                         },
-                    ], template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  [disabled]=\"!!disabled\"\n  style=\"display: flex\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipHide)=\"openChange.next(false); emitValue(value)\"\n  (auiTooltipShow)=\"openChange.next(true)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n", styles: [".aui-tooltip.range-picker-wrapper{max-width:none}aui-range-picker{display:inline-block;width:260px}\n"] }]
+                    ], template: "<aui-date-picker-trigger\n  [format]=\"format\"\n  [isRange]=\"true\"\n  [size]=\"size\"\n  [value]=\"value\"\n  [auiTooltip]=\"template\"\n  [auiDisableAnimation]=\"true\"\n  [disabled]=\"!!disabled\"\n  style=\"display: flex\"\n  auiTooltipType=\"info\"\n  auiTooltipClass=\"range-picker-wrapper\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipTrigger=\"click\"\n  [auiTooltipHideOnClick]=\"true\"\n  [auiTooltipDisabled]=\"!!disabled\"\n  (auiTooltipVisibleChange)=\"visibleChange($event)\"\n  (clear)=\"clearValue()\"\n  #tooltip=\"auiTooltip\"\n></aui-date-picker-trigger>\n\n<ng-template #template>\n  <aui-date-range-picker-panel\n    style=\"padding-top: 9px; display: inline-block\"\n    [showTime]=\"showTime\"\n    [showFooter]=\"showFooter\"\n    [(ngModel)]=\"value\"\n    [disabledDate]=\"disabledDate\"\n    [disabledTime]=\"disabledTime\"\n    [weekStartDay]=\"weekStartDay\"\n    [clearable]=\"clearable\"\n    [clearText]=\"clearText\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    (click)=\"$event.stopImmediatePropagation()\"\n    (clear)=\"clearValue()\"\n    (confirm)=\"tooltip.hide(); emitValue(value)\"\n  ></aui-date-range-picker-panel>\n</ng-template>\n", styles: [".aui-tooltip.range-picker-wrapper{max-width:none}aui-range-picker{display:inline-block;width:260px}\n"] }]
         }], propDecorators: { clearable: [{
                 type: Input
             }], clearText: [{
@@ -6715,8 +6778,7 @@ class DropdownDirective extends BaseTooltip {
     constructor(overlay, viewContainerRef, elRef, renderer, cdr, ngZone) {
         super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
         this.hideOnClick = true;
-        this.showed = new EventEmitter();
-        this.hided = new EventEmitter();
+        this.visibleChange = new EventEmitter();
         new DropdownActiveDirective(this, elRef, renderer).customClass = 'isActive';
         this.type = TooltipType.Plain;
         this.position = 'bottom end';
@@ -6733,21 +6795,23 @@ class DropdownDirective extends BaseTooltip {
         this.content = value.template;
     }
     ngOnInit() {
-        this.showed.pipe(debounceTime(0)).subscribe(() => {
-            if (this.menu.lazyContent) {
-                this.menu.lazyContent.attach(this.lazyContentContext);
-                this.updatePosition();
-            }
-        });
-        this.hided.subscribe(() => {
+        this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
             if (this.menu.lazyContent) {
-                this.menu.lazyContent.detach();
+                if (visible) {
+                    setTimeout(() => {
+                        this.menu.lazyContent.attach(this.lazyContentContext);
+                        this.updatePosition();
+                    });
+                }
+                else {
+                    this.menu.lazyContent.detach();
+                }
             }
         });
     }
 }
 DropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DropdownDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: DropdownDirective, selector: "[auiDropdown]", inputs: { class: ["auiDropdownClass", "class"], disabled: ["auiDropdownDisabled", "disabled"], position: ["auiDropdownPosition", "position"], trigger: ["auiDropdownTrigger", "trigger"], menu: ["auiDropdown", "menu"], lazyContentContext: ["auiDropdownContext", "lazyContentContext"], hideOnClick: ["auiDropdownHideOnClick", "hideOnClick"] }, outputs: { showed: "auiDropdownShow", hided: "auiDropdownHide" }, providers: [
+DropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: DropdownDirective, selector: "[auiDropdown]", inputs: { class: ["auiDropdownClass", "class"], disabled: ["auiDropdownDisabled", "disabled"], position: ["auiDropdownPosition", "position"], trigger: ["auiDropdownTrigger", "trigger"], menu: ["auiDropdown", "menu"], lazyContentContext: ["auiDropdownContext", "lazyContentContext"], hideOnClick: ["auiDropdownHideOnClick", "hideOnClick"] }, outputs: { visibleChange: "auiDropdownVisibleChange" }, providers: [
         {
             provide: BaseTooltip,
             useExisting: DropdownDirective,
@@ -6780,12 +6844,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], hideOnClick: [{
                 type: Input,
                 args: ['auiDropdownHideOnClick']
-            }], showed: [{
-                type: Output,
-                args: ['auiDropdownShow']
-            }], hided: [{
+            }], visibleChange: [{
                 type: Output,
-                args: ['auiDropdownHide']
+                args: ['auiDropdownVisibleChange']
             }] } });
 
 const MenuItemType = {
@@ -6930,7 +6991,7 @@ class DropdownButtonComponent {
     }
 }
 DropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DropdownButtonComponent, selector: "aui-dropdown-button", inputs: { type: "type", plain: "plain", size: "size", loading: "loading", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, queries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"bem.block(size)\">\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__content\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [loading]=\"loading\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__trigger\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [auiDropdown]=\"menu\"\n    [disabled]=\"disableTrigger\"\n  >\n    <aui-icon icon=\"angle_down\"></aui-icon>\n  </button>\n</div>\n", styles: [".aui-dropdown-button{display:inline-block}.aui-dropdown-button--large .aui-dropdown-button__trigger .aui-button__content{padding:0 7px}.aui-dropdown-button--medium .aui-dropdown-button__trigger .aui-button__content{padding:0 5px}.aui-dropdown-button--small .aui-dropdown-button__trigger .aui-button__content,.aui-dropdown-button--mini .aui-dropdown-button__trigger .aui-button__content{padding:0 3px}.aui-dropdown-button__content.aui-button{border-bottom-right-radius:0;border-top-right-radius:0}.aui-dropdown-button__content.aui-button:not([disabled]):hover,.aui-dropdown-button__content.aui-button:not([disabled]):active,.aui-dropdown-button__content.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__trigger.aui-button{border-bottom-left-radius:0;border-top-left-radius:0}.aui-dropdown-button__trigger.aui-button[disabled]{z-index:-1}.aui-dropdown-button__trigger.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button{margin-left:1px}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button.isPlain{margin-left:-1px}aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,.aui-button+aui-dropdown-button>.aui-dropdown-button{margin-left:var(--aui-spacing-m)}\n"], components: [{ type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: DropdownDirective, selector: "[auiDropdown]", inputs: ["auiDropdownClass", "auiDropdownDisabled", "auiDropdownPosition", "auiDropdownTrigger", "auiDropdown", "auiDropdownContext", "auiDropdownHideOnClick"], outputs: ["auiDropdownShow", "auiDropdownHide"], exportAs: ["auiDropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+DropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DropdownButtonComponent, selector: "aui-dropdown-button", inputs: { type: "type", plain: "plain", size: "size", loading: "loading", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, queries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"bem.block(size)\">\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__content\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [loading]=\"loading\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__trigger\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [auiDropdown]=\"menu\"\n    [disabled]=\"disableTrigger\"\n  >\n    <aui-icon icon=\"angle_down\"></aui-icon>\n  </button>\n</div>\n", styles: [".aui-dropdown-button{display:inline-block}.aui-dropdown-button--large .aui-dropdown-button__trigger .aui-button__content{padding:0 7px}.aui-dropdown-button--medium .aui-dropdown-button__trigger .aui-button__content{padding:0 5px}.aui-dropdown-button--small .aui-dropdown-button__trigger .aui-button__content,.aui-dropdown-button--mini .aui-dropdown-button__trigger .aui-button__content{padding:0 3px}.aui-dropdown-button__content.aui-button{border-bottom-right-radius:0;border-top-right-radius:0}.aui-dropdown-button__content.aui-button:not([disabled]):hover,.aui-dropdown-button__content.aui-button:not([disabled]):active,.aui-dropdown-button__content.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__trigger.aui-button{border-bottom-left-radius:0;border-top-left-radius:0}.aui-dropdown-button__trigger.aui-button[disabled]{z-index:-1}.aui-dropdown-button__trigger.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button{margin-left:1px}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button.isPlain{margin-left:-1px}aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,.aui-button+aui-dropdown-button>.aui-dropdown-button{margin-left:var(--aui-spacing-m)}\n"], components: [{ type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: DropdownDirective, selector: "[auiDropdown]", inputs: ["auiDropdownClass", "auiDropdownDisabled", "auiDropdownPosition", "auiDropdownTrigger", "auiDropdown", "auiDropdownContext", "auiDropdownHideOnClick"], outputs: ["auiDropdownVisibleChange"], exportAs: ["auiDropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-dropdown-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div [class]=\"bem.block(size)\">\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__content\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [loading]=\"loading\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__trigger\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [auiDropdown]=\"menu\"\n    [disabled]=\"disableTrigger\"\n  >\n    <aui-icon icon=\"angle_down\"></aui-icon>\n  </button>\n</div>\n", styles: [".aui-dropdown-button{display:inline-block}.aui-dropdown-button--large .aui-dropdown-button__trigger .aui-button__content{padding:0 7px}.aui-dropdown-button--medium .aui-dropdown-button__trigger .aui-button__content{padding:0 5px}.aui-dropdown-button--small .aui-dropdown-button__trigger .aui-button__content,.aui-dropdown-button--mini .aui-dropdown-button__trigger .aui-button__content{padding:0 3px}.aui-dropdown-button__content.aui-button{border-bottom-right-radius:0;border-top-right-radius:0}.aui-dropdown-button__content.aui-button:not([disabled]):hover,.aui-dropdown-button__content.aui-button:not([disabled]):active,.aui-dropdown-button__content.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__trigger.aui-button{border-bottom-left-radius:0;border-top-left-radius:0}.aui-dropdown-button__trigger.aui-button[disabled]{z-index:-1}.aui-dropdown-button__trigger.aui-button:not([disabled]):focus{z-index:1}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button{margin-left:1px}.aui-dropdown-button__content.aui-button+.aui-dropdown-button__trigger.aui-button.isPlain{margin-left:-1px}aui-dropdown-button+aui-dropdown-button>.aui-dropdown-button,aui-dropdown-button+.aui-button,.aui-button+aui-dropdown-button>.aui-dropdown-button{margin-left:var(--aui-spacing-m)}\n"] }]
@@ -6991,7 +7052,7 @@ class SubmenuComponent extends MenuItemComponent {
     }
 }
 SubmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SubmenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SubmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SubmenuComponent, selector: "aui-submenu", inputs: { trigger: "trigger", size: "size", disabled: "disabled" }, queries: [{ propertyName: "menuItems", predicate: MenuItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"className\"\n  [auiTooltip]=\"menu.template\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiTooltipTrigger]=\"trigger\"\n  [auiTooltipHideOnClick]=\"true\"\n  auiTooltipPosition=\"end top\"\n  auiTooltipType=\"plain\"\n  auiTooltipClass=\"aui-sub-dropdown\"\n  auiTooltipActive=\"isActive\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <span class=\"aui-submenu__title\"><ng-content></ng-content></span>\n  <aui-icon\n    class=\"aui-submenu__arrow\"\n    icon=\"angle_right\"\n  ></aui-icon>\n</button>\n\n<aui-menu\n  #menu\n  [size]=\"size\"\n>\n  <ng-content select=\"aui-menu-item\"></ng-content>\n</aui-menu>\n", styles: [".aui-submenu{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 var(--aui-spacing-l);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:transparent;border-radius:var(--aui-border-radius-m);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-submenu--default:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--default.isActive{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-submenu--primary{color:rgb(var(--aui-color-primary))}.aui-submenu--primary:hover,.aui-submenu--primary.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--success{color:rgb(var(--aui-color-green))}.aui-submenu--success:hover,.aui-submenu--success.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--warning{color:rgb(var(--aui-color-yellow))}.aui-submenu--warning:hover,.aui-submenu--warning.isActive{background-color:rgb(var(--aui-color-y-6))}.aui-submenu--danger{color:rgb(var(--aui-color-red))}.aui-submenu--danger:hover,.aui-submenu--danger.isActive{background-color:rgb(var(--aui-color-r-6))}.aui-submenu[disabled],.aui-submenu[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:transparent;cursor:not-allowed}.aui-submenu aui-icon:first-child{margin-right:var(--aui-spacing-m)}aui-submenu:not(:first-child) .hasDivider{overflow:visible;margin-top:var(--aui-spacing-xl)}aui-submenu:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:calc(0px - var(--aui-spacing-m));height:1px;background:rgb(var(--aui-color-n-8));pointer-events:none}.aui-submenu{display:flex;justify-content:space-between;align-items:center;padding-right:var(--aui-spacing-s)}.aui-submenu__title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aui-submenu__arrow{margin-left:var(--aui-spacing-l)}.aui-submenu--default.isActive{color:rgb(var(--aui-color-n-1))}.aui-sub-dropdown.aui-tooltip--start,.aui-sub-dropdown.aui-tooltip--end{margin:calc(0px - var(--aui-spacing-m)) var(--aui-spacing-m)}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: MenuComponent, selector: "aui-menu", inputs: ["size"] }], directives: [{ type: TooltipActiveDirective, selector: "[auiTooltipActive]", inputs: ["auiTooltipActive"] }, { type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SubmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: SubmenuComponent, selector: "aui-submenu", inputs: { trigger: "trigger", size: "size", disabled: "disabled" }, queries: [{ propertyName: "menuItems", predicate: MenuItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"className\"\n  [auiTooltip]=\"menu.template\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiTooltipTrigger]=\"trigger\"\n  [auiTooltipHideOnClick]=\"true\"\n  auiTooltipPosition=\"end top\"\n  auiTooltipType=\"plain\"\n  auiTooltipClass=\"aui-sub-dropdown\"\n  auiTooltipActive=\"isActive\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <span class=\"aui-submenu__title\"><ng-content></ng-content></span>\n  <aui-icon\n    class=\"aui-submenu__arrow\"\n    icon=\"angle_right\"\n  ></aui-icon>\n</button>\n\n<aui-menu\n  #menu\n  [size]=\"size\"\n>\n  <ng-content select=\"aui-menu-item\"></ng-content>\n</aui-menu>\n", styles: [".aui-submenu{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 var(--aui-spacing-l);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:transparent;border-radius:var(--aui-border-radius-m);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-submenu--default:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--default.isActive{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-submenu--primary{color:rgb(var(--aui-color-primary))}.aui-submenu--primary:hover,.aui-submenu--primary.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--success{color:rgb(var(--aui-color-green))}.aui-submenu--success:hover,.aui-submenu--success.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--warning{color:rgb(var(--aui-color-yellow))}.aui-submenu--warning:hover,.aui-submenu--warning.isActive{background-color:rgb(var(--aui-color-y-6))}.aui-submenu--danger{color:rgb(var(--aui-color-red))}.aui-submenu--danger:hover,.aui-submenu--danger.isActive{background-color:rgb(var(--aui-color-r-6))}.aui-submenu[disabled],.aui-submenu[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:transparent;cursor:not-allowed}.aui-submenu aui-icon:first-child{margin-right:var(--aui-spacing-m)}aui-submenu:not(:first-child) .hasDivider{overflow:visible;margin-top:var(--aui-spacing-xl)}aui-submenu:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:calc(0px - var(--aui-spacing-m));height:1px;background:rgb(var(--aui-color-n-8));pointer-events:none}.aui-submenu{display:flex;justify-content:space-between;align-items:center;padding-right:var(--aui-spacing-s)}.aui-submenu__title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aui-submenu__arrow{margin-left:var(--aui-spacing-l)}.aui-submenu--default.isActive{color:rgb(var(--aui-color-n-1))}.aui-sub-dropdown.aui-tooltip--start,.aui-sub-dropdown.aui-tooltip--end{margin:calc(0px - var(--aui-spacing-m)) var(--aui-spacing-m)}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: MenuComponent, selector: "aui-menu", inputs: ["size"] }], directives: [{ type: TooltipActiveDirective, selector: "[auiTooltipActive]", inputs: ["auiTooltipActive"] }, { type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SubmenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-submenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<button\n  [class]=\"className\"\n  [auiTooltip]=\"menu.template\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiTooltipTrigger]=\"trigger\"\n  [auiTooltipHideOnClick]=\"true\"\n  auiTooltipPosition=\"end top\"\n  auiTooltipType=\"plain\"\n  auiTooltipClass=\"aui-sub-dropdown\"\n  auiTooltipActive=\"isActive\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <span class=\"aui-submenu__title\"><ng-content></ng-content></span>\n  <aui-icon\n    class=\"aui-submenu__arrow\"\n    icon=\"angle_right\"\n  ></aui-icon>\n</button>\n\n<aui-menu\n  #menu\n  [size]=\"size\"\n>\n  <ng-content select=\"aui-menu-item\"></ng-content>\n</aui-menu>\n", styles: [".aui-submenu{transition:all .3s ease;display:block;border:none;outline:none;width:100%;text-align:left;padding:0 var(--aui-spacing-l);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);color:rgb(var(--aui-color-n-1));background-color:transparent;border-radius:var(--aui-border-radius-m);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.aui-submenu--default:hover{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--default.isActive{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-submenu--primary{color:rgb(var(--aui-color-primary))}.aui-submenu--primary:hover,.aui-submenu--primary.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--success{color:rgb(var(--aui-color-green))}.aui-submenu--success:hover,.aui-submenu--success.isActive{background-color:rgb(var(--aui-color-p-6))}.aui-submenu--warning{color:rgb(var(--aui-color-yellow))}.aui-submenu--warning:hover,.aui-submenu--warning.isActive{background-color:rgb(var(--aui-color-y-6))}.aui-submenu--danger{color:rgb(var(--aui-color-red))}.aui-submenu--danger:hover,.aui-submenu--danger.isActive{background-color:rgb(var(--aui-color-r-6))}.aui-submenu[disabled],.aui-submenu[disabled]:hover{color:rgb(var(--aui-color-n-6));background-color:transparent;cursor:not-allowed}.aui-submenu aui-icon:first-child{margin-right:var(--aui-spacing-m)}aui-submenu:not(:first-child) .hasDivider{overflow:visible;margin-top:var(--aui-spacing-xl)}aui-submenu:not(:first-child) .hasDivider:before{content:\"\";position:absolute;display:block;left:0;right:0;top:calc(0px - var(--aui-spacing-m));height:1px;background:rgb(var(--aui-color-n-8));pointer-events:none}.aui-submenu{display:flex;justify-content:space-between;align-items:center;padding-right:var(--aui-spacing-s)}.aui-submenu__title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aui-submenu__arrow{margin-left:var(--aui-spacing-l)}.aui-submenu--default.isActive{color:rgb(var(--aui-color-n-1))}.aui-sub-dropdown.aui-tooltip--start,.aui-sub-dropdown.aui-tooltip--end{margin:calc(0px - var(--aui-spacing-m)) var(--aui-spacing-m)}\n"] }]
@@ -8069,12 +8130,14 @@ class SelectComponent extends BaseSelect {
         }), publishRef());
         this.hasSelected$ = this.selectedOption$.pipe(map(({ label }) => !!label), publishRef());
     }
-    onShowOptions() {
-        super.onShowOptions();
-    }
-    onHideOptions() {
-        super.onHideOptions();
-        this.inputRef.elementRef.nativeElement.value = '';
+    onVisibleOptions(visible) {
+        if (visible) {
+            super.onShowOptions();
+        }
+        else {
+            super.onHideOptions();
+            this.inputRef.elementRef.nativeElement.value = '';
+        }
     }
     valueIn(v) {
         this.closeOption();
@@ -8101,7 +8164,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: BaseSelect,
             useExisting: SelectComponent,
         },
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-select{display:inline-block;position:relative;width:100%}.aui-select__icon-container{display:block;position:relative}.aui-select.isDisabled .aui-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-select__clear{display:none}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-select.isClearable:not(.isDisabled):hover .aui-select__indicator{display:none}.aui-select.isClearable:not(.isDisabled):hover .aui-select__clear{display:flex}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-4))}.aui-select__label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-select__input.aui-input[readonly]{background-color:rgb(var(--aui-color-main-bg));border-color:rgb(var(--aui-color-n-7))!important;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:rgb(var(--aui-color-primary))}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))}aui-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: InputGroupComponent, selector: "aui-input-group" }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleOptions($event)\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-select{display:inline-block;position:relative;width:100%}.aui-select__icon-container{display:block;position:relative}.aui-select.isDisabled .aui-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-select__clear{display:none}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-select.isClearable:not(.isDisabled):hover .aui-select__indicator{display:none}.aui-select.isClearable:not(.isDisabled):hover .aui-select__clear{display:flex}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-4))}.aui-select__label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-select__input.aui-input[readonly]{background-color:rgb(var(--aui-color-main-bg));border-color:rgb(var(--aui-color-n-7))!important;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:rgb(var(--aui-color-primary))}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))}aui-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: InputGroupComponent, selector: "aui-input-group" }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { type: InputSuffixDirective, selector: "[auiInputSuffix]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, providers: [
@@ -8114,7 +8177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             provide: BaseSelect,
                             useExisting: SelectComponent,
                         },
-                    ], template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-select{display:inline-block;position:relative;width:100%}.aui-select__icon-container{display:block;position:relative}.aui-select.isDisabled .aui-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-select__clear{display:none}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-select.isClearable:not(.isDisabled):hover .aui-select__indicator{display:none}.aui-select.isClearable:not(.isDisabled):hover .aui-select__clear{display:flex}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-4))}.aui-select__label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-select__input.aui-input[readonly]{background-color:rgb(var(--aui-color-main-bg));border-color:rgb(var(--aui-color-n-7))!important;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:rgb(var(--aui-color-primary))}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))}aui-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
+                    ], template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleOptions($event)\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-select{display:inline-block;position:relative;width:100%}.aui-select__icon-container{display:block;position:relative}.aui-select.isDisabled .aui-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-select__clear{display:none}.aui-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-select.isClearable:not(.isDisabled):hover .aui-select__indicator{display:none}.aui-select.isClearable:not(.isDisabled):hover .aui-select__clear{display:flex}.aui-select__label-container.aui-input{position:absolute;top:0;left:0;display:inline-flex;align-items:center;pointer-events:none;background-color:transparent;border-color:transparent}.aui-select.isFilterable.isOpened .aui-select__label-container.aui-input{color:rgb(var(--aui-color-n-4))}.aui-select__label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-select__input.aui-input[readonly]{background-color:rgb(var(--aui-color-main-bg));border-color:rgb(var(--aui-color-n-7))!important;cursor:text}.aui-select__input.aui-input[readonly]:focus{border-color:rgb(var(--aui-color-primary))}.aui-select__input.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))}aui-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { static: true }]
@@ -8359,14 +8422,16 @@ class MultiSelectComponent extends BaseSelect {
         ]).pipe(map(([allOptions]) => !!allOptions.filter(({ visible, disabled }) => visible && !disabled)
             .length));
     }
-    onShowOptions() {
-        super.onShowOptions();
-        this.inputRef.nativeElement.focus();
-    }
-    onHideOptions() {
-        super.onHideOptions();
-        this.inputRef.nativeElement.value = '';
-        this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+    onVisibleOptions(visible) {
+        if (visible) {
+            super.onShowOptions();
+            this.inputRef.nativeElement.focus();
+        }
+        else {
+            super.onHideOptions();
+            this.inputRef.nativeElement.value = '';
+            this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+        }
     }
     onInput(event) {
         super.onInput(event);
@@ -8503,7 +8568,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             provide: BaseSelect,
             useExisting: MultiSelectComponent,
         },
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }, { propertyName: "inputValueMirror", first: true, predicate: ["inputValueMirror"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"model.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled && !option.disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span\n    #inputValueMirror\n    [class]=\"bem.element('mirror')\"\n  >\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isIndeterminate]=\"\n            (selectAllStatus$ | async) === 'indeterminate'\n          \"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              *ngIf=\"(selectAllStatus$ | async) === 'checked'\"\n              icon=\"check\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));outline:none;text-overflow:ellipsis;font-weight:var(--aui-font-weight-normal)}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-main-text))}}.aui-input:-webkit-autofill{animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-outer-spin-button,.aui-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.aui-input[type=number]{-webkit-appearance:textfield;appearance:textfield}.aui-input::placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input:focus,.aui-input.isFocused{border-color:rgb(var(--aui-color-primary))}:root .aui-input:focus,:root .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-input:focus,html[aui-theme-mode=light] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input:focus,html[aui-theme-mode=system] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-input:focus,html[aui-theme-mode=dark] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;cursor:default}.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;color:rgb(var(--aui-color-disabled-text));-webkit-text-fill-color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}:root .aui-input.ng-invalid.ng-dirty:focus,:root .aui-input.ng-invalid.ng-dirty.isFocused,:root .ng-submitted .aui-input.ng-invalid:focus,:root .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n", ".aui-tag{display:inline-flex;align-items:center;border-radius:var(--aui-border-radius-m);border:1px solid transparent;max-width:240px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{padding:0 var(--aui-inline-padding-m);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-tag--large.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-tag--medium{padding:0 var(--aui-inline-padding-s);height:var(--aui-inline-height-s);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--medium.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-tag--small{padding:0 var(--aui-inline-padding-xs);height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--small.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--mini{padding:0 var(--aui-inline-padding-xs);height:20px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-p-6));background-color:rgb(var(--aui-color-primary))}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-g-6));background-color:rgb(var(--aui-color-green))}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-y-6));background-color:rgb(var(--aui-color-yellow))}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-r-6));background-color:rgb(var(--aui-color-red))}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-button-bg))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-9));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid.aui-tag--primary{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:#fff}.aui-tag.isSolid.aui-tag--success{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-green));background-color:#fff}.aui-tag.isSolid.aui-tag--warning{color:#fff;background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-yellow));background-color:#fff}.aui-tag.isSolid.aui-tag--error{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-red));background-color:#fff}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:var(--aui-spacing-m)}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}\n", ".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-main-text));font-weight:var(--aui-font-weight-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{padding:calc((var(--aui-inline-height-l) - var(--aui-line-height-l)) / 2);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{padding:calc((var(--aui-inline-height-m) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{padding:calc((var(--aui-inline-height-s) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--mini{padding:calc((var(--aui-inline-height-xs) - var(--aui-line-height-s)) / 2);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-option:hover,.aui-option.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-option__pointer{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:1px solid rgb(var(--aui-color-n-7));color:#fff;background-color:rgb(var(--aui-color-main-bg));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isIndeterminate .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-option.isIndeterminate .aui-option__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled):hover .aui-option__pointer,.aui-option:not(.isDisabled).isFocused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}.aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-main-text));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7));cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-placeholder-text));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;right:0;left:0;padding-left:inherit;padding-right:inherit;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-multi-select--large{min-height:var(--aui-inline-height-l);padding:calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--large .aui-tag{margin:0 4px calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) 0}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);padding:calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--medium .aui-tag{margin:0 4px calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) 0}.aui-multi-select--small{min-height:var(--aui-inline-height-s);padding:calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--small .aui-tag{margin:0 4px calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) 0}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);padding:calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--mini .aui-tag{margin:0 4px calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) 0}.aui-multi-select__suffix{position:absolute;top:50%;right:var(--aui-inline-padding-xs);transform:translateY(-50%)}.aui-multi-select .aui-tag.aui-multi-select__input{margin-right:0;padding:0;width:1em;max-width:100%;border:none;outline:none;background:none;color:rgb(var(--aui-color-main-text));font-family:inherit;font-size:inherit}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input,.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}:root aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}aui-multi-select.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.aui-multi-select--large{min-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l) + 1px)}.aui-multi-select--large .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-l)}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--medium .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--small{min-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--small .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s) + 1px)}.aui-multi-select--mini .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-s)}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__icon-container{display:block;position:relative}.aui-multi-select.isDisabled .aui-multi-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-multi-select__clear{display:none}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__indicator{display:none}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__clear{display:flex}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-multi-select.withHeightLimit::-webkit-scrollbar-corner{background-color:transparent}.aui-multi-select .aui-tag--info{background-color:rgb(var(--aui-color-n-10))}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { type: OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe, "auiI18n": I18nPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }, { propertyName: "inputValueMirror", first: true, predicate: ["inputValueMirror"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleOptions($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"model.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled && !option.disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span\n    #inputValueMirror\n    [class]=\"bem.element('mirror')\"\n  >\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isIndeterminate]=\"\n            (selectAllStatus$ | async) === 'indeterminate'\n          \"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              *ngIf=\"(selectAllStatus$ | async) === 'checked'\"\n              icon=\"check\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));outline:none;text-overflow:ellipsis;font-weight:var(--aui-font-weight-normal)}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-main-text))}}.aui-input:-webkit-autofill{animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-outer-spin-button,.aui-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.aui-input[type=number]{-webkit-appearance:textfield;appearance:textfield}.aui-input::placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input:focus,.aui-input.isFocused{border-color:rgb(var(--aui-color-primary))}:root .aui-input:focus,:root .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-input:focus,html[aui-theme-mode=light] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input:focus,html[aui-theme-mode=system] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-input:focus,html[aui-theme-mode=dark] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;cursor:default}.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;color:rgb(var(--aui-color-disabled-text));-webkit-text-fill-color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}:root .aui-input.ng-invalid.ng-dirty:focus,:root .aui-input.ng-invalid.ng-dirty.isFocused,:root .ng-submitted .aui-input.ng-invalid:focus,:root .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n", ".aui-tag{display:inline-flex;align-items:center;border-radius:var(--aui-border-radius-m);border:1px solid transparent;max-width:240px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{padding:0 var(--aui-inline-padding-m);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-tag--large.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-tag--medium{padding:0 var(--aui-inline-padding-s);height:var(--aui-inline-height-s);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--medium.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-tag--small{padding:0 var(--aui-inline-padding-xs);height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--small.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--mini{padding:0 var(--aui-inline-padding-xs);height:20px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-p-6));background-color:rgb(var(--aui-color-primary))}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-g-6));background-color:rgb(var(--aui-color-green))}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-y-6));background-color:rgb(var(--aui-color-yellow))}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-r-6));background-color:rgb(var(--aui-color-red))}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-button-bg))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-9));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid.aui-tag--primary{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:#fff}.aui-tag.isSolid.aui-tag--success{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-green));background-color:#fff}.aui-tag.isSolid.aui-tag--warning{color:#fff;background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-yellow));background-color:#fff}.aui-tag.isSolid.aui-tag--error{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-red));background-color:#fff}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:var(--aui-spacing-m)}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}\n", ".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-main-text));font-weight:var(--aui-font-weight-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{padding:calc((var(--aui-inline-height-l) - var(--aui-line-height-l)) / 2);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{padding:calc((var(--aui-inline-height-m) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{padding:calc((var(--aui-inline-height-s) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--mini{padding:calc((var(--aui-inline-height-xs) - var(--aui-line-height-s)) / 2);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-option:hover,.aui-option.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-option__pointer{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:1px solid rgb(var(--aui-color-n-7));color:#fff;background-color:rgb(var(--aui-color-main-bg));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isIndeterminate .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-option.isIndeterminate .aui-option__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled):hover .aui-option__pointer,.aui-option:not(.isDisabled).isFocused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}.aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-main-text));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7));cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-placeholder-text));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;right:0;left:0;padding-left:inherit;padding-right:inherit;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-multi-select--large{min-height:var(--aui-inline-height-l);padding:calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--large .aui-tag{margin:0 4px calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) 0}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);padding:calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--medium .aui-tag{margin:0 4px calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) 0}.aui-multi-select--small{min-height:var(--aui-inline-height-s);padding:calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--small .aui-tag{margin:0 4px calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) 0}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);padding:calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--mini .aui-tag{margin:0 4px calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) 0}.aui-multi-select__suffix{position:absolute;top:50%;right:var(--aui-inline-padding-xs);transform:translateY(-50%)}.aui-multi-select .aui-tag.aui-multi-select__input{margin-right:0;padding:0;width:1em;max-width:100%;border:none;outline:none;background:none;color:rgb(var(--aui-color-main-text));font-family:inherit;font-size:inherit}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input,.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}:root aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}aui-multi-select.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.aui-multi-select--large{min-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l) + 1px)}.aui-multi-select--large .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-l)}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--medium .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--small{min-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--small .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s) + 1px)}.aui-multi-select--mini .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-s)}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__icon-container{display:block;position:relative}.aui-multi-select.isDisabled .aui-multi-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-multi-select__clear{display:none}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__indicator{display:none}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__clear{display:flex}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-multi-select.withHeightLimit::-webkit-scrollbar-corner{background-color:transparent}.aui-multi-select .aui-tag--info{background-color:rgb(var(--aui-color-n-10))}\n"], components: [{ type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: TagComponent, selector: "aui-tag", inputs: ["type", "size", "closeable", "border", "solid", "invalid", "round", "color", "allowClick"], outputs: ["close"] }, { type: OptionComponent, selector: "aui-option", inputs: ["label", "labelContext", "value", "disabled"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe, "auiI18n": I18nPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, providers: [
@@ -8516,7 +8581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             provide: BaseSelect,
                             useExisting: MultiSelectComponent,
                         },
-                    ], template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"model.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled && !option.disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span\n    #inputValueMirror\n    [class]=\"bem.element('mirror')\"\n  >\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isIndeterminate]=\"\n            (selectAllStatus$ | async) === 'indeterminate'\n          \"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              *ngIf=\"(selectAllStatus$ | async) === 'checked'\"\n              icon=\"check\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));outline:none;text-overflow:ellipsis;font-weight:var(--aui-font-weight-normal)}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-main-text))}}.aui-input:-webkit-autofill{animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-outer-spin-button,.aui-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.aui-input[type=number]{-webkit-appearance:textfield;appearance:textfield}.aui-input::placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input:focus,.aui-input.isFocused{border-color:rgb(var(--aui-color-primary))}:root .aui-input:focus,:root .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-input:focus,html[aui-theme-mode=light] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input:focus,html[aui-theme-mode=system] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-input:focus,html[aui-theme-mode=dark] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;cursor:default}.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;color:rgb(var(--aui-color-disabled-text));-webkit-text-fill-color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}:root .aui-input.ng-invalid.ng-dirty:focus,:root .aui-input.ng-invalid.ng-dirty.isFocused,:root .ng-submitted .aui-input.ng-invalid:focus,:root .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n", ".aui-tag{display:inline-flex;align-items:center;border-radius:var(--aui-border-radius-m);border:1px solid transparent;max-width:240px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{padding:0 var(--aui-inline-padding-m);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-tag--large.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-tag--medium{padding:0 var(--aui-inline-padding-s);height:var(--aui-inline-height-s);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--medium.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-tag--small{padding:0 var(--aui-inline-padding-xs);height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--small.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--mini{padding:0 var(--aui-inline-padding-xs);height:20px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-p-6));background-color:rgb(var(--aui-color-primary))}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-g-6));background-color:rgb(var(--aui-color-green))}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-y-6));background-color:rgb(var(--aui-color-yellow))}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-r-6));background-color:rgb(var(--aui-color-red))}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-button-bg))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-9));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid.aui-tag--primary{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:#fff}.aui-tag.isSolid.aui-tag--success{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-green));background-color:#fff}.aui-tag.isSolid.aui-tag--warning{color:#fff;background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-yellow));background-color:#fff}.aui-tag.isSolid.aui-tag--error{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-red));background-color:#fff}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:var(--aui-spacing-m)}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}\n", ".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-main-text));font-weight:var(--aui-font-weight-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{padding:calc((var(--aui-inline-height-l) - var(--aui-line-height-l)) / 2);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{padding:calc((var(--aui-inline-height-m) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{padding:calc((var(--aui-inline-height-s) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--mini{padding:calc((var(--aui-inline-height-xs) - var(--aui-line-height-s)) / 2);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-option:hover,.aui-option.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-option__pointer{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:1px solid rgb(var(--aui-color-n-7));color:#fff;background-color:rgb(var(--aui-color-main-bg));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isIndeterminate .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-option.isIndeterminate .aui-option__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled):hover .aui-option__pointer,.aui-option:not(.isDisabled).isFocused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}.aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-main-text));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7));cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-placeholder-text));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;right:0;left:0;padding-left:inherit;padding-right:inherit;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-multi-select--large{min-height:var(--aui-inline-height-l);padding:calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--large .aui-tag{margin:0 4px calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) 0}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);padding:calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--medium .aui-tag{margin:0 4px calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) 0}.aui-multi-select--small{min-height:var(--aui-inline-height-s);padding:calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--small .aui-tag{margin:0 4px calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) 0}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);padding:calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--mini .aui-tag{margin:0 4px calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) 0}.aui-multi-select__suffix{position:absolute;top:50%;right:var(--aui-inline-padding-xs);transform:translateY(-50%)}.aui-multi-select .aui-tag.aui-multi-select__input{margin-right:0;padding:0;width:1em;max-width:100%;border:none;outline:none;background:none;color:rgb(var(--aui-color-main-text));font-family:inherit;font-size:inherit}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input,.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}:root aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}aui-multi-select.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.aui-multi-select--large{min-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l) + 1px)}.aui-multi-select--large .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-l)}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--medium .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--small{min-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--small .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s) + 1px)}.aui-multi-select--mini .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-s)}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__icon-container{display:block;position:relative}.aui-multi-select.isDisabled .aui-multi-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-multi-select__clear{display:none}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__indicator{display:none}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__clear{display:flex}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-multi-select.withHeightLimit::-webkit-scrollbar-corner{background-color:transparent}.aui-multi-select .aui-tag--info{background-color:rgb(var(--aui-color-n-10))}\n"] }]
+                    ], template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiDisableAnimation]=\"true\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleOptions($event)\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"model.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled && !option.disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span\n    #inputValueMirror\n    [class]=\"bem.element('mirror')\"\n  >\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #optionListRef\n      class=\"aui-option-container__content\"\n    >\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isIndeterminate]=\"\n            (selectAllStatus$ | async) === 'indeterminate'\n          \"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              *ngIf=\"(selectAllStatus$ | async) === 'checked'\"\n              icon=\"check\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-input{display:inline-block;padding:0 var(--aui-inline-padding-xs);width:100%;min-width:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));outline:none;text-overflow:ellipsis;font-weight:var(--aui-font-weight-normal)}@keyframes cdk-text-field-autofill-color-0{to{background:rgb(var(--aui-color-n-9));color:rgb(var(--aui-color-main-text))}}.aui-input:-webkit-autofill{animation:cdk-text-field-autofill-color-0 both}.aui-input.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms,cdk-text-field-autofill-color-0 both}.aui-input::-webkit-outer-spin-button,.aui-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.aui-input[type=number]{-webkit-appearance:textfield;appearance:textfield}.aui-input::placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-input:invalid,.aui-input:required{box-shadow:none}.aui-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-input:focus,.aui-input.isFocused{border-color:rgb(var(--aui-color-primary))}:root .aui-input:focus,:root .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-input:focus,html[aui-theme-mode=light] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input:focus,html[aui-theme-mode=system] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-input:focus,html[aui-theme-mode=dark] .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-input[readonly]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;cursor:default}.aui-input[disabled]{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7))!important;color:rgb(var(--aui-color-disabled-text));-webkit-text-fill-color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}.aui-input--large{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-input--medium{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m)}.aui-input--small{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-input--mini{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}textarea.aui-input{padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 3 + 2px);max-height:calc(var(--aui-inline-padding-xxs) * 2 + var(--aui-line-height-m) * 6 + 2px);min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text));resize:vertical;overflow:auto}.aui-input.ng-invalid.ng-dirty,.ng-submitted .aui-input.ng-invalid{border-color:rgb(var(--aui-color-red))!important}:root .aui-input.ng-invalid.ng-dirty:focus,:root .aui-input.ng-invalid.ng-dirty.isFocused,:root .ng-submitted .aui-input.ng-invalid:focus,:root .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=light] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=light] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=system] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=system] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty:focus,html[aui-theme-mode=dark] .aui-input.ng-invalid.ng-dirty.isFocused,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid:focus,html[aui-theme-mode=dark] .ng-submitted .aui-input.ng-invalid.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n", ".aui-tag{display:inline-flex;align-items:center;border-radius:var(--aui-border-radius-m);border:1px solid transparent;max-width:240px;vertical-align:middle;transition:background-color .3s ease}.aui-tag__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-tag .aui-tag__close .aui-icon{margin-left:4px;border-radius:50%;cursor:pointer;transition:all .3s ease}.aui-tag--large{padding:0 var(--aui-inline-padding-m);height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-tag--large.isRound{border-radius:calc(var(--aui-inline-height-m) / 2)}.aui-tag--medium{padding:0 var(--aui-inline-padding-s);height:var(--aui-inline-height-s);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--medium.isRound{border-radius:calc(var(--aui-inline-height-s) / 2)}.aui-tag--small{padding:0 var(--aui-inline-padding-xs);height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--small.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--mini{padding:0 var(--aui-inline-padding-xs);height:20px;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-tag--mini.isRound{border-radius:calc(var(--aui-inline-height-xs) / 2)}.aui-tag--primary{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary.hasBorder{border-color:rgb(var(--aui-color-p-2))}.aui-tag--primary.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-p-1))}.aui-tag--primary.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-p-0))}.aui-tag--primary.allowClick:hover{background-color:rgb(var(--aui-color-p-7));cursor:pointer}.aui-tag--primary.allowClick:active{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-p-6));background-color:rgb(var(--aui-color-primary))}.aui-tag--success{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success.hasBorder{border-color:rgb(var(--aui-color-g-2))}.aui-tag--success.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-g-1))}.aui-tag--success.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-g-0))}.aui-tag--success.allowClick:hover{background-color:rgb(var(--aui-color-g-7));cursor:pointer}.aui-tag--success.allowClick:active{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-g-6));background-color:rgb(var(--aui-color-green))}.aui-tag--warning{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning.hasBorder{border-color:rgb(var(--aui-color-y-2))}.aui-tag--warning.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-y-1))}.aui-tag--warning.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-y-0))}.aui-tag--warning.allowClick:hover{background-color:rgb(var(--aui-color-y-7));cursor:pointer}.aui-tag--warning.allowClick:active{color:rgb(var(--aui-color-yellow));background-color:rgb(var(--aui-color-y-6))}.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-y-6));background-color:rgb(var(--aui-color-yellow))}.aui-tag--error{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error.hasBorder{border-color:rgb(var(--aui-color-r-2))}.aui-tag--error.hasBorder.allowClick:hover{border-color:rgb(var(--aui-color-r-1))}.aui-tag--error.hasBorder.allowClick:active{border-color:rgb(var(--aui-color-r-0))}.aui-tag--error.allowClick:hover{background-color:rgb(var(--aui-color-r-7));cursor:pointer}.aui-tag--error.allowClick:active{color:rgb(var(--aui-color-red));background-color:rgb(var(--aui-color-r-6))}.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-r-6));background-color:rgb(var(--aui-color-red))}.aui-tag--info{color:rgb(var(--aui-color-n-2));background-color:rgb(var(--aui-color-n-8))}.aui-tag--info.hasBorder{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-button-bg))}.aui-tag--info .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-n-9));background-color:rgb(var(--aui-color-n-4))}.aui-tag.isInvalid{text-decoration:line-through}.aui-tag.isSolid.aui-tag--primary{color:#fff;background-color:rgb(var(--aui-color-primary))}.aui-tag.isSolid.aui-tag--primary .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-primary));background-color:#fff}.aui-tag.isSolid.aui-tag--success{color:#fff;background-color:rgb(var(--aui-color-green))}.aui-tag.isSolid.aui-tag--success .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-green));background-color:#fff}.aui-tag.isSolid.aui-tag--warning{color:#fff;background-color:rgb(var(--aui-color-yellow))}.aui-tag.isSolid.aui-tag--warning .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-yellow));background-color:#fff}.aui-tag.isSolid.aui-tag--error{color:#fff;background-color:rgb(var(--aui-color-red))}.aui-tag.isSolid.aui-tag--error .aui-tag__close .aui-icon:hover{color:rgb(var(--aui-color-red));background-color:#fff}.aui-tag.allowClick a{color:inherit}.aui-tag.allowClick:hover{cursor:pointer}aui-tag+aui-tag .aui-tag--large,aui-tag+aui-tag .aui-tag--medium,aui-tag+aui-tag .aui-tag--small{margin-left:var(--aui-spacing-m)}aui-tag+aui-tag .aui-tag--mini{margin-left:6px}\n", ".aui-option{padding:0 var(--aui-inline-padding-xs);color:rgb(var(--aui-color-main-text));font-weight:var(--aui-font-weight-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.aui-option--large{padding:calc((var(--aui-inline-height-l) - var(--aui-line-height-l)) / 2);line-height:var(--aui-line-height-l);font-size:var(--aui-font-size-l)}.aui-option--medium{padding:calc((var(--aui-inline-height-m) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--small{padding:calc((var(--aui-inline-height-s) - var(--aui-line-height-m)) / 2);line-height:var(--aui-line-height-m);font-size:var(--aui-font-size-m)}.aui-option--mini{padding:calc((var(--aui-inline-height-xs) - var(--aui-line-height-s)) / 2);line-height:var(--aui-line-height-s);font-size:var(--aui-font-size-s)}.aui-option:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-option:hover,.aui-option.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-option.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-option__pointer{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--aui-icon-size-m);height:var(--aui-icon-size-m);margin-right:var(--aui-spacing-m);border-radius:var(--aui-border-radius-m);border:1px solid rgb(var(--aui-color-n-7));color:#fff;background-color:rgb(var(--aui-color-main-bg));position:relative;vertical-align:middle;transition:all .3s ease}.aui-option.cdk-keyboard-focused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-option.cdk-keyboard-focused .aui-option__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-option.isSelected .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-option.isIndeterminate .aui-option__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-option.isIndeterminate .aui-option__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-option.isSelected.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-option.isDisabled .aui-option__label{cursor:not-allowed}.aui-option.isDisabled .aui-option__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-option:not(.isDisabled):hover .aui-option__pointer,.aui-option:not(.isDisabled).isFocused .aui-option__pointer{border-color:rgb(var(--aui-color-primary))}.aui-option-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-option-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-option-container__content{max-height:calc(var(--aui-inline-height-m) * 10);position:relative;overflow:auto}.aui-option-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-option-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-option-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-option-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-option-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-option-container--small .aui-option-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-option-container--small .aui-option-container__placeholder{font-size:var(--aui-font-size-s)}.aui-multi-select{display:inline-block;position:relative;width:100%;color:rgb(var(--aui-color-main-text));vertical-align:middle}.aui-multi-select:hover{cursor:text}.aui-multi-select .aui-tag{max-width:100%}.aui-multi-select.isDisabled{background-color:rgb(var(--aui-color-n-8));border-color:rgb(var(--aui-color-n-7));cursor:not-allowed}.aui-multi-select.isDisabled .aui-tag{color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-multi-select__placeholder{display:inline-block;width:100%;color:rgb(var(--aui-color-placeholder-text));vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;right:0;left:0;padding-left:inherit;padding-right:inherit;margin-left:1px}.aui-multi-select__placeholder[hidden]{display:none}.aui-multi-select__mirror{opacity:0;left:0;z-index:-99;position:absolute;padding-left:1px}.aui-multi-select--large{min-height:var(--aui-inline-height-l);padding:calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--large .aui-tag{margin:0 4px calc((var(--aui-inline-height-l) - 20px) / 2 - 1px) 0}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);padding:calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--medium .aui-tag{margin:0 4px calc((var(--aui-inline-height-m) - 20px) / 2 - 1px) 0}.aui-multi-select--small{min-height:var(--aui-inline-height-s);padding:calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--small .aui-tag{margin:0 4px calc((var(--aui-inline-height-s) - 20px) / 2 - 1px) 0}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);padding:calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) var(--aui-inline-padding-xs) 0;font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-multi-select--mini .aui-tag{margin:0 4px calc((var(--aui-inline-height-xs) - 20px) / 2 - 1px) 0}.aui-multi-select__suffix{position:absolute;top:50%;right:var(--aui-inline-padding-xs);transform:translateY(-50%)}.aui-multi-select .aui-tag.aui-multi-select__input{margin-right:0;padding:0;width:1em;max-width:100%;border:none;outline:none;background:none;color:rgb(var(--aui-color-main-text));font-family:inherit;font-size:inherit}.aui-multi-select .aui-tag.aui-multi-select__input--hidden{opacity:0;width:0;padding:0;margin:0;position:absolute}aui-multi-select.ng-invalid.ng-dirty .aui-input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input,.ng-submitted aui-multi-select.ng-invalid .aui-input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input{border-color:rgb(var(--aui-color-red))!important}:root aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,:root aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,:root .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=light] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=light] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=system] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=system] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input:focus,html[aui-theme-mode=dark] aui-multi-select.ng-invalid.ng-dirty .aui-tags-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-multi-select.ng-invalid .aui-tags-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}aui-multi-select.ng-invalid.ng-dirty .aui-input .aui-tags-input__input,aui-multi-select.ng-invalid.ng-dirty .aui-tags-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-input .aui-tags-input__input,.ng-submitted aui-multi-select.ng-invalid .aui-tags-input .aui-tags-input__input{color:rgb(var(--aui-color-red))}.aui-multi-select--large{min-height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-l) + 1px)}.aui-multi-select--large .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-l)}.aui-multi-select--medium{min-height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--medium .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--small{min-height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-m) + 1px)}.aui-multi-select--small .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-m)}.aui-multi-select--mini{min-height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);padding-right:calc(var(--aui-inline-padding-xs) * 2 + var(--aui-icon-size-s) + 1px)}.aui-multi-select--mini .aui-multi-select__suffix{right:calc(var(--aui-inline-padding-xs) + 1px);font-size:var(--aui-icon-size-s)}.aui-multi-select__suffix{position:absolute;top:50%;transform:translateY(-50%)}.aui-multi-select__icon-container{display:block;position:relative}.aui-multi-select.isDisabled .aui-multi-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-multi-select__clear{display:none}.aui-multi-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-multi-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__indicator{display:none}.aui-multi-select.isClearable:not(.isDisabled):hover .aui-multi-select__clear{display:flex}.aui-multi-select.withHeightLimit{overflow:auto;position:static}.aui-multi-select.withHeightLimit::-webkit-scrollbar{width:4px;height:4px}.aui-multi-select.withHeightLimit::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-multi-select.withHeightLimit::-webkit-scrollbar-corner{background-color:transparent}.aui-multi-select .aui-tag--info{background-color:rgb(var(--aui-color-n-10))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { tagClassFn: [{
                 type: Input
             }], maxRowCount: [{
@@ -10101,7 +10166,7 @@ class StatusBarComponent {
     }
 }
 StatusBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StatusBarComponent, selector: "aui-status-bar", inputs: { status: "status", size: "size", template: "template" }, outputs: { statusClick: "statusClick" }, ngImport: i0, template: "<div [class]=\"bem.block(size)\">\n  <ng-container *ngFor=\"let item of status\">\n    <div\n      *ngIf=\"item.scale\"\n      [ngClass]=\"[bem.element('chunk', item.type), item.class || '']\"\n      [style.width]=\"item.scale * 100 + '%'\"\n      (click)=\"statusClick.emit(item)\"\n      [auiTooltip]=\"template\"\n      [auiTooltipContext]=\"item\"\n    ></div>\n  </ng-container>\n</div>\n", styles: [".aui-status-bar{display:inline-flex;overflow:hidden;width:100%;vertical-align:middle;border-radius:5px}.aui-status-bar--medium{height:10px}.aui-status-bar--small{height:8px;border-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.aui-status-bar__chunk{min-width:2px;height:100%;flex:1 1 1;border-radius:var(--aui-border-radius-m)}.aui-status-bar__chunk:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.aui-status-bar__chunk:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.aui-status-bar__chunk--primary{background-color:rgb(var(--aui-color-primary))}.aui-status-bar__chunk--primary:hover{background-color:rgb(var(--aui-color-p-2))}.aui-status-bar__chunk--success{background-color:rgb(var(--aui-color-green))}.aui-status-bar__chunk--success:hover{background-color:rgb(var(--aui-color-g-2))}.aui-status-bar__chunk--warning{background-color:rgb(var(--aui-color-yellow))}.aui-status-bar__chunk--warning:hover{background-color:rgb(var(--aui-color-y-2))}.aui-status-bar__chunk--error{background-color:rgb(var(--aui-color-red))}.aui-status-bar__chunk--error:hover{background-color:rgb(var(--aui-color-r-2))}.aui-status-bar__chunk--info{background-color:rgb(var(--aui-color-n-4))}.aui-status-bar__chunk--info:hover{background-color:rgb(var(--aui-color-n-6))}.aui-status-bar__chunk--pending{height:var(--aui-inline-height-m);animation:pending .5s linear infinite;background:repeating-linear-gradient(-60deg,rgb(var(--aui-color-b-5)),rgb(var(--aui-color-b-5)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-m))}.aui-status-bar__chunk+.aui-status-bar__chunk{margin-left:var(--aui-spacing-xs)}@keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: StatusBarComponent, selector: "aui-status-bar", inputs: { status: "status", size: "size", template: "template" }, outputs: { statusClick: "statusClick" }, ngImport: i0, template: "<div [class]=\"bem.block(size)\">\n  <ng-container *ngFor=\"let item of status\">\n    <div\n      *ngIf=\"item.scale\"\n      [ngClass]=\"[bem.element('chunk', item.type), item.class || '']\"\n      [style.width]=\"item.scale * 100 + '%'\"\n      (click)=\"statusClick.emit(item)\"\n      [auiTooltip]=\"template\"\n      [auiTooltipContext]=\"item\"\n    ></div>\n  </ng-container>\n</div>\n", styles: [".aui-status-bar{display:inline-flex;overflow:hidden;width:100%;vertical-align:middle;border-radius:5px}.aui-status-bar--medium{height:10px}.aui-status-bar--small{height:8px;border-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.aui-status-bar__chunk{min-width:2px;height:100%;flex:1 1 1;border-radius:var(--aui-border-radius-m)}.aui-status-bar__chunk:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.aui-status-bar__chunk:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.aui-status-bar__chunk--primary{background-color:rgb(var(--aui-color-primary))}.aui-status-bar__chunk--primary:hover{background-color:rgb(var(--aui-color-p-2))}.aui-status-bar__chunk--success{background-color:rgb(var(--aui-color-green))}.aui-status-bar__chunk--success:hover{background-color:rgb(var(--aui-color-g-2))}.aui-status-bar__chunk--warning{background-color:rgb(var(--aui-color-yellow))}.aui-status-bar__chunk--warning:hover{background-color:rgb(var(--aui-color-y-2))}.aui-status-bar__chunk--error{background-color:rgb(var(--aui-color-red))}.aui-status-bar__chunk--error:hover{background-color:rgb(var(--aui-color-r-2))}.aui-status-bar__chunk--info{background-color:rgb(var(--aui-color-n-4))}.aui-status-bar__chunk--info:hover{background-color:rgb(var(--aui-color-n-6))}.aui-status-bar__chunk--pending{height:var(--aui-inline-height-m);animation:pending .5s linear infinite;background:repeating-linear-gradient(-60deg,rgb(var(--aui-color-b-5)),rgb(var(--aui-color-b-5)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-m))}.aui-status-bar__chunk+.aui-status-bar__chunk{margin-left:var(--aui-spacing-xs)}@keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-status-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div [class]=\"bem.block(size)\">\n  <ng-container *ngFor=\"let item of status\">\n    <div\n      *ngIf=\"item.scale\"\n      [ngClass]=\"[bem.element('chunk', item.type), item.class || '']\"\n      [style.width]=\"item.scale * 100 + '%'\"\n      (click)=\"statusClick.emit(item)\"\n      [auiTooltip]=\"template\"\n      [auiTooltipContext]=\"item\"\n    ></div>\n  </ng-container>\n</div>\n", styles: [".aui-status-bar{display:inline-flex;overflow:hidden;width:100%;vertical-align:middle;border-radius:5px}.aui-status-bar--medium{height:10px}.aui-status-bar--small{height:8px;border-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.aui-status-bar--small .aui-status-bar__chunk:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.aui-status-bar__chunk{min-width:2px;height:100%;flex:1 1 1;border-radius:var(--aui-border-radius-m)}.aui-status-bar__chunk:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.aui-status-bar__chunk:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.aui-status-bar__chunk--primary{background-color:rgb(var(--aui-color-primary))}.aui-status-bar__chunk--primary:hover{background-color:rgb(var(--aui-color-p-2))}.aui-status-bar__chunk--success{background-color:rgb(var(--aui-color-green))}.aui-status-bar__chunk--success:hover{background-color:rgb(var(--aui-color-g-2))}.aui-status-bar__chunk--warning{background-color:rgb(var(--aui-color-yellow))}.aui-status-bar__chunk--warning:hover{background-color:rgb(var(--aui-color-y-2))}.aui-status-bar__chunk--error{background-color:rgb(var(--aui-color-red))}.aui-status-bar__chunk--error:hover{background-color:rgb(var(--aui-color-r-2))}.aui-status-bar__chunk--info{background-color:rgb(var(--aui-color-n-4))}.aui-status-bar__chunk--info:hover{background-color:rgb(var(--aui-color-n-6))}.aui-status-bar__chunk--pending{height:var(--aui-inline-height-m);animation:pending .5s linear infinite;background:repeating-linear-gradient(-60deg,rgb(var(--aui-color-b-5)),rgb(var(--aui-color-b-5)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-s),rgb(var(--aui-color-b-6)) var(--aui-spacing-m))}.aui-status-bar__chunk+.aui-status-bar__chunk{margin-left:var(--aui-spacing-xs)}@keyframes pending{0%{transform:translateY(-50%)}to{transform:translateY(0)}}\n"] }]
@@ -11700,17 +11765,19 @@ class TreeSelectComponent extends CommonFormControl {
     updatePosition() {
         this.tooltipRef.updatePosition();
     }
-    onShowNodes() {
-        this.containerWidth = this.selectRef.nativeElement.offsetWidth + 'px';
-        this.show.emit();
-        this.cdr.detectChanges();
-    }
-    onHideNodes() {
-        if (this.onTouched) {
-            this.onTouched();
+    onVisibleNodes(visible) {
+        if (visible) {
+            this.containerWidth = this.selectRef.nativeElement.offsetWidth + 'px';
+            this.show.emit();
+            this.cdr.detectChanges();
+        }
+        else {
+            if (this.onTouched) {
+                this.onTouched();
+            }
+            this.filterString = '';
+            this.hide.emit();
         }
-        this.filterString = '';
-        this.hide.emit();
     }
     onInput(event) {
         const value = event.target.value;
@@ -11791,7 +11858,7 @@ TreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => TreeSelectComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, static: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true, static: true }, { propertyName: "nodeListRef", first: true, predicate: ["nodeListRef"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"aui-tree-select\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowNodes()\"\n  (auiTooltipHide)=\"onHideNodes()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeOption()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-tree-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-tree-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-tree-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #nodeListRef\n      class=\"aui-tree-node-container__content\"\n    >\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-tree-node-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10);position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-tree-node-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-tree-node-container--small .aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-tree-node-container--small .aui-tree-node-container__placeholder{font-size:var(--aui-font-size-s)}.aui-tree-select{display:inline-block;position:relative;width:100%}.aui-tree-select__icon-container{display:block;position:relative}.aui-tree-select.isDisabled .aui-tree-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-tree-select__clear{display:none}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__indicator{display:none}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__clear{display:flex}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:rgb(var(--aui-color-n-9));cursor:text}aui-tree-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-tree-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: i0.forwardRef(function () { return InputGroupComponent; }), selector: "aui-input-group" }, { type: i0.forwardRef(function () { return InputComponent; }), selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: i0.forwardRef(function () { return IconComponent; }), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: i0.forwardRef(function () { return TreeNodeComponent; }), selector: "aui-tree-node", inputs: ["nodeData", "leafOnly"] }], directives: [{ type: i0.forwardRef(function () { return TooltipDirective; }), selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { type: i0.forwardRef(function () { return InputSuffixDirective; }), selector: "[auiInputSuffix]" }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, static: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true, static: true }, { propertyName: "nodeListRef", first: true, predicate: ["nodeListRef"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"aui-tree-select\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleNodes($event)\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeOption()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-tree-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-tree-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-tree-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #nodeListRef\n      class=\"aui-tree-node-container__content\"\n    >\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-tree-node-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10);position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-tree-node-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-tree-node-container--small .aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-tree-node-container--small .aui-tree-node-container__placeholder{font-size:var(--aui-font-size-s)}.aui-tree-select{display:inline-block;position:relative;width:100%}.aui-tree-select__icon-container{display:block;position:relative}.aui-tree-select.isDisabled .aui-tree-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-tree-select__clear{display:none}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__indicator{display:none}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__clear{display:flex}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:rgb(var(--aui-color-n-9));cursor:text}aui-tree-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-tree-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: i0.forwardRef(function () { return InputGroupComponent; }), selector: "aui-input-group" }, { type: i0.forwardRef(function () { return InputComponent; }), selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: i0.forwardRef(function () { return IconComponent; }), selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: i0.forwardRef(function () { return TreeNodeComponent; }), selector: "aui-tree-node", inputs: ["nodeData", "leafOnly"] }], directives: [{ type: i0.forwardRef(function () { return TooltipDirective; }), selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiDisableAnimation"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { type: i0.forwardRef(function () { return InputSuffixDirective; }), selector: "[auiInputSuffix]" }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TreeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-tree-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, providers: [
@@ -11800,7 +11867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: forwardRef(() => TreeSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"aui-tree-select\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowNodes()\"\n  (auiTooltipHide)=\"onHideNodes()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeOption()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-tree-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-tree-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-tree-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #nodeListRef\n      class=\"aui-tree-node-container__content\"\n    >\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-tree-node-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10);position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-tree-node-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-tree-node-container--small .aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-tree-node-container--small .aui-tree-node-container__placeholder{font-size:var(--aui-font-size-s)}.aui-tree-select{display:inline-block;position:relative;width:100%}.aui-tree-select__icon-container{display:block;position:relative}.aui-tree-select.isDisabled .aui-tree-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-tree-select__clear{display:none}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__indicator{display:none}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__clear{display:flex}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:rgb(var(--aui-color-n-9));cursor:text}aui-tree-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-tree-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
+                    ], template: "<div\n  class=\"aui-tree-select\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  [auiDisableAnimation]=\"true\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipVisibleChange)=\"onVisibleNodes($event)\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-tree-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [value]=\"getInputValue()\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"getPlaceholder()\"\n      [readonly]=\"inputReadonly\"\n      (input)=\"onInput($event)\"\n      (blur)=\"closeOption()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n    <span\n      auiInputSuffix\n      class=\"aui-tree-select__icon-container\"\n    >\n      <aui-icon\n        class=\"aui-tree-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-tree-select__clear\"\n        icon=\"xmark_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-tree-node-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div\n      #nodeListRef\n      class=\"aui-tree-node-container__content\"\n    >\n      <aui-tree-node\n        *ngFor=\"let data of nodesData; trackBy: trackByLabel\"\n        [nodeData]=\"data\"\n        [leafOnly]=\"leafOnly\"\n      ></aui-tree-node>\n    </div>\n    <div\n      *ngIf=\"!getVisibleNodeCount()\"\n      class=\"aui-tree-node-container__placeholder\"\n    >\n      <ng-content select=\"aui-tree-node-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-tree-node-container{padding:8px 0;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-tree-node-container{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10);position:relative;overflow:auto}.aui-tree-node-container__content::-webkit-scrollbar{width:4px;height:4px}.aui-tree-node-container__content::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-tree-node-container__content::-webkit-scrollbar-corner{background-color:transparent}.aui-tree-node-container__content .divider{border:none;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-tree-node-container__placeholder{color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m);text-align:center}.aui-tree-node-container--small .aui-tree-node-container__content{max-height:calc(var(--aui-inline-height-s) * 10)}.aui-tree-node-container--small .aui-tree-node-container__placeholder{font-size:var(--aui-font-size-s)}.aui-tree-select{display:inline-block;position:relative;width:100%}.aui-tree-select__icon-container{display:block;position:relative}.aui-tree-select.isDisabled .aui-tree-select__icon-container{color:rgb(var(--aui-color-n-4))}.aui-tree-select__clear{display:none}.aui-tree-select__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-tree-select__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__indicator{display:none}.aui-tree-select.isClearable:not(.isDisabled):hover .aui-tree-select__clear{display:flex}.aui-tree-select:not(.isDisabled):hover .aui-input{border-color:rgb(var(--aui-color-primary))}.aui-tree-select__input.aui-input[readonly]:not([disabled]){background-color:rgb(var(--aui-color-n-9));cursor:text}aui-tree-select.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-tree-select.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,:root aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,:root .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-tree-select.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-tree-select.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
         }], propDecorators: { nodesData: [{
                 type: Input
             }], loading: [{