@ng-nest/ui 20.0.7 → 20.1.0

package/date-picker/index.d.ts

@@ -1,16 +1,16 @@
-import * as _angular_cdk_overlay from '@angular/cdk/overlay';
-import { OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, AfterViewInit, OnInit, OnChanges, ComponentRef, SimpleChanges, OnDestroy, ElementRef, PipeTransform } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { Subject } from 'rxjs';
 import * as _ng_nest_ui_core from '@ng-nest/ui/core';
-import { XBoolean, XNumber, XAlign, XJustify, XDirection, XSize, XTemplate, XVariant, XCorner, XData, XIdentityProperty, XProperty, XPositionTopBottom, XDate } from '@ng-nest/ui/core';
+import { XBoolean, XTemplate, XNumber, XAlign, XJustify, XDirection, XSize, XVariant, XCorner, XData, XIdentityProperty, XFloatLabel, XProperty, XPositionTopBottom, XDate } from '@ng-nest/ui/core';
 import { XFormOption } from '@ng-nest/ui/base-form';
 import { XI18nDatePicker, XI18nService } from '@ng-nest/ui/i18n';
 import { XInputComponent, XInputGroupComponent } from '@ng-nest/ui/input';
 import { XTimePickerFrameComponent } from '@ng-nest/ui/time-picker';
 import { XPortalOverlayRef } from '@ng-nest/ui/portal';
+import { OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
 import { DatePipe, LowerCasePipe } from '@angular/common';
 
 /**
@@ -48,7 +48,7 @@ declare const XDatePickerProperty_base: new () => {
     setDisabledState(disabled: boolean): void;
     formControlValidator(): void;
     readonly validator: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
-    readonly label: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<XTemplate>;
     readonly labelWidth: _angular_core.InputSignalWithTransform<string, XNumber>;
     readonly labelAlign: _angular_core.InputSignal<XAlign>;
     readonly justify: _angular_core.InputSignal<XJustify>;
@@ -123,6 +123,16 @@ declare class XDatePickerProperty extends XDatePickerProperty_base {
      * @en_US Disabled time
      */
     readonly disabledTime: _angular_core.InputSignal<XDatePickerDisabledTime | undefined>;
+    /**
+     * @zh_CN 浮动标签
+     * @en_US Float label
+     */
+    readonly floatLabel: _angular_core.InputSignal<XFloatLabel | null>;
+    /**
+     * @zh_CN 固定浮动标签
+     * @en_US Fixed float label
+     */
+    readonly floatFixed: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
     /**
      * @zh_CN 尺寸
      * @en_US Size
@@ -137,7 +147,7 @@ declare class XDatePickerProperty extends XDatePickerProperty_base {
      * @zh_CN 标签
      * @en_US Label
      */
-    readonly label: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<XTemplate>;
     /**
      * @zh_CN 标签宽度
      * @en_US Label width
@@ -229,7 +239,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; }; "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; }; "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
@@ -245,6 +255,16 @@ interface XDatePickerOption extends XFormOption {
      * @en_US Input variant
      */
     variant?: XDatePickerVariant;
+    /**
+     * @zh_CN 浮动标签
+     * @en_US Float label
+     */
+    floatLabel?: XDatePickerFloatLabel;
+    /**
+     * @zh_CN 固定浮动标签
+     * @en_US Fixed float label
+     */
+    floatFixed?: boolean;
     /**
      * @zh_CN 格式化类型
      * @en_US Format type
@@ -426,7 +446,7 @@ declare const XDateRangeProperty_base: new () => {
     setDisabledState(disabled: boolean): void;
     formControlValidator(): void;
     readonly validator: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
-    readonly label: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<XTemplate>;
     readonly labelWidth: _angular_core.InputSignalWithTransform<string, XNumber>;
     readonly labelAlign: _angular_core.InputSignal<XAlign>;
     readonly justify: _angular_core.InputSignal<XJustify>;
@@ -501,6 +521,16 @@ declare class XDateRangeProperty extends XDateRangeProperty_base {
      * @en_US Disabled time
      */
     readonly disabledTime: _angular_core.InputSignal<XDatePickerDisabledTime | undefined>;
+    /**
+     * @zh_CN 浮动标签
+     * @en_US Float label
+     */
+    readonly floatLabel: _angular_core.InputSignal<XFloatLabel | null>;
+    /**
+     * @zh_CN 固定浮动标签
+     * @en_US Fixed float label
+     */
+    readonly floatFixed: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
     /**
      * @zh_CN 尺寸
      * @en_US Size
@@ -515,7 +545,7 @@ declare class XDateRangeProperty extends XDateRangeProperty_base {
      * @zh_CN 标签
      * @en_US Label
      */
-    readonly label: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<XTemplate>;
     /**
      * @zh_CN 标签宽度
      * @en_US Label width
@@ -592,7 +622,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; }; "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; }; "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
@@ -608,6 +638,16 @@ interface XDateRangeOption extends XFormOption {
      * @en_US Input variant
      */
     variant?: XDatePickerVariant;
+    /**
+     * @zh_CN 浮动标签
+     * @en_US Float label
+     */
+    floatLabel?: XDatePickerFloatLabel;
+    /**
+     * @zh_CN 固定浮动标签
+     * @en_US Fixed float label
+     */
+    floatFixed?: boolean;
     /**
      * @zh_CN 格式化类型
      * @en_US Format type
@@ -807,6 +847,11 @@ type XDatePickerModelType = 'date' | 'number' | 'string';
  * @en_US Input box variant
  */
 type XDatePickerVariant = XVariant;
+/**
+ * @zh_CN 浮动标签类型
+ * @en_US Float label type
+ */
+type XDatePickerFloatLabel = XFloatLabel;
 /**
  * DatePicker Portal
  * @selector x-date-picker-portal
@@ -1545,7 +1590,7 @@ declare class XDatePickerComponent extends XDatePickerProperty implements OnInit
     onNodeClick(date: Date, sure?: boolean): void;
     onInput(): void;
     setDisplayValue(dateNumber: number | string): void;
-    setPlacement(): _angular_cdk_overlay.PositionStrategy;
+    setPlacement(): _angular_cdk_overlay_module_d.PositionStrategy;
     setPortal(): void;
     formControlChanges(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDatePickerComponent, never>;
@@ -2004,7 +2049,7 @@ declare class XDateRangeComponent extends XDateRangeProperty implements OnInit,
     onInput(): void;
     onFocus(type: 'start' | 'end'): void;
     setDisplayValue(dateNumber: (number | null)[]): void;
-    setPlacement(): _angular_cdk_overlay.PositionStrategy;
+    setPlacement(): _angular_cdk_overlay_module_d.PositionStrategy;
     setPortal(): void;
     formControlChanges(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XDateRangeComponent, never>;
@@ -2108,4 +2153,4 @@ declare class XDateQuarterPipe implements PipeTransform {
 }
 
 export { XDatePickerComponent, XDatePickerModule, XDatePickerPortalComponent, XDatePickerPortalPrefix, XDatePickerPrefix, XDatePickerProperty, XDateQuarterPipe, XDateQuarterPrefix, XDateRangeComponent, XDateRangePortalComponent, XDateRangePortalPrefix, XDateRangePrefix, XDateRangeProperty, XPickerDateComponent, XPickerDatePrefix, XPickerDateProperty, XPickerMonthComponent, XPickerMonthPrefix, XPickerMonthProperty, XPickerQuarterComponent, XPickerQuarterPrefix, XPickerQuarterProperty, XPickerYearComponent, XPickerYearPrefix, XPickerYearProperty };
-export type { XDateCell, XDatePickerDisabledDate, XDatePickerDisabledTime, XDatePickerDisabledTimeFn, XDatePickerModelType, XDatePickerOption, XDatePickerPreset, XDatePickerRangType, XDatePickerType, XDatePickerVariant, XDateRangeOption, XDateRangePreset };
+export type { XDateCell, XDatePickerDisabledDate, XDatePickerDisabledTime, XDatePickerDisabledTimeFn, XDatePickerFloatLabel, XDatePickerModelType, XDatePickerOption, XDatePickerPreset, XDatePickerRangType, XDatePickerType, XDatePickerVariant, XDateRangeOption, XDateRangePreset };

package/dropdown/index.d.ts

@@ -1,5 +1,4 @@
-import * as _angular_cdk_overlay from '@angular/cdk/overlay';
-import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
 import * as _angular_core from '@angular/core';
 import { ViewContainerRef, ComponentRef, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import * as _ng_nest_ui_core from '@ng-nest/ui/core';
@@ -7,6 +6,7 @@ import { XDataArray, XTrigger, XPlacement, XBoolean, XNumber, XSize, XPositionTo
 import { XListNode } from '@ng-nest/ui/list';
 import { Subject } from 'rxjs';
 import { XPortalOverlayRef, XPortalService } from '@ng-nest/ui/portal';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
 
 /**
  * Dropdown
@@ -149,7 +149,7 @@ declare class XDropdownPortalComponent {
     setPosition(config: OverlayConfig): void;
     setInstance(): void;
     hover(hover: boolean): void;
-    setPlacement(): _angular_cdk_overlay.PositionStrategy;
+    setPlacement(): _angular_cdk_overlay_module_d.PositionStrategy;
     onEnter(node: XDropdownNode): void;
     onLeave(): void;
     changeOpenNode(open: boolean): void;
@@ -188,7 +188,7 @@ declare class XDropdownComponent extends XDropdownProperty implements OnInit, On
     setPosition(config: OverlayConfig): void;
     setInstance(): void;
     portalHover(hover: boolean): void;
-    setPlacement(): _angular_cdk_overlay.PositionStrategy;
+    setPlacement(): _angular_cdk_overlay_module_d.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

@@ -27,7 +27,7 @@ class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {
          * ```
          *
          */
-        this.top = input(this.config?.top, { transform: XToCssPixelValue });
+        this.top = input(this.config?.top, ...(ngDevMode ? [{ debugName: "top", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 左边距离
          * @en_US Distance from left
@@ -40,12 +40,12 @@ class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {
          * ```
          *
          */
-        this.left = input(this.config?.left, { transform: XToCssPixelValue });
+        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.0.0", ngImport: i0, type: XAffixProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.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.2.4", ngImport: i0, type: XAffixProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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.0.0", ngImport: i0, type: XAffixProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAffixProperty, decorators: [{
             type: Component,
             args: [{
                     selector: `${XAffixPrefix}-property`, template: ''
@@ -53,20 +53,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class XAffixComponent extends XAffixProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAffixComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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.2.4", ngImport: i0, type: XAffixComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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.0.0", ngImport: i0, type: XAffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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.0.0", ngImport: i0, type: XAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XAffixModule, imports: [XAffixComponent], exports: [XAffixComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAffixModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XAffixModule, imports: [XAffixComponent], exports: [XAffixComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAffixModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAffixModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XAffixComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-affix.mjs","sources":["../../../../lib/ng-nest/ui/affix/affix.property.ts","../../../../lib/ng-nest/ui/affix/affix.component.ts","../../../../lib/ng-nest/ui/affix/affix.component.html","../../../../lib/ng-nest/ui/affix/affix.module.ts","../../../../lib/ng-nest/ui/affix/ng-nest-ui-affix.ts"],"sourcesContent":["import { XNumber, XPropertyFunction, XToCssPixelValue } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\n\r\n/**\r\n * Affix\r\n * @selector x-affix\r\n * @decorator component\r\n */\r\nexport const XAffixPrefix = 'x-affix';\r\nexport const X_AFFIX_CONFIG_NAME = 'affix';\r\n\r\n/**\r\n * Affix Property\r\n */\r\n@Component({\r\n    selector: `${XAffixPrefix}-property`, template: ''\r\n})\r\nexport class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 顶部距离\r\n   * @en_US Distance from top\r\n   * @example\r\n   * \r\n   * ```html\r\n   * <x-affix top=\"5rem\">\r\n   *   <div>有垂直滚动条，我与顶部距离5rem</div>\r\n   * </x-affix>\r\n   * ```\r\n   * \r\n   */\r\n  readonly top = input<string, XNumber>(this.config?.top!, { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 左边距离\r\n   * @en_US Distance from left\r\n   * @example\r\n   * \r\n   * ```html\r\n   * <x-affix left=\"5rem\">\r\n   *   <div>有横向滚动条，我与左边距离5rem</div>\r\n   * </x-affix>\r\n   * ```\r\n   * \r\n   */\r\n  readonly left = input<string, XNumber>(this.config?.left!, { transform: XToCssPixelValue });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\r\nimport { XAffixPrefix, XAffixProperty } from './affix.property';\r\n\r\n@Component({\r\n  selector: `${XAffixPrefix}`,\r\n  templateUrl: './affix.component.html',\r\n  styleUrls: ['./affix.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAffixComponent extends XAffixProperty {}\r\n","<div #affix class=\"x-affix\" [style.top]=\"top()\" [style.left]=\"left()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XAffixComponent } from './affix.component';\r\n\r\n@NgModule({\r\n  exports: [XAffixComponent],\r\n  imports: [XAffixComponent]\r\n})\r\nexport class XAffixModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACI,MAAM,YAAY,GAAG;AACrB,MAAM,mBAAmB,GAAG;AAEnC;;AAEG;MAIU,cAAe,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;AAH1E,IAAA,WAAA,GAAA;;AAIE;;;;;;;;;;;AAWG;AACM,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAkB,IAAI,CAAC,MAAM,EAAE,GAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACzF;;;;;;;;;;;AAWG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAkB,IAAI,CAAC,MAAM,EAAE,IAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAC5F;iIA3BY,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,sVAFyB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAEzC,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,CAAG,EAAA,YAAY,WAAW,EAAE,QAAQ,EAAE;AACnD,iBAAA;;;ACNK,MAAO,eAAgB,SAAQ,cAAc,CAAA;iIAAtC,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,0FCV5B,2HAGA,EAAA,MAAA,EAAA,CAAA,8EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDOa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,CAAG,EAAA,YAAY,EAAE,EAGZ,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2HAAA,EAAA,MAAA,EAAA,CAAA,8EAAA,CAAA,EAAA;;;MEDpC,YAAY,CAAA;iIAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAZ,YAAY,EAAA,OAAA,EAAA,CAFb,eAAe,CAAA,EAAA,OAAA,EAAA,CADf,eAAe,CAAA,EAAA,CAAA,CAAA;kIAGd,YAAY,EAAA,CAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe;AAC1B,iBAAA;;;ACND;;AAEG;;;;"}
+{"version":3,"file":"ng-nest-ui-affix.mjs","sources":["../../../../lib/ng-nest/ui/affix/affix.property.ts","../../../../lib/ng-nest/ui/affix/affix.component.ts","../../../../lib/ng-nest/ui/affix/affix.component.html","../../../../lib/ng-nest/ui/affix/affix.module.ts","../../../../lib/ng-nest/ui/affix/ng-nest-ui-affix.ts"],"sourcesContent":["import { XNumber, XPropertyFunction, XToCssPixelValue } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\n\r\n/**\r\n * Affix\r\n * @selector x-affix\r\n * @decorator component\r\n */\r\nexport const XAffixPrefix = 'x-affix';\r\nexport const X_AFFIX_CONFIG_NAME = 'affix';\r\n\r\n/**\r\n * Affix Property\r\n */\r\n@Component({\r\n    selector: `${XAffixPrefix}-property`, template: ''\r\n})\r\nexport class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 顶部距离\r\n   * @en_US Distance from top\r\n   * @example\r\n   * \r\n   * ```html\r\n   * <x-affix top=\"5rem\">\r\n   *   <div>有垂直滚动条，我与顶部距离5rem</div>\r\n   * </x-affix>\r\n   * ```\r\n   * \r\n   */\r\n  readonly top = input<string, XNumber>(this.config?.top!, { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 左边距离\r\n   * @en_US Distance from left\r\n   * @example\r\n   * \r\n   * ```html\r\n   * <x-affix left=\"5rem\">\r\n   *   <div>有横向滚动条，我与左边距离5rem</div>\r\n   * </x-affix>\r\n   * ```\r\n   * \r\n   */\r\n  readonly left = input<string, XNumber>(this.config?.left!, { transform: XToCssPixelValue });\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\r\nimport { XAffixPrefix, XAffixProperty } from './affix.property';\r\n\r\n@Component({\r\n  selector: `${XAffixPrefix}`,\r\n  templateUrl: './affix.component.html',\r\n  styleUrls: ['./affix.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XAffixComponent extends XAffixProperty {}\r\n","<div #affix class=\"x-affix\" [style.top]=\"top()\" [style.left]=\"left()\">\r\n  <ng-content></ng-content>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XAffixComponent } from './affix.component';\r\n\r\n@NgModule({\r\n  exports: [XAffixComponent],\r\n  imports: [XAffixComponent]\r\n})\r\nexport class XAffixModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACI,MAAM,YAAY,GAAG;AACrB,MAAM,mBAAmB,GAAG;AAEnC;;AAEG;MAIU,cAAe,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;AAH1E,IAAA,WAAA,GAAA;;AAIE;;;;;;;;;;;AAWG;AACM,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAkB,IAAI,CAAC,MAAM,EAAE,GAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,KAAA,EAAI,SAAS,EAAE,gBAAgB,OAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACzF;;;;;;;;;;;AAWG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAkB,IAAI,CAAC,MAAM,EAAE,IAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAI,SAAS,EAAE,gBAAgB,OAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AAC5F,IAAA;iIA3BY,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,sVAFyB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAEzC,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,CAAA,EAAG,YAAY,WAAW,EAAE,QAAQ,EAAE;AACnD,iBAAA;;;ACNK,MAAO,eAAgB,SAAQ,cAAc,CAAA;iIAAtC,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,0FCV5B,2HAGA,EAAA,MAAA,EAAA,CAAA,8EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDOa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,CAAA,EAAG,YAAY,EAAE,EAAA,aAAA,EAGZ,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2HAAA,EAAA,MAAA,EAAA,CAAA,8EAAA,CAAA,EAAA;;;MEDpC,YAAY,CAAA;iIAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAZ,YAAY,EAAA,OAAA,EAAA,CAFb,eAAe,CAAA,EAAA,OAAA,EAAA,CADf,eAAe,CAAA,EAAA,CAAA,CAAA;kIAGd,YAAY,EAAA,CAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe;AAC1B,iBAAA;;;ACND;;AAEG;;;;"}

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

@@ -34,7 +34,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.hide = input(false, { transform: XToBoolean });
+        this.hide = input(false, ...(ngDevMode ? [{ debugName: "hide", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 标题
          * @en_US Title
@@ -45,7 +45,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.title = input();
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
         /**
          * @zh_CN 内容
          * @en_US Content
@@ -56,7 +56,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.content = input();
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
         /**
          * @zh_CN 类型
          * @en_US Alert type
@@ -71,7 +71,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.type = input('info');
+        this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          * @zh_CN 主题
          * @en_US Theme
@@ -84,7 +84,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.effect = input(this.config?.effect ?? 'light');
+        this.effect = input(this.config?.effect ?? 'light', ...(ngDevMode ? [{ debugName: "effect" }] : []));
         /**
          * @zh_CN 隐藏关闭按钮
          * @en_US Hide close button
@@ -95,7 +95,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.hideClose = input(this.config?.hideClose ?? false, { transform: XToBoolean });
+        this.hideClose = input(this.config?.hideClose ?? false, ...(ngDevMode ? [{ debugName: "hideClose", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 使用文本关闭按钮
          * @en_US Use the text to close button
@@ -106,7 +106,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.closeText = input();
+        this.closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
         /**
          * @zh_CN 显示图标
          * @en_US Show icon
@@ -121,7 +121,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.showIcon = input(this.config?.showIcon ?? false, { transform: XToBoolean });
+        this.showIcon = input(this.config?.showIcon ?? false, ...(ngDevMode ? [{ debugName: "showIcon", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 禁用动画
          * @en_US Disable animation
@@ -132,9 +132,9 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.disabledAnimation = input(this.config?.disabledAnimation ?? false, {
-            transform: XToBoolean
-        });
+        this.disabledAnimation = input(this.config?.disabledAnimation ?? false, ...(ngDevMode ? [{ debugName: "disabledAnimation", transform: XToBoolean }] : [{
+                transform: XToBoolean
+            }]));
         /**
          * @zh_CN 延迟关闭，默认 0 表示不关闭，ms
          * @en_US Delay close, the default value of 0 means do not close. ms
@@ -145,7 +145,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.duration = input(this.config?.duration ?? 0, { transform: XToNumber });
+        this.duration = input(this.config?.duration ?? 0, ...(ngDevMode ? [{ debugName: "duration", transform: XToNumber }] : [{ transform: XToNumber }]));
         /**
          * @zh_CN 手动处理关闭事件
          * @en_US Manually handle close events
@@ -156,7 +156,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.manual = input(false, { transform: XToBoolean });
+        this.manual = input(false, ...(ngDevMode ? [{ debugName: "manual", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 拖动提示框
          * @en_US Drag dialog
@@ -167,7 +167,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.draggable = input(this.config?.draggable ?? false, { transform: XToBoolean });
+        this.draggable = input(this.config?.draggable ?? false, ...(ngDevMode ? [{ debugName: "draggable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 调整提示框大小
          * @en_US Adjust the size of the box
@@ -178,7 +178,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.resizable = input(this.config?.resizable ?? false, { transform: XToBoolean });
+        this.resizable = input(this.config?.resizable ?? false, ...(ngDevMode ? [{ debugName: "resizable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 开启 resizable 调整大小，偏移屏幕左边
          * @en_US Open the resizable resize, offset screen left
@@ -189,7 +189,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.offsetLeft = input(0, { transform: XToNumber });
+        this.offsetLeft = input(0, ...(ngDevMode ? [{ debugName: "offsetLeft", transform: XToNumber }] : [{ transform: XToNumber }]));
         /**
          * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部
          * @en_US Open the resizable resize, offset screen top
@@ -200,7 +200,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.offsetTop = input(0, { transform: XToNumber });
+        this.offsetTop = input(0, ...(ngDevMode ? [{ debugName: "offsetTop", transform: XToNumber }] : [{ transform: XToNumber }]));
         /**
          * @zh_CN 最小宽度
          * @en_US Min width
@@ -211,7 +211,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.minWidth = input(this.config?.minWidth ?? '0', { transform: XToCssPixelValue });
+        this.minWidth = input(this.config?.minWidth ?? '0', ...(ngDevMode ? [{ debugName: "minWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 最小高度
          * @en_US Min height
@@ -222,7 +222,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.minHeight = input(this.config?.minHeight ?? '0', { transform: XToCssPixelValue });
+        this.minHeight = input(this.config?.minHeight ?? '0', ...(ngDevMode ? [{ debugName: "minHeight", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
         /**
          * @zh_CN 拖动范围限制，父节点选择器或者对象
          * @en_US Drag dialog
@@ -235,7 +235,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.dragBoundary = input();
+        this.dragBoundary = input(...(ngDevMode ? [undefined, { debugName: "dragBoundary" }] : []));
         /**
          * @zh_CN 设置投放容器外部的 CdkDrag 的位置。可用于为返回的用户恢复元素的位置
          * @en_US Set the location of the CDKDRAG outside the container. Can be used to recover elements for returned users
@@ -246,7 +246,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.dragFreeDragPosition = input();
+        this.dragFreeDragPosition = input(...(ngDevMode ? [undefined, { debugName: "dragFreeDragPosition" }] : []));
         /**
          * @zh_CN 自定义操作
          * @en_US Custom operation
@@ -260,7 +260,7 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          * ```
          *
          */
-        this.operationTpl = input();
+        this.operationTpl = input(...(ngDevMode ? [undefined, { debugName: "operationTpl" }] : []));
         /**
          * @zh_CN 关闭的事件
          * @en_US Closed event
@@ -313,10 +313,10 @@ class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
          */
         this.resizing = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.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 }, 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.2.4", ngImport: i0, type: XAlertProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 }, 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.0.0", ngImport: i0, type: XAlertProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAlertProperty, decorators: [{
             type: Component,
             args: [{
                     selector: `${XAlertPrefix}-property`, template: ''
@@ -326,17 +326,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class XAlertComponent extends XAlertProperty {
     constructor() {
         super();
-        this.styleHide = signal(false);
+        this.styleHide = signal(false, ...(ngDevMode ? [{ debugName: "styleHide" }] : []));
         this.classMap = computed(() => ({
             [`${XAlertPrefix}-${this.type()}`]: !XIsEmpty(this.type()),
             [`x-${this.effect()}`]: !XIsEmpty(this.effect()),
             [`${XAlertPrefix}-icon-medium`]: !XIsEmpty(this.title()) && !XIsEmpty(this.content()) && !XIsEmpty(this.showIcon()),
             [`${XAlertPrefix}-draggable`]: this.draggable()
-        }));
+        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
         this.unSubject = new Subject();
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.destoryRef = inject(DestroyRef);
-        this.destory = signal(false);
+        this.destory = signal(false, ...(ngDevMode ? [{ debugName: "destory" }] : []));
         effect(() => this.setDuration());
         this.destoryRef.onDestroy(() => {
             this.destory.set(true);
@@ -367,10 +367,10 @@ class XAlertComponent extends XAlertProperty {
             !this.destory() && this.close.emit();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-info.x-light{color:var(--x-info);background-color:var(--x-info-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-900);background-color:var(--x-warning);border-color:transparent;box-shadow:var(--x-box-shadow)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-900)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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)}\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.2.4", ngImport: i0, type: XAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-info.x-light{color:var(--x-info);background-color:var(--x-info-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-warning.x-light{color:var(--x-warning);background-color:var(--x-warning-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-900);background-color:var(--x-warning);border-color:transparent;box-shadow:var(--x-box-shadow)}.x-alert-warning.x-dark x-button.x-alert-close .x-button{color:var(--x-warning-900)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-error.x-light{color:var(--x-danger);background-color:var(--x-danger-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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-loading.x-light{color:var(--x-primary);background-color:var(--x-info-900);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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);border-color:transparent;box-shadow:var(--x-box-shadow)}.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)}\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAlertPrefix}`, imports: [
                         NgClass,
@@ -384,11 +384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class XAlertModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XAlertModule, imports: [XAlertComponent], exports: [XAlertComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertModule, imports: [XAlertComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XAlertModule, imports: [XAlertComponent], exports: [XAlertComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAlertModule, imports: [XAlertComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XAlertComponent],