@alauda/ui 7.2.1-beta.0 → 7.2.1-beta.10

package/fesm2022/alauda-ui.mjs

@@ -1,6 +1,6 @@
 import { CdkAccordion, CdkAccordionItem, CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, SkipSelf, Optional, Input, HostBinding, Injectable, Pipe, booleanAttribute, TemplateRef, Inject, NgModule, Directive, ContentChild, EventEmitter, Output, ElementRef, ContentChildren, ChangeDetectorRef, ViewChild, HostListener, Host, forwardRef, InjectionToken, isDevMode, numberAttribute, Injector, Type, ViewContainerRef, ViewChildren } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, SkipSelf, Optional, Input, HostBinding, Injectable, Pipe, booleanAttribute, TemplateRef, Inject, NgModule, Directive, ContentChild, EventEmitter, Output, ElementRef, ContentChildren, ChangeDetectorRef, forwardRef, ViewChild, HostListener, Host, InjectionToken, isDevMode, numberAttribute, Injector, Type, ViewContainerRef, ViewChildren } from '@angular/core';
 import { DOCUMENT, NgIf, NgClass, CommonModule, NgTemplateOutlet, NgFor, AsyncPipe, DecimalPipe, NgStyle, DatePipe, NgComponentOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import { ReplaySubject, distinctUntilChanged, Subject, takeUntil, Observable, share, startWith, map, filter, take, merge, fromEvent, combineLatest, debounceTime, switchMap, of, EMPTY, tap, BehaviorSubject, withLatestFrom, delay, first, throttleTime, firstValueFrom, NEVER, observeOn, animationFrameScheduler, repeat, takeWhile, endWith, Subscription } from 'rxjs';
 import * as i1 from '@angular/common/http';
@@ -20,6 +20,7 @@ import { ControlContainer, NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$2 from '@angular/cdk/bidi';
 import * as i1$5 from '@angular/cdk/table';
 import { CdkTable, CDK_TABLE, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, CdkTableModule, CDK_TABLE_TEMPLATE, CdkCellDef, CdkCell, CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkHeaderRowDef, CdkHeaderRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkRow } from '@angular/cdk/table';
@@ -1221,13 +1222,16 @@ class SuggestionComponent {
         this.focused = false;
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SuggestionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AutocompleteComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SuggestionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: forwardRef(() => AutocompleteComponent) }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.3", type: SuggestionComponent, isStandalone: true, selector: "aui-suggestion", inputs: { value: "value", disabled: ["disabled", "disabled", coerceAttrBoolean] }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #elRef\n  [hidden]=\"!(visible$ | async)\"\n  [class]=\"bem.block('medium')\"\n  [class.isDisabled]=\"disabled\"\n  [class.isSelected]=\"selected$ | async\"\n  [class.isFocused]=\"focused\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aui-suggestion{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-suggestion--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-suggestion--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-suggestion--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-suggestion--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-suggestion:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-suggestion:hover,.aui-suggestion.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-suggestion.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-suggestion__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-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-suggestion.isSelected .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isIndeterminate .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-suggestion.isIndeterminate .aui-suggestion__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isSelected.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-suggestion.isDisabled .aui-suggestion__label{cursor:not-allowed}.aui-suggestion.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-suggestion:not(.isDisabled):hover .aui-suggestion__pointer,.aui-suggestion:not(.isDisabled).isFocused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary))}.aui-suggestion__divider{display:block;width:100%;height:1px;background-color:rgb(var(--aui-color-divider))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: SuggestionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-suggestion', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, imports: [AsyncPipe], template: "<div\n  #elRef\n  [hidden]=\"!(visible$ | async)\"\n  [class]=\"bem.block('medium')\"\n  [class.isDisabled]=\"disabled\"\n  [class.isSelected]=\"selected$ | async\"\n  [class.isFocused]=\"focused\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".aui-suggestion{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-suggestion--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-suggestion--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-suggestion--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-suggestion--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-suggestion:not(.isMulti).isSelected{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-suggestion:hover,.aui-suggestion.isFocused{background-color:rgb(var(--aui-color-p-6))}.aui-suggestion.isDisabled{color:rgb(var(--aui-color-n-6));cursor:not-allowed}.aui-suggestion__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-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary))}:root .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-suggestion.cdk-keyboard-focused .aui-suggestion__pointer{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-suggestion.isSelected .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isIndeterminate .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-main-bg))}.aui-suggestion.isIndeterminate .aui-suggestion__pointer:before{content:\"\";display:block;width:8px;height:8px;border-radius:1px;background-color:rgb(var(--aui-color-primary))}.aui-suggestion.isSelected.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-p-4));background-color:rgb(var(--aui-color-p-4))}.aui-suggestion.isDisabled .aui-suggestion__label{cursor:not-allowed}.aui-suggestion.isDisabled .aui-suggestion__pointer{border-color:rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-suggestion:not(.isDisabled):hover .aui-suggestion__pointer,.aui-suggestion:not(.isDisabled).isFocused .aui-suggestion__pointer{border-color:rgb(var(--aui-color-primary))}.aui-suggestion__divider{display:block;width:100%;height:1px;background-color:rgb(var(--aui-color-divider))}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AutocompleteComponent }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AutocompleteComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => AutocompleteComponent)]
+                }] }]; }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -1302,10 +1306,10 @@ var TimingFunction;
     TimingFunction["easeInOut"] = "cubic-bezier(0.38, 0, 0.24, 1)";
 })(TimingFunction || (TimingFunction = {}));
 
-const duration = '160ms';
+const duration$1 = '160ms';
 const scale = [
     transition('scale-hide => scale-show, void => scale-show', [
-        animate(`${duration} ${TimingFunction.easeOut}`, keyframes([
+        animate(`${duration$1} ${TimingFunction.easeOut}`, keyframes([
             style({
                 opacity: 0,
                 transform: 'scale(0)',
@@ -1317,7 +1321,7 @@ const scale = [
         ])),
     ]),
     transition('scale-show => scale-hide, scale-show => void', [
-        animate(`${duration} ${TimingFunction.easeInOut}`, keyframes([
+        animate(`${duration$1} ${TimingFunction.easeInOut}`, keyframes([
             style({
                 opacity: 1,
                 transform: 'scale(1)',
@@ -1331,7 +1335,7 @@ const scale = [
 ];
 const scaleY = [
     transition('scaleY-hide => scaleY-show, void => scaleY-show', [
-        animate(`${duration} ${TimingFunction.easeOut}`, keyframes([
+        animate(`${duration$1} ${TimingFunction.easeOut}`, keyframes([
             style({
                 opacity: 0,
                 transform: 'scaleY(0)',
@@ -1343,7 +1347,7 @@ const scaleY = [
         ])),
     ]),
     transition('scaleY-show => scaleY-hide, scaleY-show => void', [
-        animate(`${duration} ${TimingFunction.easeInOut}`, keyframes([
+        animate(`${duration$1} ${TimingFunction.easeInOut}`, keyframes([
             style({
                 opacity: 1,
                 transform: 'scaleY(1)',
@@ -6245,6 +6249,11 @@ class DialogComponent {
     constructor(elementRef, render) {
         this.elementRef = elementRef;
         this.render = render;
+        fromEvent(window, 'resize')
+            .pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntilDestroyed())
+            .subscribe(() => {
+            this.overlayRef?.getConfig().scrollStrategy.enable();
+        });
     }
     attachComponentPortal(portal) {
         if (this.portalOutlet.hasAttached()) {
@@ -6763,9 +6772,287 @@ var DrawerSize;
     DrawerSize["Medium"] = "medium";
     DrawerSize["Big"] = "big";
 })(DrawerSize || (DrawerSize = {}));
+
+const DATA = new InjectionToken('drawer-data');
+const SIZE_MAPPER = {
+    [DrawerSize.Small]: 400,
+    [DrawerSize.Medium]: 600,
+    [DrawerSize.Big]: 800,
+};
+const DRAWER_OVERLAY_BACKDROP_CLASS = 'aui-drawer-mask';
+const duration = '300ms';
+class DrawerInternalComponent {
+    cdr;
+    injector;
+    bodyPortalOutlet;
+    mask;
+    animationStep$ = new Subject();
+    options;
+    showHide = 'hide';
+    maskVisible;
+    get drawerClasses() {
+        return {
+            'aui-drawer': true,
+            hasDivider: this.options.divider,
+            ...(this.options.drawerClass
+                ? { [this.options.drawerClass]: true }
+                : null),
+        };
+    }
+    get width() {
+        return (this.options.width || SIZE_MAPPER[this.options.size || DrawerSize.Medium]);
+    }
+    isTemplateRef = isTemplateRef;
+    constructor(cdr, injector) {
+        this.cdr = cdr;
+        this.injector = injector;
+    }
+    ngAfterViewInit() {
+        this.attachBodyContent();
+    }
+    attachBodyContent() {
+        this.bodyPortalOutlet?.dispose();
+        const content = this.options.content;
+        if (content instanceof Type) {
+            const componentPortal = new ComponentPortal(content, null, Injector.create({
+                providers: [
+                    {
+                        provide: DATA,
+                        useValue: this.options.contentParams,
+                    },
+                ],
+                parent: this.injector,
+            }));
+            const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
+            Object.assign(componentRef.instance, this.options.contentParams);
+            componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    onAnimation(event) {
+        const { phaseName, toState } = event;
+        if (['show', 'hide'].includes(toState)) {
+            const step = [
+                toState,
+                phaseName.charAt(0).toUpperCase() + phaseName.slice(1),
+            ].join('');
+            this.animationStep$.next(step);
+            const backdropElement = this.mask?.nativeElement;
+            if (backdropElement) {
+                const enters = [
+                    `${DRAWER_OVERLAY_BACKDROP_CLASS}-enter`,
+                    `${DRAWER_OVERLAY_BACKDROP_CLASS}-enter-active`,
+                ];
+                const leaves = [
+                    `${DRAWER_OVERLAY_BACKDROP_CLASS}-leave`,
+                    `${DRAWER_OVERLAY_BACKDROP_CLASS}-leave-active`,
+                ];
+                if (step === 'showStart') {
+                    this.maskVisible = true;
+                    backdropElement.classList.add(...enters);
+                }
+                if (step === 'hideStart') {
+                    backdropElement.classList.add(...leaves);
+                }
+                if (step === 'hideDone') {
+                    this.maskVisible = false;
+                }
+                if (['showDone', 'hideDone'].includes(step)) {
+                    backdropElement.classList.remove(...enters, ...leaves);
+                }
+                this.cdr.markForCheck();
+            }
+        }
+    }
+    show() {
+        this.showHide = 'show';
+        this.cdr.markForCheck();
+    }
+    hide() {
+        this.showHide = 'hide';
+        this.cdr.markForCheck();
+    }
+    maskClick() {
+        if (this.options.maskClosable) {
+            this.hide();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerInternalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: "<div\n  #mask\n  class=\"aui-drawer-mask\"\n  *ngIf=\"options.mask\"\n  [class.isOpen]=\"maskVisible\"\n  (click)=\"maskClick()\"\n></div>\n<div\n  [style.marginTop]=\"options.offsetY\"\n  [ngClass]=\"drawerClasses\"\n  [@showHide]=\"showHide\"\n  (@showHide.start)=\"onAnimation($event)\"\n  (@showHide.done)=\"onAnimation($event)\"\n  [ngStyle]=\"{\n    width: width + 'px'\n  }\"\n>\n  <div class=\"aui-drawer__content\">\n    <div class=\"aui-drawer__body-wrapper\">\n      <div class=\"aui-drawer__header\">\n        <div class=\"aui-drawer__title\">\n          <ng-container\n            *ngIf=\"!isTemplateRef(options.title); else elseTemplate\"\n          >\n            {{ options.title }}\n          </ng-container>\n          <ng-template #elseTemplate>\n            <ng-container\n              *ngIf=\"options.title\"\n              [ngTemplateOutlet]=\"$any(options.title)\"\n              [ngTemplateOutletContext]=\"{ $implicit: options.contentParams }\"\n            ></ng-container>\n          </ng-template>\n        </div>\n        <aui-icon\n          *ngIf=\"options.showClose\"\n          class=\"aui-drawer__close\"\n          icon=\"xmark\"\n          (click)=\"hide()\"\n        ></aui-icon>\n      </div>\n\n      <div\n        class=\"aui-drawer__body\"\n        cdkScrollable\n      >\n        <ng-template cdkPortalOutlet></ng-template>\n        <ng-container *ngIf=\"isTemplateRef(options.content)\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              $any(options.content);\n              context: { $implicit: options.contentParams }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div\n        *ngIf=\"options.footer\"\n        class=\"aui-drawer__footer\"\n      >\n        <ng-container *ngIf=\"!isTemplateRef(options.footer); else elseTemplate\">\n          {{ options.footer }}\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"options.footer\"\n            [ngTemplateOutlet]=\"$any(options.footer)\"\n            [ngTemplateOutletContext]=\"{ $implicit: options.contentParams }\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;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))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: CdkScrollable$1, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+            trigger('showHide', [
+                state('show', style({
+                    opacity: 1,
+                    transform: 'translateX(0)',
+                })),
+                state('hide, void', style({
+                    opacity: 0,
+                    transform: 'translateX(100%)',
+                })),
+                transition('hide => show, void => show', [
+                    animate(`${duration} ${TimingFunction.easeOut}`),
+                ]),
+                transition('show => hide, show => void', [
+                    animate(`${duration} ${TimingFunction.easeInOut}`),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        IconComponent,
+                        CdkScrollable$1,
+                        PortalModule,
+                    ], animations: [
+                        trigger('showHide', [
+                            state('show', style({
+                                opacity: 1,
+                                transform: 'translateX(0)',
+                            })),
+                            state('hide, void', style({
+                                opacity: 0,
+                                transform: 'translateX(100%)',
+                            })),
+                            transition('hide => show, void => show', [
+                                animate(`${duration} ${TimingFunction.easeOut}`),
+                            ]),
+                            transition('show => hide, show => void', [
+                                animate(`${duration} ${TimingFunction.easeInOut}`),
+                            ]),
+                        ]),
+                    ], template: "<div\n  #mask\n  class=\"aui-drawer-mask\"\n  *ngIf=\"options.mask\"\n  [class.isOpen]=\"maskVisible\"\n  (click)=\"maskClick()\"\n></div>\n<div\n  [style.marginTop]=\"options.offsetY\"\n  [ngClass]=\"drawerClasses\"\n  [@showHide]=\"showHide\"\n  (@showHide.start)=\"onAnimation($event)\"\n  (@showHide.done)=\"onAnimation($event)\"\n  [ngStyle]=\"{\n    width: width + 'px'\n  }\"\n>\n  <div class=\"aui-drawer__content\">\n    <div class=\"aui-drawer__body-wrapper\">\n      <div class=\"aui-drawer__header\">\n        <div class=\"aui-drawer__title\">\n          <ng-container\n            *ngIf=\"!isTemplateRef(options.title); else elseTemplate\"\n          >\n            {{ options.title }}\n          </ng-container>\n          <ng-template #elseTemplate>\n            <ng-container\n              *ngIf=\"options.title\"\n              [ngTemplateOutlet]=\"$any(options.title)\"\n              [ngTemplateOutletContext]=\"{ $implicit: options.contentParams }\"\n            ></ng-container>\n          </ng-template>\n        </div>\n        <aui-icon\n          *ngIf=\"options.showClose\"\n          class=\"aui-drawer__close\"\n          icon=\"xmark\"\n          (click)=\"hide()\"\n        ></aui-icon>\n      </div>\n\n      <div\n        class=\"aui-drawer__body\"\n        cdkScrollable\n      >\n        <ng-template cdkPortalOutlet></ng-template>\n        <ng-container *ngIf=\"isTemplateRef(options.content)\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              $any(options.content);\n              context: { $implicit: options.contentParams }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <div\n        *ngIf=\"options.footer\"\n        class=\"aui-drawer__footer\"\n      >\n        <ng-container *ngIf=\"!isTemplateRef(options.footer); else elseTemplate\">\n          {{ options.footer }}\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"options.footer\"\n            [ngTemplateOutlet]=\"$any(options.footer)\"\n            [ngTemplateOutletContext]=\"{ $implicit: options.contentParams }\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;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))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { bodyPortalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
+            }], mask: [{
+                type: ViewChild,
+                args: ['mask']
+            }] } });
+
 class DrawerRef {
+    drawerInstance;
+    result;
+    afterOpen$ = new Subject();
+    afterClosed$ = new Subject();
+    get afterOpen() {
+        return this.afterOpen$.asObservable();
+    }
+    get afterClosed() {
+        return this.afterClosed$.asObservable();
+    }
+    constructor(drawerInstance) {
+        this.drawerInstance = drawerInstance;
+        this.drawerInstance.animationStep$
+            .pipe(filter(step => step === 'hideDone'))
+            .subscribe(() => {
+            this.afterClosed$.next(this.result);
+            this.afterClosed$.complete();
+        });
+    }
+    open() {
+        this.drawerInstance.show();
+    }
+    close(result = null) {
+        this.result = result;
+        this.drawerInstance.hide();
+    }
 }
 
+const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
+class DrawerService {
+    overlay;
+    overlayRef;
+    options;
+    onDestroy$ = new Subject();
+    drawerRef;
+    invisible$ = new Subject();
+    drawerCpt;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    open(options) {
+        this.updateOptions(options);
+        this.createOverlay();
+        this.createDrawer();
+        this.drawerRef = new DrawerRef(this.drawerCpt.instance);
+        this.drawerRef.open();
+        return this.drawerRef;
+    }
+    updateOptions(options) {
+        this.options = options;
+    }
+    createOverlay() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create(this.getOverlayConfig());
+        }
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(this.invisible$))
+            .subscribe(event => {
+            if (this.overlayRef &&
+                this.options.hideOnClickOutside &&
+                event.target instanceof Node &&
+                !this.overlayRef.hostElement?.parentNode?.contains(event.target)) {
+                event.stopPropagation();
+                event.preventDefault();
+                this.drawerRef.close();
+            }
+        });
+        this.overlayRef.getConfig().scrollStrategy.enable();
+        if (this.options.mask) {
+            fromEvent(window, 'resize')
+                .pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.invisible$))
+                .subscribe(() => {
+                this.overlayRef.getConfig().scrollStrategy.enable();
+            });
+        }
+    }
+    createDrawer() {
+        if (this.drawerCpt) {
+            return;
+        }
+        const drawerCpt = this.overlayRef.attach(new ComponentPortal(DrawerInternalComponent));
+        drawerCpt.instance.options = this.options;
+        drawerCpt.instance.animationStep$.subscribe(step => {
+            if (step === 'hideDone') {
+                this.invisible$.next(null);
+                this.overlayRef?.getConfig().scrollStrategy.disable();
+            }
+        });
+        this.drawerCpt = drawerCpt;
+    }
+    getOverlayConfig() {
+        return new OverlayConfig({
+            panelClass: DRAWER_OVERLAY_CLASS,
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.options.mask
+                ? this.overlay.scrollStrategies.block()
+                : this.overlay.scrollStrategies.noop(),
+        });
+    }
+    disposeOverlay() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+        this.invisible$.next(null);
+        if (this.overlayRef) {
+            this.overlayRef.getConfig().scrollStrategy.disable();
+            this.overlayRef.dispose();
+        }
+        this.overlayRef = null;
+    }
+    ngOnDestroy() {
+        this.disposeOverlay();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
+
 class DrawerHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: DrawerHeaderDirective, isStandalone: true, selector: "[auiDrawerHeader]", ngImport: i0 });
@@ -6800,18 +7087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 }]
         }] });
 
-const DATA = new InjectionToken('drawer-data');
-const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
-const SIZE_MAPPER = {
-    [DrawerSize.Small]: 400,
-    [DrawerSize.Medium]: 600,
-    [DrawerSize.Big]: 800,
-};
-class DrawerComponent extends DrawerRef {
-    viewContainerRef;
-    overlay;
-    injector;
-    cdr;
+class DrawerComponent {
+    drawerService;
     title;
     footer;
     size = DrawerSize.Medium;
@@ -6824,188 +7101,48 @@ class DrawerComponent extends DrawerRef {
     mask;
     maskClosable;
     divider = true;
-    _value = SIZE_MAPPER[DrawerSize.Medium];
-    set width(value) {
-        this._value = value;
-    }
-    get width() {
-        return this._value;
-    }
-    get drawerClasses() {
-        return {
-            'aui-drawer': true,
-            hasDivider: this.divider,
-            ...(this.drawerClass ? { [this.drawerClass]: true } : null),
-        };
-    }
-    afterClosed$ = new Subject();
-    get afterClosed() {
-        return this.afterClosed$.asObservable();
-    }
-    afterOpen$ = new Subject();
-    get afterOpen() {
-        return this.afterOpen$.asObservable();
-    }
-    drawerViewInit = new EventEmitter();
+    width;
     close = new EventEmitter();
-    drawerTemplate;
-    bodyPortalOutlet;
     titleTemplate;
-    contentTemplate;
+    contentTemplateOrComponent;
     footerTemplate;
-    onDestroy$ = new Subject();
-    isTemplateRef = isTemplateRef;
-    componentInstance = null;
-    contentParams;
-    overlayRef;
-    portal;
-    templateContext = {};
-    get transform() {
-        return `translateX(${this.visible ? 0 : '100%'})`;
-    }
-    constructor(viewContainerRef, overlay, injector, cdr) {
-        super();
-        this.viewContainerRef = viewContainerRef;
-        this.overlay = overlay;
-        this.injector = injector;
-        this.cdr = cdr;
-    }
-    ngOnInit() {
-        this.attachOverlay();
-        this.updateBodyOverflow();
-        this.templateContext = { $implicit: this.contentParams };
-        if (this.mask) {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.onDestroy$))
-                .subscribe(() => {
-                this.overlayRef.getConfig().scrollStrategy.enable();
-            });
-        }
-        this.cdr.detectChanges();
+    drawerRef;
+    constructor(drawerService) {
+        this.drawerService = drawerService;
     }
     ngOnChanges(changes) {
         const { visible } = changes;
         if (visible) {
             const value = visible.currentValue;
             if (value) {
-                this.open();
+                this.drawerRef = this.drawerService.open(this);
+                this.drawerRef.afterClosed.pipe(first()).subscribe(res => {
+                    this.close.emit(res);
+                });
             }
             else if (!visible.firstChange) {
-                this.dispose();
+                this.drawerRef.close();
             }
         }
     }
     ngAfterViewInit() {
-        this.attachBodyContent();
-        setTimeout(() => {
-            this.drawerViewInit.emit();
-        }, 0);
-    }
-    attachOverlay() {
-        if (!this.overlayRef) {
-            this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
-            this.overlayRef = this.overlay.create(this.getOverlayConfig());
-        }
-        if (this.overlayRef) {
-            this.overlayRef.attach(this.portal);
-            this.overlayRef
-                .outsidePointerEvents()
-                .pipe(takeUntil(this.onDestroy$))
-                .subscribe(event => {
-                if (this.visible &&
-                    this.hideOnClickOutside &&
-                    event.target instanceof Node &&
-                    !this.overlayRef.hostElement?.parentNode?.contains(event.target)) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    this.dispose();
-                }
-            });
-        }
-    }
-    getOverlayConfig() {
-        return new OverlayConfig({
-            panelClass: DRAWER_OVERLAY_CLASS,
-            positionStrategy: this.overlay.position().global(),
-            scrollStrategy: this.mask
-                ? this.overlay.scrollStrategies.block()
-                : this.overlay.scrollStrategies.noop(),
-        });
-    }
-    attachBodyContent() {
-        this.bodyPortalOutlet?.dispose();
-        const content = this.content || this.contentTemplate;
-        if (content instanceof Type) {
-            const componentPortal = new ComponentPortal(content, null, Injector.create({
-                providers: [
-                    {
-                        provide: DATA,
-                        useValue: this.contentParams,
-                    },
-                ],
-                parent: this.injector,
-            }));
-            const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
-            this.componentInstance = componentRef.instance;
-            Object.assign(componentRef.instance, this.contentParams);
-            componentRef.changeDetectorRef.detectChanges();
-        }
-    }
-    updateBodyOverflow() {
-        if (this.overlayRef) {
-            if (this.visible) {
-                this.overlayRef.getConfig().scrollStrategy.enable();
-            }
-            else {
-                this.overlayRef.getConfig().scrollStrategy.disable();
-            }
-        }
-    }
-    open() {
-        this.visible = true;
-        this.afterOpen$.next();
-        this.afterOpen$.complete();
-        this.updateBodyOverflow();
-        this.cdr.markForCheck();
-    }
-    dispose(result = null) {
-        this.visible = false;
-        this.close.emit();
-        this.afterClosed$.next(result);
-        this.afterClosed$.complete();
-        this.updateBodyOverflow();
-        this.cdr.markForCheck();
+        this.title = this.title || this.titleTemplate;
+        this.content = this.content || this.contentTemplateOrComponent;
+        this.footer = this.footer || this.footerTemplate;
     }
-    disposeOverlay() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-        }
-        this.overlayRef = null;
-    }
-    maskClick() {
-        if (this.maskClosable && this.mask) {
-            this.dispose();
-        }
-    }
-    ngOnDestroy() {
-        this.onDestroy$.next();
-        this.disposeOverlay();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$2.Overlay }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerComponent, isStandalone: true, selector: "aui-drawer", inputs: { title: "title", footer: "footer", size: "size", offsetY: "offsetY", visible: "visible", content: "content", hideOnClickOutside: "hideOnClickOutside", showClose: "showClose", drawerClass: "drawerClass", mask: "mask", maskClosable: "maskClosable", divider: "divider", width: "width" }, outputs: { drawerViewInit: "drawerViewInit", close: "close" }, queries: [{ propertyName: "titleTemplate", first: true, predicate: DrawerHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplate", first: true, predicate: DrawerContentDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true, static: true }, { propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTemplate>\n  <div\n    *ngIf=\"mask\"\n    class=\"aui-drawer-mask\"\n    [class.isOpen]=\"visible\"\n    (click)=\"maskClick()\"\n  ></div>\n  <div\n    [style.marginTop]=\"offsetY\"\n    [ngClass]=\"drawerClasses\"\n    [class.isOpen]=\"visible\"\n    [ngStyle]=\"{\n      transform: transform,\n      width: width + 'px'\n    }\"\n  >\n    <div class=\"aui-drawer__content\">\n      <div class=\"aui-drawer__body-wrapper\">\n        <div class=\"aui-drawer__header\">\n          <div class=\"aui-drawer__title\">\n            <ng-container\n              *ngIf=\"!isTemplateRef(title || titleTemplate); else elseTemplate\"\n            >\n              {{ title }}\n            </ng-container>\n            <ng-template #elseTemplate>\n              <ng-container\n                *ngIf=\"title || titleTemplate\"\n                [ngTemplateOutlet]=\"$any(title || titleTemplate)\"\n                [ngTemplateOutletContext]=\"templateContext\"\n              ></ng-container>\n            </ng-template>\n          </div>\n          <aui-icon\n            *ngIf=\"showClose\"\n            class=\"aui-drawer__close\"\n            icon=\"xmark\"\n            (click)=\"dispose()\"\n          ></aui-icon>\n        </div>\n\n        <div\n          class=\"aui-drawer__body\"\n          cdkScrollable\n        >\n          <ng-template cdkPortalOutlet></ng-template>\n          <ng-container *ngIf=\"isTemplateRef(content || contentTemplate)\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                $any(content || contentTemplate);\n                context: templateContext\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <div\n          *ngIf=\"footer || footerTemplate\"\n          class=\"aui-drawer__footer\"\n        >\n          <ng-container\n            *ngIf=\"!isTemplateRef(footer || footerTemplate); else elseTemplate\"\n          >\n            {{ footer }}\n          </ng-container>\n          <ng-template #elseTemplate>\n            <ng-container\n              *ngIf=\"footer || footerTemplate\"\n              [ngTemplateOutlet]=\"$any(footer || footerTemplate)\"\n              [ngTemplateOutletContext]=\"templateContext\"\n            ></ng-container>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}:root .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: CdkScrollable$1, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerComponent, isStandalone: true, selector: "aui-drawer", inputs: { title: "title", footer: "footer", size: "size", offsetY: "offsetY", visible: "visible", content: "content", hideOnClickOutside: "hideOnClickOutside", showClose: "showClose", drawerClass: "drawerClass", mask: "mask", maskClosable: "maskClosable", divider: "divider", width: "width" }, outputs: { close: "close" }, providers: [DrawerService], queries: [{ propertyName: "titleTemplate", first: true, predicate: DrawerHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplateOrComponent", first: true, predicate: DrawerContentDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aui-drawer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        NgClass,
-                        NgStyle,
-                        NgTemplateOutlet,
-                        IconComponent,
-                        CdkScrollable$1,
-                        PortalModule,
-                    ], template: "<ng-template #drawerTemplate>\n  <div\n    *ngIf=\"mask\"\n    class=\"aui-drawer-mask\"\n    [class.isOpen]=\"visible\"\n    (click)=\"maskClick()\"\n  ></div>\n  <div\n    [style.marginTop]=\"offsetY\"\n    [ngClass]=\"drawerClasses\"\n    [class.isOpen]=\"visible\"\n    [ngStyle]=\"{\n      transform: transform,\n      width: width + 'px'\n    }\"\n  >\n    <div class=\"aui-drawer__content\">\n      <div class=\"aui-drawer__body-wrapper\">\n        <div class=\"aui-drawer__header\">\n          <div class=\"aui-drawer__title\">\n            <ng-container\n              *ngIf=\"!isTemplateRef(title || titleTemplate); else elseTemplate\"\n            >\n              {{ title }}\n            </ng-container>\n            <ng-template #elseTemplate>\n              <ng-container\n                *ngIf=\"title || titleTemplate\"\n                [ngTemplateOutlet]=\"$any(title || titleTemplate)\"\n                [ngTemplateOutletContext]=\"templateContext\"\n              ></ng-container>\n            </ng-template>\n          </div>\n          <aui-icon\n            *ngIf=\"showClose\"\n            class=\"aui-drawer__close\"\n            icon=\"xmark\"\n            (click)=\"dispose()\"\n          ></aui-icon>\n        </div>\n\n        <div\n          class=\"aui-drawer__body\"\n          cdkScrollable\n        >\n          <ng-template cdkPortalOutlet></ng-template>\n          <ng-container *ngIf=\"isTemplateRef(content || contentTemplate)\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                $any(content || contentTemplate);\n                context: templateContext\n              \"\n            >\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <div\n          *ngIf=\"footer || footerTemplate\"\n          class=\"aui-drawer__footer\"\n        >\n          <ng-container\n            *ngIf=\"!isTemplateRef(footer || footerTemplate); else elseTemplate\"\n          >\n            {{ footer }}\n          </ng-container>\n          <ng-template #elseTemplate>\n            <ng-container\n              *ngIf=\"footer || footerTemplate\"\n              [ngTemplateOutlet]=\"$any(footer || footerTemplate)\"\n              [ngTemplateOutletContext]=\"templateContext\"\n            ></ng-container>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}:root .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$2.Overlay }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
+            args: [{
+                    selector: 'aui-drawer',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    providers: [DrawerService],
+                }]
+        }], ctorParameters: function () { return [{ type: DrawerService }]; }, propDecorators: { title: [{
                 type: Input
             }], footer: [{
                 type: Input
@@ -7031,20 +7168,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }], width: [{
                 type: Input
-            }], drawerViewInit: [{
-                type: Output
             }], close: [{
                 type: Output
-            }], drawerTemplate: [{
-                type: ViewChild,
-                args: ['drawerTemplate', { static: true }]
-            }], bodyPortalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: false }]
             }], titleTemplate: [{
                 type: ContentChild,
                 args: [DrawerHeaderDirective, { read: TemplateRef }]
-            }], contentTemplate: [{
+            }], contentTemplateOrComponent: [{
                 type: ContentChild,
                 args: [DrawerContentDirective, { read: TemplateRef }]
             }], footerTemplate: [{
@@ -7052,47 +7181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 args: [DrawerFooterDirective, { read: TemplateRef }]
             }] } });
 
-class DrawerService {
-    overlay;
-    drawerRef;
-    overlayRef;
-    unsubscribe$ = new Subject();
-    constructor(overlay) {
-        this.overlay = overlay;
-    }
-    open(options) {
-        this.drawerRef?.instance?.dispose();
-        this.createDrawer();
-        this.updateOptions(options);
-        return this.drawerRef?.instance;
-    }
-    updateOptions(options) {
-        Object.assign(this.drawerRef.instance, options);
-    }
-    createDrawer() {
-        this.overlayRef = this.overlay.create();
-        this.drawerRef = this.overlayRef.attach(new ComponentPortal(DrawerComponent));
-        this.drawerRef.instance.drawerViewInit
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.drawerRef.instance.open();
-        });
-        this.drawerRef.instance.afterClosed
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.overlayRef.dispose();
-            this.drawerRef = null;
-            this.unsubscribe$.next();
-            this.unsubscribe$.complete();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
-
 const COMMON = [
     DrawerComponent,
     DrawerHeaderDirective,
@@ -7108,7 +7196,7 @@ class DrawerModule {
             DrawerHeaderDirective,
             DrawerContentDirective,
             DrawerFooterDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, providers: [DrawerService], imports: [CommonModule, IconModule, OverlayModule, PortalModule, DrawerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, providers: [DrawerService], imports: [CommonModule, IconModule, OverlayModule, PortalModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
@@ -12348,5 +12436,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 }]
         }] });
 
-export { ACCORDION_MODULE, ANCHOR_MODULE, AUTOCOMPLETE_MODULE, AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, AutosizeDirective, BREADCRUMB_MODULE, BackTopComponent, BackTopModule, BaseDialogConfig, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CARD_MODULE, CHECKBOX_MODULE, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CssVarPipe, CustomAutoCompleteDirective, DATA, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerComponent, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogComponent, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DrawerComponent, DrawerContentDirective, DrawerFooterDirective, DrawerHeaderDirective, DrawerModule, DrawerRef, DrawerService, DrawerSize, DropdownActiveDirective, DropdownButtonComponent, DropdownDirective, DropdownModule, FORM_MODULE, FixedSizeTableVirtualScrollDirective, FixedSizeTableVirtualScrollStrategy, FixedSizeVirtualScrollDirective, FormDirective, FormItemAddonDirective, FormItemComponent, FormItemControlDirective, FormItemErrorDirective, FormItemHintDirective, FormItemLabelDirective, FormItemWidth, FormModule, HIDDEN_DELAY, HOUR, HOUR_ITEMS, I18NInterfaceToken, I18nModule, I18nPipe, I18nService, INLINE_ALERT_MODULE, INPUT_ERROR_KEY, INPUT_GROUP_MODULE, IconComponent, IconModule, IconRegisterService, IncludesDirective, InlineAlertComponent, InlineAlertModule, InlineAlertTitleDirective, InlineAlertType, InputAddonAfterDirective, InputAddonBeforeDirective, InputComponent, InputGroupComponent, InputModule, InputPrefixDirective, InputSuffixDirective, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuGroupComponent, MenuGroupTitleDirective, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NUMBER_INPUT_MODULE, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, RgbColorPipe, RgbaColorPipe, SECOND, SECOND_ITEMS, SELECT_MODULE, SORT_MODULE, ScrollingModule, SearchComponent, SectionComponent, SectionTitleDirective, SelectAllStatus, SelectComponent, SelectModule, Side, SortDirective, SortHeaderComponent, SortModule, StatusBarComponent, StatusBarModule, StatusBarSize, StatusType, StepState, StepsComponent, StepsModule, SubmenuComponent, SuggestionComponent, SuggestionGroupComponent, SuggestionGroupTitleDirective, SwitchComponent, SwitchModule, TABLE_MODULE, TABLE_OF_CONTENTS_MODULE, TABS_MODULE, TabBodyComponent, TabBodyPortalDirective, TabChangeEvent, TabComponent, TabContentDirective, TabContextService, TabGroupComponent, TabHeaderActiveIndicatorComponent, TabHeaderAddonDirective, TabHeaderComponent, TabLabelDirective, TabLabelWrapperDirective, TabSize, TabTitleDirective, TabType, TableCellDefDirective, TableCellDirective, TableColumnDefDirective, TableComponent, TableExpandButtonCellComponent, TableExpandPanelCellComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TablePlaceholderDefDirective, TablePlaceholderOutletDirective, TableRowComponent, TableRowDefDirective, TableScrollWrapperDirective, TableScrollableDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeModule, ThemePickerPipe, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyDirective, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualForOfDirective, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceString, cssVar, en, getAnchorTreeItems, getElementOffset, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isNumberValue, isString, isTemplateRef, isTimePickerModel, last, observeMutationOn, observeResizeOn, publishRef, rgbColor, rgbaColor, scrollIntoView, sleep, watchContentExist, zh };
+export { ACCORDION_MODULE, ANCHOR_MODULE, AUTOCOMPLETE_MODULE, AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, AutosizeDirective, BREADCRUMB_MODULE, BackTopComponent, BackTopModule, BaseDialogConfig, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CARD_MODULE, CHECKBOX_MODULE, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CssVarPipe, CustomAutoCompleteDirective, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerComponent, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogComponent, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DrawerComponent, DrawerContentDirective, DrawerFooterDirective, DrawerHeaderDirective, DrawerModule, DrawerRef, DrawerService, DrawerSize, DropdownActiveDirective, DropdownButtonComponent, DropdownDirective, DropdownModule, FORM_MODULE, FixedSizeTableVirtualScrollDirective, FixedSizeTableVirtualScrollStrategy, FixedSizeVirtualScrollDirective, FormDirective, FormItemAddonDirective, FormItemComponent, FormItemControlDirective, FormItemErrorDirective, FormItemHintDirective, FormItemLabelDirective, FormItemWidth, FormModule, HIDDEN_DELAY, HOUR, HOUR_ITEMS, I18NInterfaceToken, I18nModule, I18nPipe, I18nService, INLINE_ALERT_MODULE, INPUT_ERROR_KEY, INPUT_GROUP_MODULE, IconComponent, IconModule, IconRegisterService, IncludesDirective, InlineAlertComponent, InlineAlertModule, InlineAlertTitleDirective, InlineAlertType, InputAddonAfterDirective, InputAddonBeforeDirective, InputComponent, InputGroupComponent, InputModule, InputPrefixDirective, InputSuffixDirective, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuGroupComponent, MenuGroupTitleDirective, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NUMBER_INPUT_MODULE, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, RgbColorPipe, RgbaColorPipe, SECOND, SECOND_ITEMS, SELECT_MODULE, SORT_MODULE, ScrollingModule, SearchComponent, SectionComponent, SectionTitleDirective, SelectAllStatus, SelectComponent, SelectModule, Side, SortDirective, SortHeaderComponent, SortModule, StatusBarComponent, StatusBarModule, StatusBarSize, StatusType, StepState, StepsComponent, StepsModule, SubmenuComponent, SuggestionComponent, SuggestionGroupComponent, SuggestionGroupTitleDirective, SwitchComponent, SwitchModule, TABLE_MODULE, TABLE_OF_CONTENTS_MODULE, TABS_MODULE, TabBodyComponent, TabBodyPortalDirective, TabChangeEvent, TabComponent, TabContentDirective, TabContextService, TabGroupComponent, TabHeaderActiveIndicatorComponent, TabHeaderAddonDirective, TabHeaderComponent, TabLabelDirective, TabLabelWrapperDirective, TabSize, TabTitleDirective, TabType, TableCellDefDirective, TableCellDirective, TableColumnDefDirective, TableComponent, TableExpandButtonCellComponent, TableExpandPanelCellComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TablePlaceholderDefDirective, TablePlaceholderOutletDirective, TableRowComponent, TableRowDefDirective, TableScrollWrapperDirective, TableScrollableDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeModule, ThemePickerPipe, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyDirective, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualForOfDirective, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceString, cssVar, en, getAnchorTreeItems, getElementOffset, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isNumberValue, isString, isTemplateRef, isTimePickerModel, last, observeMutationOn, observeResizeOn, publishRef, rgbColor, rgbaColor, scrollIntoView, sleep, watchContentExist, zh };
 //# sourceMappingURL=alauda-ui.mjs.map