@ng-nest/ui 20.1.6 → 20.2.0

package/date-picker/index.d.ts

@@ -103,6 +103,13 @@ declare class XDatePickerProperty extends XDatePickerProperty_base {
      * @en_US Display Border
      */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN 输入框样式
+     * @en_US Input Style
+     */
+    readonly inputStyle: _angular_core.InputSignal<{
+        [style: string]: any;
+    } | undefined>;
     /**
      * @zh_CN 快捷选择按钮，自定义或直接设置今天（today）,昨天（yesterday）,明天（tomorrow）
      * @en_US Quick selection button, support today, yesterday, tomorrow
@@ -239,7 +246,7 @@ declare class XDatePickerProperty extends XDatePickerProperty_base {
      */
     readonly nodeEmit: _angular_core.OutputEmitterRef<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDatePickerProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDatePickerProperty, "x-date-picker-property", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "extraFooter": { "alias": "extraFooter"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "disabledTime": { "alias": "disabledTime"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "nodeEmit": "nodeEmit"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDatePickerProperty, "x-date-picker-property", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "extraFooter": { "alias": "extraFooter"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "disabledTime": { "alias": "disabledTime"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "nodeEmit": "nodeEmit"; }, never, never, true, never>;
 }
 /**
  * DatePicker Option
@@ -501,6 +508,13 @@ declare class XDateRangeProperty extends XDateRangeProperty_base {
      * @en_US Display Border
      */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN 输入框样式
+     * @en_US Input Style
+     */
+    readonly inputStyle: _angular_core.InputSignal<{
+        [style: string]: any;
+    } | undefined>;
     /**
      * @zh_CN 快捷选择按钮，自定义或直接设置本周（thisWeek）、上周（lastWeek）、下周（nextWeek）、本月（thisMonth）、上一月（lastMonth）、下一月（nextMonth）、本年（thisYear）、去年（lastYear）、明年（nextYear）
      * @en_US Quick selection button, support thisWeek, lastWeek, nextWeek, thisMonth, lastMonth, nextMonth, thisYear, lastYear, nextYear
@@ -622,7 +636,7 @@ declare class XDateRangeProperty extends XDateRangeProperty_base {
      */
     readonly nodeEmit: _angular_core.OutputEmitterRef<number[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDateRangeProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDateRangeProperty, "x-date-range-property", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "extraFooter": { "alias": "extraFooter"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "disabledTime": { "alias": "disabledTime"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "nodeEmit": "nodeEmit"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDateRangeProperty, "x-date-range-property", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "extraFooter": { "alias": "extraFooter"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "disabledTime": { "alias": "disabledTime"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "nodeEmit": "nodeEmit"; }, never, never, true, never>;
 }
 /**
  * DateRange Option
@@ -1395,7 +1409,8 @@ declare class XPickerYearProperty extends XProperty {
 }
 
 declare class XDatePickerPortalComponent implements AfterViewInit {
-    get getPlacement(): XPositionTopBottom | undefined;
+    animateEnter: string;
+    animateLeave: string;
     done(): void;
     start(): void;
     private i18n;
@@ -1805,7 +1820,8 @@ declare class XPickerDateComponent extends XPickerDateProperty implements OnChan
 }
 
 declare class XDateRangePortalComponent implements AfterViewInit {
-    get getPlacement(): XPositionTopBottom | undefined;
+    animateEnter: string;
+    animateLeave: string;
     done(): void;
     start(): void;
     datePipe: DatePipe;

package/dialog/index.d.ts

@@ -6,7 +6,6 @@ import * as _ng_nest_ui_core from '@ng-nest/ui/core';
 import { XTemplate, XPlace, XNumber, XStatus, XBoolean, XEffect, XProperty, XConfigService, XDialogConfig } from '@ng-nest/ui/core';
 import { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, ComponentType } from '@angular/cdk/portal';
-import { AnimationEvent } from '@angular/animations';
 import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDragHandle, CdkDrag, CdkDragEnd } from '@angular/cdk/drag-drop';
 import { OverlayRef, BlockScrollStrategy } from '@angular/cdk/overlay';
@@ -64,9 +63,10 @@ declare class XDialogRef<C> {
 
 declare class XDialogPortalComponent extends BasePortalOutlet {
     placement: _angular_core.ModelSignal<XDialogAnimationState>;
-    get getPlacement(): XDialogAnimationState;
-    done({ toState, totalTime }: AnimationEvent): void;
-    start({ toState, totalTime }: AnimationEvent): void;
+    get enimateEnter(): string;
+    get enimateLeave(): string;
+    done(event: AnimationEvent): void;
+    start(event: AnimationEvent): void;
     renderer: Renderer2;
     changeDetectorRef: ChangeDetectorRef;
     portalOutlet: _angular_core.Signal<CdkPortalOutlet>;
@@ -93,6 +93,7 @@ declare class XDialogPortalComponent extends BasePortalOutlet {
         [key: string]: any;
     };
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
     onDragEnded(event: CdkDragEnd): void;
@@ -397,9 +398,8 @@ type XDialogAnimationState = XPlace | 'void';
  * @en_US Dialog animation Event
  */
 interface XDialogAnimationEvent {
-    state: XDialogAnimationState;
-    action: 'start' | 'done';
-    totalTime: number;
+    animationName: string;
+    action: 'start' | 'end';
 }
 /**
  * @zh_CN 关闭的回调函数类型
@@ -494,9 +494,7 @@ declare class XDialogComponent extends XDialogProperty implements OnInit, AfterV
     onSize(): void;
     onMaximize(): void;
     onMinimize(): void;
-    moveDone($event: {
-        toState: string;
-    }): void;
+    moveDone($event: AnimationEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDialogComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDialogComponent, "x-dialog", never, {}, {}, never, ["*"], true, never>;
 }

package/drawer/index.d.ts

@@ -1,25 +1,23 @@
 import * as rxjs from 'rxjs';
 import { Subscription } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, ComponentRef, EmbeddedViewRef, InjectionToken, ViewContainerRef, AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import { InjectionToken, ViewContainerRef, AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import * as _ng_nest_ui_core from '@ng-nest/ui/core';
-import { XTemplate, XPosition, XNumber, XBoolean, XProperty, XDrawerConfig } from '@ng-nest/ui/core';
+import { XPosition, XTemplate, XNumber, XBoolean, XProperty, XDrawerConfig } from '@ng-nest/ui/core';
 import { XPortalOverlayRef } from '@ng-nest/ui/portal';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, ComponentType } from '@angular/cdk/portal';
-import { AnimationEvent } from '@angular/animations';
+import { Portal, CdkPortalOutlet, ComponentType } from '@angular/cdk/portal';
 import { OverlayRef } from '@angular/cdk/overlay';
 
-declare class XDrawerPortalComponent extends BasePortalOutlet {
+declare class XDrawerPortalComponent {
     _has: boolean;
-    placement?: XDrawerAnimationState;
-    done({ toState, totalTime }: AnimationEvent): void;
-    start({ toState, totalTime }: AnimationEvent): void;
+    placement: i0.InputSignal<XPosition | undefined>;
+    portal: Portal<any>;
+    get animateEnter(): string;
+    get animateLeave(): string;
     portalOutlet: i0.Signal<CdkPortalOutlet>;
-    animationChanged: EventEmitter<XDrawerAnimationEvent>;
-    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
-    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<XDrawerPortalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerPortalComponent, "x-drawer-portal", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XDrawerPortalComponent, "x-drawer-portal", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class XDrawerRef<C> {

package/dropdown/index.d.ts

@@ -1,10 +1,10 @@
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
-import { ViewContainerRef, ComponentRef, OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { ViewContainerRef, ComponentRef, OnInit, OnDestroy, ElementRef, SimpleChanges } from '@angular/core';
 import * as _ng_nest_ui_core from '@ng-nest/ui/core';
 import { XDataArray, XTrigger, XPlacement, XBoolean, XNumber, XSize, XPositionTopBottom } from '@ng-nest/ui/core';
-import { XListNode } from '@ng-nest/ui/list';
+import { XListNode, XListComponent } from '@ng-nest/ui/list';
 import { Subject } from 'rxjs';
 import { XPortalOverlayRef, XPortalService } from '@ng-nest/ui/portal';
 
@@ -71,6 +71,11 @@ declare class XDropdownProperty extends XDropdownProperty_base {
      * @en_US Hover delay trigger time, only trigger is the 'hover'
      */
     readonly hoverDelay: _angular_core.InputSignalWithTransform<number, XNumber>;
+    /**
+     * @zh_CN visible 参数控制显示/隐藏
+     * @en_US visible parameter controls display/hide
+     */
+    readonly visible: _angular_core.ModelSignal<boolean | null>;
     /**
      * @zh_CN 当前激活的菜单
      * @en_US The currently activated menu
@@ -87,7 +92,7 @@ declare class XDropdownProperty extends XDropdownProperty_base {
      */
     readonly nodeClick: _angular_core.OutputEmitterRef<XDropdownNode>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDropdownProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDropdownProperty, "x-dropdown-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "children": { "alias": "children"; "required": false; "isSignal": true; }; "portalMinWidth": { "alias": "portalMinWidth"; "required": false; "isSignal": true; }; "portalMaxWidth": { "alias": "portalMaxWidth"; "required": false; "isSignal": true; }; "portalMinHeight": { "alias": "portalMinHeight"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; "isSignal": true; }; "activatedId": { "alias": "activatedId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "activatedId": "activatedIdChange"; "nodeClick": "nodeClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDropdownProperty, "x-dropdown-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "children": { "alias": "children"; "required": false; "isSignal": true; }; "portalMinWidth": { "alias": "portalMinWidth"; "required": false; "isSignal": true; }; "portalMaxWidth": { "alias": "portalMaxWidth"; "required": false; "isSignal": true; }; "portalMinHeight": { "alias": "portalMinHeight"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "activatedId": { "alias": "activatedId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "activatedId": "activatedIdChange"; "nodeClick": "nodeClick"; }, never, never, true, never>;
 }
 /**
  * @zh_CN Dropdown 数据对象
@@ -108,7 +113,8 @@ type XDropdownTrigger = XTrigger;
 declare const XDropdownPortalPrefix = "x-dropdown-portal";
 
 declare class XDropdownPortalComponent {
-    get getPlacement(): XPositionTopBottom | undefined;
+    animateEnter: string;
+    animateLeave: string;
     done(): void;
     start(): void;
     data: _angular_core.InputSignal<XDropdownNode[]>;
@@ -119,20 +125,27 @@ declare class XDropdownPortalComponent {
     maxWidth: _angular_core.InputSignal<string | undefined>;
     minHeight: _angular_core.InputSignal<string | undefined>;
     maxHeight: _angular_core.InputSignal<string | undefined>;
+    level: _angular_core.InputSignal<number>;
+    parentPortalComponent: _angular_core.InputSignal<XDropdownPortalComponent | undefined>;
+    isKeyboardControlled: _angular_core.ModelSignal<boolean>;
     closed: _angular_core.OutputEmitterRef<void>;
     animating: _angular_core.OutputEmitterRef<boolean>;
     nodeClick: _angular_core.OutputEmitterRef<XDropdownNode>;
     portalHover: _angular_core.OutputEmitterRef<boolean>;
     portal: XPortalOverlayRef<XDropdownPortalComponent>;
     node: _angular_core.WritableSignal<XDropdownNode | null>;
-    openNode: _angular_core.WritableSignal<XDropdownNode | null>;
     timeoutHide: any;
+    list: _angular_core.Signal<XListComponent>;
     portalPlacement: _angular_core.WritableSignal<XPositionTopBottom | null>;
     childAnimating: _angular_core.WritableSignal<boolean>;
     activatedId: _angular_core.ModelSignal<any>;
     destroy: _angular_core.WritableSignal<boolean>;
+    closeSubject: Subject<void>;
+    keydownSubject: Subject<KeyboardEvent>;
+    active: _angular_core.WritableSignal<number>;
     private unSubject;
     private destroyRef;
+    activatedIdComputed: _angular_core.Signal<any>;
     mouseenter(): void;
     mouseleave(): void;
     portalService: XPortalService;
@@ -142,6 +155,7 @@ declare class XDropdownPortalComponent {
     portalOverlayRef: _angular_core.WritableSignal<OverlayRef | null>;
     constructor();
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     onNodeClick(node: XDropdownNode): void;
     portalAttached(): boolean | undefined;
     closePortal(): boolean;
@@ -150,11 +164,14 @@ declare class XDropdownPortalComponent {
     setInstance(): void;
     hover(hover: boolean): void;
     setPlacement(): _angular_cdk_overlay.PositionStrategy;
+    showPortal(node: XDropdownNode): void;
     onEnter(node: XDropdownNode): void;
     onLeave(): void;
-    changeOpenNode(open: boolean): void;
+    onActive(num: number): void;
+    onTabOut(): void;
+    findPathById(nodes: XDropdownNode[], id: number, currentPath?: XDropdownNode[]): XDropdownNode[] | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDropdownPortalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDropdownPortalComponent, "x-dropdown-portal", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "activatedId": { "alias": "activatedId"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "animating": "animating"; "nodeClick": "nodeClick"; "portalHover": "portalHover"; "activatedId": "activatedIdChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDropdownPortalComponent, "x-dropdown-portal", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "parentPortalComponent": { "alias": "parentPortalComponent"; "required": false; "isSignal": true; }; "isKeyboardControlled": { "alias": "isKeyboardControlled"; "required": false; "isSignal": true; }; "activatedId": { "alias": "activatedId"; "required": false; "isSignal": true; }; }, { "isKeyboardControlled": "isKeyboardControlledChange"; "closed": "closed"; "animating": "animating"; "nodeClick": "nodeClick"; "portalHover": "portalHover"; "activatedId": "activatedIdChange"; }, never, never, true, never>;
 }
 
 declare class XDropdownComponent extends XDropdownProperty implements OnInit, OnDestroy {
@@ -166,28 +183,34 @@ declare class XDropdownComponent extends XDropdownProperty implements OnInit, On
     nodes: _angular_core.Signal<XDropdownNode[]>;
     portal: XPortalOverlayRef<XDropdownPortalComponent>;
     timeoutHide: any;
-    visible: _angular_core.WritableSignal<boolean>;
     animating: _angular_core.WritableSignal<boolean>;
+    visibleClass: _angular_core.WritableSignal<boolean>;
     outsideClick: _angular_core.WritableSignal<boolean>;
+    isClickNodeLeaf: _angular_core.WritableSignal<boolean>;
     minWidth: _angular_core.WritableSignal<string>;
     hoverDelayUnsub: Subject<void>;
     closeSubject: Subject<void>;
+    keydownSubject: Subject<KeyboardEvent>;
+    isNullVisible: _angular_core.WritableSignal<boolean>;
     private realPlacement;
     portalComponent: _angular_core.WritableSignal<ComponentRef<XDropdownPortalComponent> | null>;
     portalOverlayRef: _angular_core.WritableSignal<OverlayRef | null>;
     constructor();
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    setVisible(): void;
     setSubject(): void;
     onEnter(): void;
     onLeave(): void;
-    showPortal(): void;
+    onClickShow(): void;
     portalAttached(): boolean | undefined;
     closePortal(): boolean;
     createPortal(): void;
     setPosition(config: OverlayConfig): void;
     setInstance(): void;
     portalHover(hover: boolean): void;
+    onKeydown($event: KeyboardEvent): void;
     setPlacement(): _angular_cdk_overlay.PositionStrategy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDropdownComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<XDropdownComponent, "x-dropdown", never, {}, {}, never, ["*"], true, never>;

package/fesm2022/ng-nest-ui-affix.mjs

@@ -42,29 +42,29 @@ class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {
          */
         this.left = input(this.config?.left, ...(ngDevMode ? [{ debugName: "left", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XAffixProperty, isStandalone: true, selector: "x-affix-property", inputs: { top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XAffixProperty, isStandalone: true, selector: "x-affix-property", inputs: { top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAffixPrefix}-property`, template: '' }]
-        }] });
+        }], propDecorators: { top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }] } });
 
 class XAffixComponent extends XAffixProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XAffixComponent, isStandalone: true, selector: "x-affix", usesInheritance: true, ngImport: i0, template: "<div #affix class=\"x-affix\" [style.top]=\"top()\" [style.left]=\"left()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0}.x-affix{position:sticky;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XAffixComponent, isStandalone: true, selector: "x-affix", usesInheritance: true, ngImport: i0, template: "<div #affix class=\"x-affix\" [style.top]=\"top()\" [style.left]=\"left()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0}.x-affix{position:sticky;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAffixPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #affix class=\"x-affix\" [style.top]=\"top()\" [style.left]=\"left()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".x-affix{margin:0;padding:0}.x-affix{position:sticky;display:inline-block}\n"] }]
         }] });
 
 class XAffixModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XAffixModule, imports: [XAffixComponent], exports: [XAffixComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XAffixModule, imports: [XAffixComponent], exports: [XAffixComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAffixModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XAffixComponent],

package/fesm2022/ng-nest-ui-alert.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, Component, signal, computed, inject, PLATFORM_ID, DestroyRef, effect, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
-import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XIsEmpty, XFadeAnimation } from '@ng-nest/ui/core';
+import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XIsEmpty } from '@ng-nest/ui/core';
 import { Subject, of } from 'rxjs';
 import { delay, takeUntil } from 'rxjs/operators';
 import { XIconComponent } from '@ng-nest/ui/icon';
@@ -327,13 +327,13 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          */
         this.resizing = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XAlertProperty, isStandalone: true, selector: "x-alert-property", inputs: { hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, disabledAnimation: { classPropertyName: "disabledAnimation", publicName: "disabledAnimation", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, offsetLeft: { classPropertyName: "offsetLeft", publicName: "offsetLeft", isSignal: true, isRequired: false, transformFunction: null }, offsetTop: { classPropertyName: "offsetTop", publicName: "offsetTop", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragFreeDragPosition: { classPropertyName: "dragFreeDragPosition", publicName: "dragFreeDragPosition", isSignal: true, isRequired: false, transformFunction: null }, operationTpl: { classPropertyName: "operationTpl", publicName: "operationTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", dragEnded: "dragEnded", resizing: "resizing" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XAlertProperty, isStandalone: true, selector: "x-alert-property", inputs: { hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, disabledAnimation: { classPropertyName: "disabledAnimation", publicName: "disabledAnimation", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, offsetLeft: { classPropertyName: "offsetLeft", publicName: "offsetLeft", isSignal: true, isRequired: false, transformFunction: null }, offsetTop: { classPropertyName: "offsetTop", publicName: "offsetTop", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragFreeDragPosition: { classPropertyName: "dragFreeDragPosition", publicName: "dragFreeDragPosition", isSignal: true, isRequired: false, transformFunction: null }, operationTpl: { classPropertyName: "operationTpl", publicName: "operationTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", dragEnded: "dragEnded", resizing: "resizing" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAlertPrefix}-property`, template: '' }]
-        }] });
+        }], propDecorators: { hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], disabledAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledAnimation", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], offsetLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetLeft", required: false }] }], offsetTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetTop", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], dragBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBoundary", required: false }] }], dragFreeDragPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragFreeDragPosition", required: false }] }], operationTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationTpl", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }], resizing: [{ type: i0.Output, args: ["resizing"] }] } });
 
 class XAlertComponent extends XAlertProperty {
     constructor() {
@@ -380,10 +380,10 @@ class XAlertComponent extends XAlertProperty {
             !this.destory() && this.close.emit();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XAlertComponent, isStandalone: true, selector: "x-alert", usesInheritance: true, ngImport: i0, template: "@if (!styleHide() && !hide()) {\r\n  <div\r\n    class=\"x-alert\"\r\n    [class.x-alert-has-close]=\"!hideClose()\"\r\n    [class.x-alert-icon-content]=\"showIcon() && content()\"\r\n    cdkDrag\r\n    (cdkDragEnded)=\"dragEnded.emit($event)\"\r\n    [cdkDragFreeDragPosition]=\"dragFreeDragPosition()!\"\r\n    [cdkDragDisabled]=\"!draggable()\"\r\n    [cdkDragBoundary]=\"dragBoundary()!\"\r\n    [ngClass]=\"classMap()\"\r\n    @x-fade-animation\r\n    [@.disabled]=\"disabledAnimation()\"\r\n    (@x-fade-animation.done)=\"onCloseAnimationDone()\"\r\n    [xResizable]=\"resizable()!\"\r\n    (resizing)=\"resizing.emit($event)\"\r\n    [offsetLeft]=\"offsetLeft()\"\r\n    [offsetTop]=\"offsetTop()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.minHeight]=\"minHeight()\"\r\n  >\r\n    @if (showIcon()) {\r\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n    }\r\n    <ng-template #iconTpl>\r\n      @switch (type()) {\r\n        @case ('success') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-check-circle\"></x-icon>\r\n        }\r\n        @case ('info') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-info-circle\"></x-icon>\r\n        }\r\n        @case ('warning') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-exclamation-circle\"></x-icon>\r\n        }\r\n        @case ('error') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-close-circle\"></x-icon>\r\n        }\r\n        @case ('loading') {\r\n          <x-icon class=\"x-alert-icon\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n        }\r\n      }\r\n    </ng-template>\r\n    <div class=\"x-alert-inner\">\r\n      <span class=\"x-alert-title\" cdkDragHandle [class.x-bold]=\"title() && content()\">\r\n        <ng-container *xOutlet=\"title(); context: { $iconTpl: iconTpl }\">{{ title() }}</ng-container>\r\n      </span>\r\n      @if (content()) {\r\n        <div class=\"x-alert-content\">\r\n          <ng-container *xOutlet=\"content(); context: { $iconTpl: iconTpl }\">{{ content() }}</ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"x-alert-close\">\r\n        <div class=\"x-alert-operation\" *xOutlet=\"operationTpl()\">{{ operationTpl() }}</div>\r\n        @if (!hideClose()) {\r\n          <x-button class=\"x-alert-operation-close\" size=\"small\" [icon]=\"!closeText() ? 'fto-x' : ''\" [type]=\"'text'\" (click)=\"onClose()\" closable>\r\n            {{ closeText() }}\r\n          </x-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["x-alert{display:block}.x-alert{margin:0;padding:0}.x-alert{background-color:var(--x-background);border:.0625rem solid var(--x-border-300);border-radius:var(--x-border-radius);padding:.5rem 1rem;position:relative;display:flex;align-items:center}.x-alert-close{position:absolute;top:.425rem;right:.425rem}.x-alert-inner{width:100%}.x-alert-title.x-bold{font-weight:600}.x-alert-has-close .x-alert-title{margin-right:1.425rem}.x-alert-content{font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem;margin:.25rem 0 0}.x-alert-icon-content{align-items:flex-start}.x-alert-icon.x-icon{font-size:calc(var(--x-font-size) + .25rem);margin-right:.5rem}.x-alert-icon-medium>.x-icon{font-size:1.75rem}.x-alert-draggable .cdk-drag-handle{cursor:move}.x-alert-success.x-light{color:var(--x-success);background-color:var(--x-success-900)}.x-alert-success.x-light x-button.x-alert-close .x-button{color:var(--x-success-400)}.x-alert-success.x-light x-button.x-alert-close .x-button:hover{color:var(--x-success)}.x-alert-success.x-dark{color:var(--x-success-900);background-color:var(--x-success)}.x-alert-success.x-dark x-button.x-alert-close .x-button{color:var(--x-success-900)}.x-alert-success.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-success.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-success.x-white .x-alert-icon.x-icon{color:var(--x-success)}.x-alert-success.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-success.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-success.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-success.x-alert-outlined{border-color:var(--x-success-800);background-color:transparent}.x-alert-success.x-alert-filled{border-color:var(--x-success-800)}.x-alert-success.x-alert-borderless{border-color:var(--x-background)}.x-alert-info.x-light{color:var(--x-info);background-color:var(--x-info-900)}.x-alert-info.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-info.x-light x-button.x-alert-close .x-button:hover{color:var(--x-info)}.x-alert-info.x-dark{color:var(--x-info-900);background-color:var(--x-info)}.x-alert-info.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-info.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-info.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-info.x-white .x-alert-icon.x-icon{color:var(--x-info)}.x-alert-info.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-info.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-info.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-info.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-info.x-alert-filled{border-color:var(--x-info-800)}.x-alert-info.x-alert-borderless{border-color:var(--x-background)}.x-alert-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-800)}.x-alert-warning.x-light x-button.x-alert-close .x-button{color:var(--x-warning-400)}.x-alert-warning.x-light x-button.x-alert-close .x-button:hover{color:var(--x-warning)}.x-alert-warning.x-dark{color:var(--x-warning-800);background-color:var(--x-warning)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-800)}.x-alert-warning.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-warning.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-warning.x-white .x-alert-icon.x-icon{color:var(--x-warning)}.x-alert-warning.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-warning.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-warning.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-warning.x-alert-outlined{border-color:var(--x-warning-700);background-color:transparent}.x-alert-warning.x-alert-filled{border-color:var(--x-warning-700)}.x-alert-warning.x-alert-borderless{border-color:var(--x-background)}.x-alert-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900)}.x-alert-error.x-light x-button.x-alert-close .x-button{color:var(--x-danger-400)}.x-alert-error.x-light x-button.x-alert-close .x-button:hover{color:var(--x-danger)}.x-alert-error.x-dark{color:var(--x-danger-900);background-color:var(--x-danger)}.x-alert-error.x-dark x-button.x-alert-close .x-button{color:var(--x-danger-900)}.x-alert-error.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-error.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-error.x-white .x-alert-icon.x-icon{color:var(--x-danger)}.x-alert-error.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-error.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-error.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-error.x-alert-outlined{border-color:var(--x-danger-800);background-color:transparent}.x-alert-error.x-alert-filled{border-color:var(--x-danger-800)}.x-alert-error.x-alert-borderless{border-color:var(--x-background)}.x-alert-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900)}.x-alert-loading.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-loading.x-light x-button.x-alert-close .x-button:hover{color:var(--x-primary)}.x-alert-loading.x-dark{color:var(--x-info-900);background-color:var(--x-primary)}.x-alert-loading.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-loading.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-loading.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-loading.x-white .x-alert-icon.x-icon{color:var(--x-primary)}.x-alert-loading.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-loading.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-loading.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-loading.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-loading.x-alert-filled{border-color:var(--x-info-800)}.x-alert-loading.x-alert-borderless{border-color:var(--x-background)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "directive", type: XResizableDirective, selector: "[xResizable]" }], animations: [XFadeAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XAlertComponent, isStandalone: true, selector: "x-alert", usesInheritance: true, ngImport: i0, template: "@if (!styleHide() && !hide()) {\r\n  <div\r\n    class=\"x-alert\"\r\n    [class.x-alert-has-close]=\"!hideClose()\"\r\n    [class.x-alert-icon-content]=\"showIcon() && content()\"\r\n    cdkDrag\r\n    (cdkDragEnded)=\"dragEnded.emit($event)\"\r\n    [cdkDragFreeDragPosition]=\"dragFreeDragPosition()!\"\r\n    [cdkDragDisabled]=\"!draggable()\"\r\n    [cdkDragBoundary]=\"dragBoundary()!\"\r\n    [ngClass]=\"classMap()\"\r\n    animate.enter=\"x-connect-enter\"\r\n    animate.leave=\"x-connect-leave\"\r\n    [class.x-animate-disabled]=\"disabledAnimation()\"\r\n    (animationend)=\"onCloseAnimationDone()\"\r\n    [xResizable]=\"resizable()!\"\r\n    (resizing)=\"resizing.emit($event)\"\r\n    [offsetLeft]=\"offsetLeft()\"\r\n    [offsetTop]=\"offsetTop()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.minHeight]=\"minHeight()\"\r\n  >\r\n    @if (showIcon()) {\r\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n    }\r\n    <ng-template #iconTpl>\r\n      @switch (type()) {\r\n        @case ('success') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-check-circle\"></x-icon>\r\n        }\r\n        @case ('info') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-info-circle\"></x-icon>\r\n        }\r\n        @case ('warning') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-exclamation-circle\"></x-icon>\r\n        }\r\n        @case ('error') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-close-circle\"></x-icon>\r\n        }\r\n        @case ('loading') {\r\n          <x-icon class=\"x-alert-icon\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n        }\r\n      }\r\n    </ng-template>\r\n    <div class=\"x-alert-inner\">\r\n      <span class=\"x-alert-title\" cdkDragHandle [class.x-bold]=\"title() && content()\">\r\n        <ng-container *xOutlet=\"title(); context: { $iconTpl: iconTpl }\">{{ title() }}</ng-container>\r\n      </span>\r\n      @if (content()) {\r\n        <div class=\"x-alert-content\">\r\n          <ng-container *xOutlet=\"content(); context: { $iconTpl: iconTpl }\">{{ content() }}</ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"x-alert-close\">\r\n        <div class=\"x-alert-operation\" *xOutlet=\"operationTpl()\">{{ operationTpl() }}</div>\r\n        @if (!hideClose()) {\r\n          <x-button\r\n            class=\"x-alert-operation-close\"\r\n            size=\"small\"\r\n            [icon]=\"!closeText() ? 'fto-x' : ''\"\r\n            [type]=\"'text'\"\r\n            (click)=\"onClose()\"\r\n            closable\r\n          >\r\n            {{ closeText() }}\r\n          </x-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["x-alert{display:block}.x-alert{margin:0;padding:0}.x-alert{background-color:var(--x-background);border:.0625rem solid var(--x-border-300);border-radius:var(--x-border-radius);padding:.5rem 1rem;position:relative;display:flex;align-items:center}.x-alert-close{position:absolute;top:.425rem;right:.425rem}.x-alert-inner{width:100%}.x-alert-title.x-bold{font-weight:600}.x-alert-has-close .x-alert-title{margin-right:1.425rem}.x-alert-content{font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem;margin:.25rem 0 0}.x-alert-icon-content{align-items:flex-start}.x-alert-icon.x-icon{font-size:calc(var(--x-font-size) + .25rem);margin-right:.5rem}.x-alert-icon-medium>.x-icon{font-size:1.75rem}.x-alert-draggable .cdk-drag-handle{cursor:move}.x-alert-success.x-light{color:var(--x-success);background-color:var(--x-success-900)}.x-alert-success.x-light x-button.x-alert-close .x-button{color:var(--x-success-400)}.x-alert-success.x-light x-button.x-alert-close .x-button:hover{color:var(--x-success)}.x-alert-success.x-dark{color:var(--x-success-900);background-color:var(--x-success)}.x-alert-success.x-dark x-button.x-alert-close .x-button{color:var(--x-success-900)}.x-alert-success.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-success.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-success.x-white .x-alert-icon.x-icon{color:var(--x-success)}.x-alert-success.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-success.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-success.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-success.x-alert-outlined{border-color:var(--x-success-800);background-color:transparent}.x-alert-success.x-alert-filled{border-color:var(--x-success-800)}.x-alert-success.x-alert-borderless{border-color:var(--x-background)}.x-alert-info.x-light{color:var(--x-info);background-color:var(--x-info-900)}.x-alert-info.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-info.x-light x-button.x-alert-close .x-button:hover{color:var(--x-info)}.x-alert-info.x-dark{color:var(--x-info-900);background-color:var(--x-info)}.x-alert-info.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-info.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-info.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-info.x-white .x-alert-icon.x-icon{color:var(--x-info)}.x-alert-info.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-info.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-info.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-info.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-info.x-alert-filled{border-color:var(--x-info-800)}.x-alert-info.x-alert-borderless{border-color:var(--x-background)}.x-alert-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-800)}.x-alert-warning.x-light x-button.x-alert-close .x-button{color:var(--x-warning-400)}.x-alert-warning.x-light x-button.x-alert-close .x-button:hover{color:var(--x-warning)}.x-alert-warning.x-dark{color:var(--x-warning-800);background-color:var(--x-warning)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-800)}.x-alert-warning.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-warning.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-warning.x-white .x-alert-icon.x-icon{color:var(--x-warning)}.x-alert-warning.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-warning.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-warning.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-warning.x-alert-outlined{border-color:var(--x-warning-700);background-color:transparent}.x-alert-warning.x-alert-filled{border-color:var(--x-warning-700)}.x-alert-warning.x-alert-borderless{border-color:var(--x-background)}.x-alert-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900)}.x-alert-error.x-light x-button.x-alert-close .x-button{color:var(--x-danger-400)}.x-alert-error.x-light x-button.x-alert-close .x-button:hover{color:var(--x-danger)}.x-alert-error.x-dark{color:var(--x-danger-900);background-color:var(--x-danger)}.x-alert-error.x-dark x-button.x-alert-close .x-button{color:var(--x-danger-900)}.x-alert-error.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-error.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-error.x-white .x-alert-icon.x-icon{color:var(--x-danger)}.x-alert-error.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-error.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-error.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-error.x-alert-outlined{border-color:var(--x-danger-800);background-color:transparent}.x-alert-error.x-alert-filled{border-color:var(--x-danger-800)}.x-alert-error.x-alert-borderless{border-color:var(--x-background)}.x-alert-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900)}.x-alert-loading.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-loading.x-light x-button.x-alert-close .x-button:hover{color:var(--x-primary)}.x-alert-loading.x-dark{color:var(--x-info-900);background-color:var(--x-primary)}.x-alert-loading.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-loading.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-loading.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-loading.x-white .x-alert-icon.x-icon{color:var(--x-primary)}.x-alert-loading.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-loading.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-loading.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-loading.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-loading.x-alert-filled{border-color:var(--x-info-800)}.x-alert-loading.x-alert-borderless{border-color:var(--x-background)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "directive", type: XResizableDirective, selector: "[xResizable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAlertPrefix}`, imports: [
                         NgClass,
@@ -393,15 +393,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         XButtonComponent,
                         XOutletDirective,
                         XResizableDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XFadeAnimation], template: "@if (!styleHide() && !hide()) {\r\n  <div\r\n    class=\"x-alert\"\r\n    [class.x-alert-has-close]=\"!hideClose()\"\r\n    [class.x-alert-icon-content]=\"showIcon() && content()\"\r\n    cdkDrag\r\n    (cdkDragEnded)=\"dragEnded.emit($event)\"\r\n    [cdkDragFreeDragPosition]=\"dragFreeDragPosition()!\"\r\n    [cdkDragDisabled]=\"!draggable()\"\r\n    [cdkDragBoundary]=\"dragBoundary()!\"\r\n    [ngClass]=\"classMap()\"\r\n    @x-fade-animation\r\n    [@.disabled]=\"disabledAnimation()\"\r\n    (@x-fade-animation.done)=\"onCloseAnimationDone()\"\r\n    [xResizable]=\"resizable()!\"\r\n    (resizing)=\"resizing.emit($event)\"\r\n    [offsetLeft]=\"offsetLeft()\"\r\n    [offsetTop]=\"offsetTop()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.minHeight]=\"minHeight()\"\r\n  >\r\n    @if (showIcon()) {\r\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n    }\r\n    <ng-template #iconTpl>\r\n      @switch (type()) {\r\n        @case ('success') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-check-circle\"></x-icon>\r\n        }\r\n        @case ('info') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-info-circle\"></x-icon>\r\n        }\r\n        @case ('warning') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-exclamation-circle\"></x-icon>\r\n        }\r\n        @case ('error') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-close-circle\"></x-icon>\r\n        }\r\n        @case ('loading') {\r\n          <x-icon class=\"x-alert-icon\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n        }\r\n      }\r\n    </ng-template>\r\n    <div class=\"x-alert-inner\">\r\n      <span class=\"x-alert-title\" cdkDragHandle [class.x-bold]=\"title() && content()\">\r\n        <ng-container *xOutlet=\"title(); context: { $iconTpl: iconTpl }\">{{ title() }}</ng-container>\r\n      </span>\r\n      @if (content()) {\r\n        <div class=\"x-alert-content\">\r\n          <ng-container *xOutlet=\"content(); context: { $iconTpl: iconTpl }\">{{ content() }}</ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"x-alert-close\">\r\n        <div class=\"x-alert-operation\" *xOutlet=\"operationTpl()\">{{ operationTpl() }}</div>\r\n        @if (!hideClose()) {\r\n          <x-button class=\"x-alert-operation-close\" size=\"small\" [icon]=\"!closeText() ? 'fto-x' : ''\" [type]=\"'text'\" (click)=\"onClose()\" closable>\r\n            {{ closeText() }}\r\n          </x-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["x-alert{display:block}.x-alert{margin:0;padding:0}.x-alert{background-color:var(--x-background);border:.0625rem solid var(--x-border-300);border-radius:var(--x-border-radius);padding:.5rem 1rem;position:relative;display:flex;align-items:center}.x-alert-close{position:absolute;top:.425rem;right:.425rem}.x-alert-inner{width:100%}.x-alert-title.x-bold{font-weight:600}.x-alert-has-close .x-alert-title{margin-right:1.425rem}.x-alert-content{font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem;margin:.25rem 0 0}.x-alert-icon-content{align-items:flex-start}.x-alert-icon.x-icon{font-size:calc(var(--x-font-size) + .25rem);margin-right:.5rem}.x-alert-icon-medium>.x-icon{font-size:1.75rem}.x-alert-draggable .cdk-drag-handle{cursor:move}.x-alert-success.x-light{color:var(--x-success);background-color:var(--x-success-900)}.x-alert-success.x-light x-button.x-alert-close .x-button{color:var(--x-success-400)}.x-alert-success.x-light x-button.x-alert-close .x-button:hover{color:var(--x-success)}.x-alert-success.x-dark{color:var(--x-success-900);background-color:var(--x-success)}.x-alert-success.x-dark x-button.x-alert-close .x-button{color:var(--x-success-900)}.x-alert-success.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-success.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-success.x-white .x-alert-icon.x-icon{color:var(--x-success)}.x-alert-success.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-success.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-success.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-success.x-alert-outlined{border-color:var(--x-success-800);background-color:transparent}.x-alert-success.x-alert-filled{border-color:var(--x-success-800)}.x-alert-success.x-alert-borderless{border-color:var(--x-background)}.x-alert-info.x-light{color:var(--x-info);background-color:var(--x-info-900)}.x-alert-info.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-info.x-light x-button.x-alert-close .x-button:hover{color:var(--x-info)}.x-alert-info.x-dark{color:var(--x-info-900);background-color:var(--x-info)}.x-alert-info.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-info.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-info.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-info.x-white .x-alert-icon.x-icon{color:var(--x-info)}.x-alert-info.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-info.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-info.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-info.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-info.x-alert-filled{border-color:var(--x-info-800)}.x-alert-info.x-alert-borderless{border-color:var(--x-background)}.x-alert-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-800)}.x-alert-warning.x-light x-button.x-alert-close .x-button{color:var(--x-warning-400)}.x-alert-warning.x-light x-button.x-alert-close .x-button:hover{color:var(--x-warning)}.x-alert-warning.x-dark{color:var(--x-warning-800);background-color:var(--x-warning)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-800)}.x-alert-warning.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-warning.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-warning.x-white .x-alert-icon.x-icon{color:var(--x-warning)}.x-alert-warning.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-warning.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-warning.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-warning.x-alert-outlined{border-color:var(--x-warning-700);background-color:transparent}.x-alert-warning.x-alert-filled{border-color:var(--x-warning-700)}.x-alert-warning.x-alert-borderless{border-color:var(--x-background)}.x-alert-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900)}.x-alert-error.x-light x-button.x-alert-close .x-button{color:var(--x-danger-400)}.x-alert-error.x-light x-button.x-alert-close .x-button:hover{color:var(--x-danger)}.x-alert-error.x-dark{color:var(--x-danger-900);background-color:var(--x-danger)}.x-alert-error.x-dark x-button.x-alert-close .x-button{color:var(--x-danger-900)}.x-alert-error.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-error.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-error.x-white .x-alert-icon.x-icon{color:var(--x-danger)}.x-alert-error.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-error.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-error.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-error.x-alert-outlined{border-color:var(--x-danger-800);background-color:transparent}.x-alert-error.x-alert-filled{border-color:var(--x-danger-800)}.x-alert-error.x-alert-borderless{border-color:var(--x-background)}.x-alert-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900)}.x-alert-loading.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-loading.x-light x-button.x-alert-close .x-button:hover{color:var(--x-primary)}.x-alert-loading.x-dark{color:var(--x-info-900);background-color:var(--x-primary)}.x-alert-loading.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-loading.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-loading.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-loading.x-white .x-alert-icon.x-icon{color:var(--x-primary)}.x-alert-loading.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-loading.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-loading.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-loading.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-loading.x-alert-filled{border-color:var(--x-info-800)}.x-alert-loading.x-alert-borderless{border-color:var(--x-background)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!styleHide() && !hide()) {\r\n  <div\r\n    class=\"x-alert\"\r\n    [class.x-alert-has-close]=\"!hideClose()\"\r\n    [class.x-alert-icon-content]=\"showIcon() && content()\"\r\n    cdkDrag\r\n    (cdkDragEnded)=\"dragEnded.emit($event)\"\r\n    [cdkDragFreeDragPosition]=\"dragFreeDragPosition()!\"\r\n    [cdkDragDisabled]=\"!draggable()\"\r\n    [cdkDragBoundary]=\"dragBoundary()!\"\r\n    [ngClass]=\"classMap()\"\r\n    animate.enter=\"x-connect-enter\"\r\n    animate.leave=\"x-connect-leave\"\r\n    [class.x-animate-disabled]=\"disabledAnimation()\"\r\n    (animationend)=\"onCloseAnimationDone()\"\r\n    [xResizable]=\"resizable()!\"\r\n    (resizing)=\"resizing.emit($event)\"\r\n    [offsetLeft]=\"offsetLeft()\"\r\n    [offsetTop]=\"offsetTop()\"\r\n    [style.minWidth]=\"minWidth()\"\r\n    [style.minHeight]=\"minHeight()\"\r\n  >\r\n    @if (showIcon()) {\r\n      <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\r\n    }\r\n    <ng-template #iconTpl>\r\n      @switch (type()) {\r\n        @case ('success') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-check-circle\"></x-icon>\r\n        }\r\n        @case ('info') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-info-circle\"></x-icon>\r\n        }\r\n        @case ('warning') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-exclamation-circle\"></x-icon>\r\n        }\r\n        @case ('error') {\r\n          <x-icon class=\"x-alert-icon\" type=\"adf-close-circle\"></x-icon>\r\n        }\r\n        @case ('loading') {\r\n          <x-icon class=\"x-alert-icon\" type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n        }\r\n      }\r\n    </ng-template>\r\n    <div class=\"x-alert-inner\">\r\n      <span class=\"x-alert-title\" cdkDragHandle [class.x-bold]=\"title() && content()\">\r\n        <ng-container *xOutlet=\"title(); context: { $iconTpl: iconTpl }\">{{ title() }}</ng-container>\r\n      </span>\r\n      @if (content()) {\r\n        <div class=\"x-alert-content\">\r\n          <ng-container *xOutlet=\"content(); context: { $iconTpl: iconTpl }\">{{ content() }}</ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"x-alert-close\">\r\n        <div class=\"x-alert-operation\" *xOutlet=\"operationTpl()\">{{ operationTpl() }}</div>\r\n        @if (!hideClose()) {\r\n          <x-button\r\n            class=\"x-alert-operation-close\"\r\n            size=\"small\"\r\n            [icon]=\"!closeText() ? 'fto-x' : ''\"\r\n            [type]=\"'text'\"\r\n            (click)=\"onClose()\"\r\n            closable\r\n          >\r\n            {{ closeText() }}\r\n          </x-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["x-alert{display:block}.x-alert{margin:0;padding:0}.x-alert{background-color:var(--x-background);border:.0625rem solid var(--x-border-300);border-radius:var(--x-border-radius);padding:.5rem 1rem;position:relative;display:flex;align-items:center}.x-alert-close{position:absolute;top:.425rem;right:.425rem}.x-alert-inner{width:100%}.x-alert-title.x-bold{font-weight:600}.x-alert-has-close .x-alert-title{margin-right:1.425rem}.x-alert-content{font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem;margin:.25rem 0 0}.x-alert-icon-content{align-items:flex-start}.x-alert-icon.x-icon{font-size:calc(var(--x-font-size) + .25rem);margin-right:.5rem}.x-alert-icon-medium>.x-icon{font-size:1.75rem}.x-alert-draggable .cdk-drag-handle{cursor:move}.x-alert-success.x-light{color:var(--x-success);background-color:var(--x-success-900)}.x-alert-success.x-light x-button.x-alert-close .x-button{color:var(--x-success-400)}.x-alert-success.x-light x-button.x-alert-close .x-button:hover{color:var(--x-success)}.x-alert-success.x-dark{color:var(--x-success-900);background-color:var(--x-success)}.x-alert-success.x-dark x-button.x-alert-close .x-button{color:var(--x-success-900)}.x-alert-success.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-success.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-success.x-white .x-alert-icon.x-icon{color:var(--x-success)}.x-alert-success.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-success.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-success.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-success.x-alert-outlined{border-color:var(--x-success-800);background-color:transparent}.x-alert-success.x-alert-filled{border-color:var(--x-success-800)}.x-alert-success.x-alert-borderless{border-color:var(--x-background)}.x-alert-info.x-light{color:var(--x-info);background-color:var(--x-info-900)}.x-alert-info.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-info.x-light x-button.x-alert-close .x-button:hover{color:var(--x-info)}.x-alert-info.x-dark{color:var(--x-info-900);background-color:var(--x-info)}.x-alert-info.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-info.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-info.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-info.x-white .x-alert-icon.x-icon{color:var(--x-info)}.x-alert-info.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-info.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-info.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-info.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-info.x-alert-filled{border-color:var(--x-info-800)}.x-alert-info.x-alert-borderless{border-color:var(--x-background)}.x-alert-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-800)}.x-alert-warning.x-light x-button.x-alert-close .x-button{color:var(--x-warning-400)}.x-alert-warning.x-light x-button.x-alert-close .x-button:hover{color:var(--x-warning)}.x-alert-warning.x-dark{color:var(--x-warning-800);background-color:var(--x-warning)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-800)}.x-alert-warning.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-warning.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-warning.x-white .x-alert-icon.x-icon{color:var(--x-warning)}.x-alert-warning.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-warning.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-warning.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-warning.x-alert-outlined{border-color:var(--x-warning-700);background-color:transparent}.x-alert-warning.x-alert-filled{border-color:var(--x-warning-700)}.x-alert-warning.x-alert-borderless{border-color:var(--x-background)}.x-alert-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900)}.x-alert-error.x-light x-button.x-alert-close .x-button{color:var(--x-danger-400)}.x-alert-error.x-light x-button.x-alert-close .x-button:hover{color:var(--x-danger)}.x-alert-error.x-dark{color:var(--x-danger-900);background-color:var(--x-danger)}.x-alert-error.x-dark x-button.x-alert-close .x-button{color:var(--x-danger-900)}.x-alert-error.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-error.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-error.x-white .x-alert-icon.x-icon{color:var(--x-danger)}.x-alert-error.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-error.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-error.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-error.x-alert-outlined{border-color:var(--x-danger-800);background-color:transparent}.x-alert-error.x-alert-filled{border-color:var(--x-danger-800)}.x-alert-error.x-alert-borderless{border-color:var(--x-background)}.x-alert-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900)}.x-alert-loading.x-light x-button.x-alert-close .x-button{color:var(--x-info-400)}.x-alert-loading.x-light x-button.x-alert-close .x-button:hover{color:var(--x-primary)}.x-alert-loading.x-dark{color:var(--x-info-900);background-color:var(--x-primary)}.x-alert-loading.x-dark x-button.x-alert-close .x-button{color:var(--x-info-900)}.x-alert-loading.x-dark x-button.x-alert-close .x-button:hover{color:var(--x-background-100)}.x-alert-loading.x-white{color:var(--x-text-300);background-color:var(--x-background)}.x-alert-loading.x-white .x-alert-icon.x-icon{color:var(--x-primary)}.x-alert-loading.x-white x-button.x-alert-close .x-button{color:var(--x-text-400)}.x-alert-loading.x-white x-button.x-alert-close .x-button:hover{color:var(--x-text-300)}.x-alert-loading.x-alert-shadow{box-shadow:var(--x-box-shadow);border-color:transparent}.x-alert-loading.x-alert-outlined{border-color:var(--x-info-800);background-color:transparent}.x-alert-loading.x-alert-filled{border-color:var(--x-info-800)}.x-alert-loading.x-alert-borderless{border-color:var(--x-background)}\n"] }]
         }], ctorParameters: () => [] });
 
 class XAlertModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XAlertModule, imports: [XAlertComponent], exports: [XAlertComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertModule, imports: [XAlertComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XAlertModule, imports: [XAlertComponent], exports: [XAlertComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertModule, imports: [XAlertComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XAlertComponent],