@ng-nest/ui 20.3.5 → 20.3.6

package/empty/index.d.ts

@@ -0,0 +1,62 @@
+import * as i0 from '@angular/core';
+import * as _ng_nest_ui_core from '@ng-nest/ui/core';
+import { XTemplate } from '@ng-nest/ui/core';
+
+/**
+ * Empty
+ * @selector x-empty
+ * @decorator component
+ */
+declare const XEmptyPrefix = "x-empty";
+declare const XEmptyProperty_base: new () => {
+    config: _ng_nest_ui_core.XEmptyConfig | undefined;
+};
+/**
+ * Empty Property
+ */
+declare class XEmptyProperty extends XEmptyProperty_base {
+    /**
+     * @zh_CN 图片地址或自定义模板
+     * @en_US Picture address or custom template
+     * @example
+     *
+     * ```html
+     * <x-empty img="https://ngnest.com/img/logo/logo-144x144.png"></x-empty>
+     * <x-empty [img]="imgTpl"></x-empty>
+     * <ng-template #imgTpl><x-icon type="fto-user"></x-icon></ng-template>
+     * ```
+     *
+     */
+    readonly img: i0.InputSignal<XTemplate>;
+    /**
+     * @zh_CN 内容或自定义模板
+     * @en_US Content or custom template
+     * @example
+     *
+     * ```html
+     * <x-empty content="None data"></x-empty>
+     * <x-empty [content]="contentTpl"></x-empty>
+     * <ng-template #contentTpl>
+     *   <x-icon type="fto-user"></x-icon>
+     *   None data
+     * </ng-template>
+     * ```
+     *
+     */
+    readonly content: i0.InputSignal<XTemplate>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XEmptyProperty, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XEmptyProperty, "x-empty-property", never, { "img": { "alias": "img"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class XEmptyComponent extends XEmptyProperty {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XEmptyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XEmptyComponent, "x-empty", never, {}, {}, never, never, true, never>;
+}
+
+declare class XEmptyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XEmptyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XEmptyModule, never, [typeof XEmptyComponent], [typeof XEmptyComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<XEmptyModule>;
+}
+
+export { XEmptyComponent, XEmptyModule, XEmptyPrefix, XEmptyProperty };

package/examples/index.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+
+declare class XExamplesComponent {
+    className: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XExamplesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XExamplesComponent, "x-examples", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class XExamplesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XExamplesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XExamplesModule, never, [typeof XExamplesComponent], [typeof XExamplesComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<XExamplesModule>;
+}
+
+/**
+ * Examples
+ * @selector x-examples
+ * @decorator component
+ */
+declare const XExamplesPrefix = "x-examples";
+
+export { XExamplesComponent, XExamplesModule, XExamplesPrefix };

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

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { input, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XPropertyFunction, XToCssPixelValue } from '@ng-nest/ui/core';
+
+/**
+ * Affix
+ * @selector x-affix
+ * @decorator component
+ */
+const XAffixPrefix = 'x-affix';
+const X_AFFIX_CONFIG_NAME = 'affix';
+/**
+ * Affix Property
+ */
+class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 顶部距离
+         * @en_US Distance from top
+         * @example
+         *
+         * ```html
+         * <x-affix top="5rem">
+         *   <div>有垂直滚动条，我与顶部距离5rem</div>
+         * </x-affix>
+         * ```
+         *
+         */
+        this.top = input(this.config?.top, ...(ngDevMode ? [{ debugName: "top", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 左边距离
+         * @en_US Distance from left
+         * @example
+         *
+         * ```html
+         * <x-affix left="5rem">
+         *   <div>有横向滚动条，我与左边距离5rem</div>
+         * </x-affix>
+         * ```
+         *
+         */
+        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.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.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.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.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.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.5", ngImport: i0, type: XAffixModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XAffixComponent],
+                    imports: [XAffixComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XAffixComponent, XAffixModule, XAffixPrefix, XAffixProperty, X_AFFIX_CONFIG_NAME };
+//# sourceMappingURL=ng-nest-ui-affix.mjs.map

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

@@ -0,0 +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({ selector: `${XAffixPrefix}-property`, template: '' })\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;MAEU,cAAe,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;AAD1E,IAAA,WAAA,GAAA;;AAEE;;;;;;;;;;;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,sVADkC,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAClD,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;mBAAC,EAAE,QAAQ,EAAE,CAAA,EAAG,YAAY,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE;;;ACJ3D,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

@@ -0,0 +1,417 @@
+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 } from '@ng-nest/ui/core';
+import { Subject, of } from 'rxjs';
+import { delay, takeUntil } from 'rxjs/operators';
+import { XIconComponent } from '@ng-nest/ui/icon';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XButtonComponent } from '@ng-nest/ui/button';
+import * as i1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { XResizableDirective } from '@ng-nest/ui/resizable';
+import { isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Alert
+ * @selector x-alert
+ * @decorator component
+ */
+const XAlertPrefix = 'x-alert';
+const X_ALERT_CONFIG_NAME = 'alert';
+/**
+ * Alert Property
+ */
+class XAlertProperty extends XPropertyFunction(X_ALERT_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 隐藏
+         * @en_US Hide
+         * @example
+         *
+         * ```html
+         * <x-alert title="隐藏，看不见" hide> </x-alert>
+         * ```
+         *
+         */
+        this.hide = input(false, ...(ngDevMode ? [{ debugName: "hide", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 标题
+         * @en_US Title
+         * @example
+         *
+         * ```html
+         * <x-alert title="Title" > </x-alert>
+         * ```
+         *
+         */
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        /**
+         * @zh_CN 内容
+         * @en_US Content
+         * @example
+         *
+         * ```html
+         * <x-alert content="Content" > </x-alert>
+         * ```
+         *
+         */
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        /**
+         * @zh_CN 类型
+         * @en_US Alert type
+         * @example
+         *
+         * ```html
+         * <x-alert type="success" > </x-alert>
+         * <x-alert type="info" > </x-alert>
+         * <x-alert type="warning" > </x-alert>
+         * <x-alert type="error" > </x-alert>
+         * <x-alert type="loading" > </x-alert>
+         * ```
+         *
+         */
+        this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * @zh_CN 主题
+         * @en_US Theme
+         * @example
+         *
+         * ```html
+         * <x-alert effect="light" > </x-alert>
+         * <x-alert effect="dark" > </x-alert>
+         * <x-alert effect="white" > </x-alert>
+         * ```
+         *
+         */
+        this.effect = input(this.config?.effect ?? 'light', ...(ngDevMode ? [{ debugName: "effect" }] : []));
+        /**
+         * @zh_CN 形态变体
+         * @en_US Variant
+         * @example
+         *
+         * ```html
+         * <x-alert variant="outlined" > </x-alert>
+         * <x-alert variant="filled" > </x-alert>
+         * <x-alert variant="shadow" > </x-alert>
+         * <x-alert variant="borderless" > </x-alert>
+         * ```
+         *
+         */
+        this.variant = input(this.config?.variant ?? 'shadow', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        /**
+         * @zh_CN 隐藏关闭按钮
+         * @en_US Hide close button
+         * @example
+         *
+         * ```html
+         * <x-alert title="no close button" hideClose> </x-alert>
+         * ```
+         *
+         */
+        this.hideClose = input(this.config?.hideClose ?? false, ...(ngDevMode ? [{ debugName: "hideClose", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 使用文本关闭按钮
+         * @en_US Use the text to close button
+         * @example
+         *
+         * ```html
+         * <x-alert title="close button is text" closeText="close"> </x-alert>
+         * ```
+         *
+         */
+        this.closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
+        /**
+         * @zh_CN 显示图标
+         * @en_US Show icon
+         * @example
+         *
+         * ```html
+         * <x-alert type="success" showIcon> </x-alert>
+         * <x-alert type="info" showIcon> </x-alert>
+         * <x-alert type="warning" showIcon> </x-alert>
+         * <x-alert type="error" showIcon> </x-alert>
+         * <x-alert type="loading" showIcon> </x-alert>
+         * ```
+         *
+         */
+        this.showIcon = input(this.config?.showIcon ?? false, ...(ngDevMode ? [{ debugName: "showIcon", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 禁用动画
+         * @en_US Disable animation
+         * @example
+         *
+         * ```html
+         * <x-alert title="disabled animation" disabledAnimation> </x-alert>
+         * ```
+         *
+         */
+        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
+         * @example
+         *
+         * ```html
+         * <x-alert title="duration close" duration="1000"> </x-alert>
+         * ```
+         *
+         */
+        this.duration = input(this.config?.duration ?? 0, ...(ngDevMode ? [{ debugName: "duration", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 手动处理关闭事件
+         * @en_US Manually handle close events
+         * @example
+         *
+         * ```html
+         * <x-alert title="manual close" manual> </x-alert>
+         * ```
+         *
+         */
+        this.manual = input(false, ...(ngDevMode ? [{ debugName: "manual", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 拖动提示框
+         * @en_US Drag dialog
+         * @example
+         *
+         * ```html
+         * <x-alert title="draggable alert" draggable> </x-alert>
+         * ```
+         *
+         */
+        this.draggable = input(this.config?.draggable ?? false, ...(ngDevMode ? [{ debugName: "draggable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 调整提示框大小
+         * @en_US Adjust the size of the box
+         * @example
+         *
+         * ```html
+         * <x-alert title="resizable alert" resizable> </x-alert>
+         * ```
+         *
+         */
+        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
+         * @example
+         *
+         * ```html
+         * <x-alert title="resizable alert" resizable offsetLeft="100"> </x-alert>
+         * ```
+         *
+         */
+        this.offsetLeft = input(0, ...(ngDevMode ? [{ debugName: "offsetLeft", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 开启 resizable 调整大小，偏移屏幕顶部
+         * @en_US Open the resizable resize, offset screen top
+         * @example
+         *
+         * ```html
+         * <x-alert title="resizable alert" resizable offsetTop="100"> </x-alert>
+         * ```
+         *
+         */
+        this.offsetTop = input(0, ...(ngDevMode ? [{ debugName: "offsetTop", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 最小宽度
+         * @en_US Min width
+         * @example
+         *
+         * ```html
+         * <x-alert title="alert min-width" minWidth="100"> </x-alert>
+         * ```
+         *
+         */
+        this.minWidth = input(this.config?.minWidth ?? '0', ...(ngDevMode ? [{ debugName: "minWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 最小高度
+         * @en_US Min height
+         * @example
+         *
+         * ```html
+         * <x-alert title="alert min-height" minHeight="100"> </x-alert>
+         * ```
+         *
+         */
+        this.minHeight = input(this.config?.minHeight ?? '0', ...(ngDevMode ? [{ debugName: "minHeight", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 拖动范围限制，父节点选择器或者对象
+         * @en_US Drag dialog
+         * @example
+         *
+         * ```html
+         * <div #element style="width:300px; height: 300px">
+         *   <x-alert title="draggable boundary" draggable [dragBoundary]="element"> </x-alert>
+         * </div>
+         * ```
+         *
+         */
+        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
+         * @example
+         *
+         * ```html
+         * <x-alert title="draggable boundary" draggable [dragFreeDragPosition]="{ x: 100, y: 100 }"> </x-alert>
+         * ```
+         *
+         */
+        this.dragFreeDragPosition = input(...(ngDevMode ? [undefined, { debugName: "dragFreeDragPosition" }] : []));
+        /**
+         * @zh_CN 自定义操作
+         * @en_US Custom operation
+         * @example
+         *
+         * ```html
+         * <x-alert title="operation template" [operationTpl]="operationTpl"> </x-alert>
+         * <ng-template #operationTpl>
+         *   <x-button>Button</x-button>
+         * </ng-template>
+         * ```
+         *
+         */
+        this.operationTpl = input(...(ngDevMode ? [undefined, { debugName: "operationTpl" }] : []));
+        /**
+         * @zh_CN 关闭的事件
+         * @en_US Closed event
+         * @example
+         *
+         * ```html
+         * <x-alert title="operation template" (close)="close()"> </x-alert>
+         * ```
+         *
+         * ```typescript
+         * close() {
+         *   console.log("close")
+         * }
+         * ```
+         *
+         */
+        this.close = output();
+        /**
+         * @zh_CN 拖动结束的事件
+         * @en_US Drag end event
+         * @example
+         *
+         * ```html
+         * <x-alert title="draggable event" draggable (dragEnded)="dragEnded($event)"> </x-alert>
+         * ```
+         *
+         * ```typescript
+         * dragEnded(event: CdkDragEnd) {
+         *   console.log(event)
+         * }
+         * ```
+         *
+         */
+        this.dragEnded = output();
+        /**
+         * @zh_CN 改变尺寸事件
+         * @en_US Change the size event
+         * @example
+         *
+         * ```html
+         * <x-alert title="resizable event" resizable (resizing)="resizing($event)"> </x-alert>
+         * ```
+         *
+         * ```typescript
+         * resizing(event: XResizableEvent) {
+         *   console.log(event)
+         * }
+         * ```
+         *
+         */
+        this.resizing = output();
+    }
+    /** @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.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() {
+        super();
+        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(),
+            [`${XAlertPrefix}-${this.variant()}`]: !XIsEmpty(this.variant())
+        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
+        this.unSubject = new Subject();
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.destoryRef = inject(DestroyRef);
+        this.destory = signal(false, ...(ngDevMode ? [{ debugName: "destory" }] : []));
+        effect(() => this.setDuration());
+        this.destoryRef.onDestroy(() => {
+            this.destory.set(true);
+            this.unSubject.next();
+            this.unSubject.complete();
+        });
+    }
+    setDuration() {
+        if (this.duration() && this.isBrowser) {
+            this.durationSubscription?.unsubscribe();
+            this.durationSubscription = of(true)
+                .pipe(delay(this.duration()), takeUntil(this.unSubject))
+                .subscribe(() => {
+                this.onClose();
+            });
+        }
+    }
+    onClose() {
+        if (this.manual()) {
+            !this.destory() && this.close.emit();
+        }
+        else {
+            this.styleHide.set(true);
+        }
+    }
+    onCloseAnimationDone() {
+        if (this.hide()) {
+            !this.destory() && this.close.emit();
+        }
+    }
+    /** @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.5", ngImport: i0, type: XAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XAlertPrefix}`, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        DragDropModule,
+                        XIconComponent,
+                        XButtonComponent,
+                        XOutletDirective,
+                        XResizableDirective
+                    ], 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.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.5", ngImport: i0, type: XAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XAlertComponent],
+                    imports: [XAlertComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XAlertComponent, XAlertModule, XAlertPrefix, XAlertProperty, X_ALERT_CONFIG_NAME };
+//# sourceMappingURL=ng-nest-ui-alert.mjs.map