@ng-nest/ui 21.0.13 → 22.0.1

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

@@ -18,17 +18,19 @@ class XTypographyProperty extends XProperty {
          * @zh_CN 字体
          * @en_US Font
          */
-        this.font = input('Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif', ...(ngDevMode ? [{ debugName: "font" }] : []));
+        this.font = input('Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "font" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 显示文字
          * @en_US Display text
          */
-        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.text = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XTypographyProperty, isStandalone: true, selector: "x-typography-property", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: XTypographyProperty, isStandalone: true, selector: "x-typography-property", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTypographyPrefix}-property`, template: '' }]
         }], propDecorators: { font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
@@ -36,7 +38,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 class XTypographyComponent extends XTypographyProperty {
     constructor() {
         super(...arguments);
-        this.firstText = signal('', ...(ngDevMode ? [{ debugName: "firstText" }] : []));
+        this.firstText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstText" }] : /* istanbul ignore next */ []));
         this.renderer = inject(Renderer2);
         this.elementRef = inject(ElementRef);
     }
@@ -49,20 +52,20 @@ class XTypographyComponent extends XTypographyProperty {
         if (text && text.length > 0)
             this.firstText.set(text.slice(0, 1));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: XTypographyComponent, isStandalone: true, selector: "x-typography", usesInheritance: true, ngImport: i0, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: XTypographyComponent, isStandalone: true, selector: "x-typography", usesInheritance: true, ngImport: i0, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-typography', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"] }]
         }] });
 
 class XTypographyModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XTypographyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XTypographyModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTypographyComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-typography.mjs","sources":["../../../../lib/ng-nest/ui/typography/typography.property.ts","../../../../lib/ng-nest/ui/typography/typography.component.ts","../../../../lib/ng-nest/ui/typography/typography.component.html","../../../../lib/ng-nest/ui/typography/typography.module.ts","../../../../lib/ng-nest/ui/typography/ng-nest-ui-typography.ts"],"sourcesContent":["import { XProperty } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\n\r\n/**\r\n * Typography\r\n * @selector x-typography\r\n * @decorator component\r\n */\r\nexport const XTypographyPrefix = 'x-typography';\r\n\r\n/**\r\n * Typography Property\r\n */\r\n@Component({ selector: `${XTypographyPrefix}-property`, template: '' })\r\nexport class XTypographyProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 字体\r\n   * @en_US Font\r\n   */\r\n  readonly font = input<string>(\r\n    'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif'\r\n  );\r\n  /**\r\n   * @zh_CN 显示文字\r\n   * @en_US Display text\r\n   */\r\n  readonly text = input<string>();\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  inject,\r\n  signal\r\n} from '@angular/core';\r\nimport { XTypographyPrefix, XTypographyProperty } from './typography.property';\r\n\r\n@Component({\r\n  selector: 'x-typography',\r\n  templateUrl: './typography.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTypographyComponent extends XTypographyProperty implements OnInit {\r\n  firstText = signal('');\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n\r\n  ngOnInit() {\r\n    this.renderer.addClass(this.elementRef.nativeElement, XTypographyPrefix);\r\n    const font = this.font();\r\n    const text = this.text();\r\n    if (font) this.renderer.setStyle(this.elementRef.nativeElement, 'font-family', font);\r\n    if (text && text.length > 0) this.firstText.set(text.slice(0, 1));\r\n  }\r\n}\r\n","<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>常规</span>\r\n      <span class=\"x-typography-blod\">粗体</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTypographyComponent } from './typography.component';\r\n\r\n@NgModule({\r\n  exports: [XTypographyComponent],\r\n  imports: [XTypographyComponent]\r\n})\r\nexport class XTypographyModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-typography.mjs","sources":["../../../../lib/ng-nest/ui/typography/typography.property.ts","../../../../lib/ng-nest/ui/typography/typography.component.ts","../../../../lib/ng-nest/ui/typography/typography.component.html","../../../../lib/ng-nest/ui/typography/typography.module.ts","../../../../lib/ng-nest/ui/typography/ng-nest-ui-typography.ts"],"sourcesContent":["import { XProperty } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\n\r\n/**\r\n * Typography\r\n * @selector x-typography\r\n * @decorator component\r\n */\r\nexport const XTypographyPrefix = 'x-typography';\r\n\r\n/**\r\n * Typography Property\r\n */\r\n@Component({ selector: `${XTypographyPrefix}-property`, template: '' })\r\nexport class XTypographyProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 字体\r\n   * @en_US Font\r\n   */\r\n  readonly font = input<string>(\r\n    'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif'\r\n  );\r\n  /**\r\n   * @zh_CN 显示文字\r\n   * @en_US Display text\r\n   */\r\n  readonly text = input<string>();\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  Renderer2,\r\n  ElementRef,\r\n  inject,\r\n  signal\r\n} from '@angular/core';\r\nimport { XTypographyPrefix, XTypographyProperty } from './typography.property';\r\n\r\n@Component({\r\n  selector: 'x-typography',\r\n  templateUrl: './typography.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTypographyComponent extends XTypographyProperty implements OnInit {\r\n  firstText = signal('');\r\n  private renderer = inject(Renderer2);\r\n  private elementRef = inject(ElementRef);\r\n\r\n  ngOnInit() {\r\n    this.renderer.addClass(this.elementRef.nativeElement, XTypographyPrefix);\r\n    const font = this.font();\r\n    const text = this.text();\r\n    if (font) this.renderer.setStyle(this.elementRef.nativeElement, 'font-family', font);\r\n    if (text && text.length > 0) this.firstText.set(text.slice(0, 1));\r\n  }\r\n}\r\n","<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>常规</span>\r\n      <span class=\"x-typography-blod\">粗体</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTypographyComponent } from './typography.component';\r\n\r\n@NgModule({\r\n  exports: [XTypographyComponent],\r\n  imports: [XTypographyComponent]\r\n})\r\nexport class XTypographyModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -34,87 +34,99 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          * @zh_CN 显示文字
          * @en_US Display text
          */
-        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.text = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 请求地址
          * @en_US Request address
          */
-        this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
+        this.action = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "action" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 可拖拽上传的区域
          * @en_US Drag and drop upload area
          */
-        this.dropContainer = input(...(ngDevMode ? [undefined, { debugName: "dropContainer" }] : []));
+        this.dropContainer = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dropContainer" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 可拖拽上传的区域的图标
          * @en_US Drag and drop upload area icon
          */
-        this.dropIcon = input(...(ngDevMode ? [undefined, { debugName: "dropIcon" }] : []));
+        this.dropIcon = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dropIcon" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 可拖拽上传的区域的标题
          * @en_US Drag and drop upload area title
          */
-        this.dropTitle = input(...(ngDevMode ? [undefined, { debugName: "dropTitle" }] : []));
+        this.dropTitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dropTitle" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 可拖拽上传的区域的描述
          * @en_US Drag and drop upload area description
          */
-        this.dropDescription = input(...(ngDevMode ? [undefined, { debugName: "dropDescription" }] : []));
+        this.dropDescription = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dropDescription" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 直接显示可拖拽上传的区域
          * @en_US Show the drag and drop upload area directly
          */
-        this.showDrop = input(false, { ...(ngDevMode ? { debugName: "showDrop" } : {}), transform: XToBoolean });
+        this.showDrop = input(false, { ...(ngDevMode ? { debugName: "showDrop" } : /* istanbul ignore next */ {}), transform: XToBoolean });
         /**
          * @zh_CN 上传文件类型，与原生的 input file 组件一致
          * @en_US Upload file type, consistent with native input file component
          */
-        this.accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+        this.accept = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 文件显示类型
          * @en_US File display type
          */
-        this.type = input('list', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('list', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 图片类型下面加载失败显示
          * @en_US Photo type below loading failed display
          */
-        this.imgFallback = input(...(ngDevMode ? [undefined, { debugName: "imgFallback" }] : []));
+        this.imgFallback = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "imgFallback" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 图片剪裁
          * @en_US Picture cropping
          */
-        this.imgCut = input(false, { ...(ngDevMode ? { debugName: "imgCut" } : {}), transform: XToBoolean });
+        this.imgCut = input(false, { ...(ngDevMode ? { debugName: "imgCut" } : /* istanbul ignore next */ {}), transform: XToBoolean });
         /**
          * @zh_CN 多文件上传
          * @en_US Multiple file upload
          */
-        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: XToBoolean });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: XToBoolean });
         /**
          * @zh_CN 点击下载
          * @en_US click download
          */
-        this.download = input(this.config?.download ?? true, { ...(ngDevMode ? { debugName: "download" } : {}), transform: XToBoolean });
+        this.download = input(this.config?.download ?? true, { ...(ngDevMode ? { debugName: "download" } : /* istanbul ignore next */ {}), transform: XToBoolean });
         /**
          * @zh_CN 多次上传的模式，cover 覆盖现有, add 继续添加
          * @en_US For many upload mode, 'cover' covers the existing, 'add' continue to add
          */
-        this.multipleModel = input(this.config?.multipleModel ?? 'cover', ...(ngDevMode ? [{ debugName: "multipleModel" }] : []));
+        this.multipleModel = input(this.config?.multipleModel ?? 'cover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multipleModel" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 文件列表自定义显示模板
          * @en_US File list custom display template
          */
-        this.filesTpl = input(...(ngDevMode ? [undefined, { debugName: "filesTpl" }] : []));
+        this.filesTpl = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filesTpl" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 限制单次上传文件个数，只有开启多文件上传 multiple 时生效，默认不做限制
          * @en_US Limit the number of files uploaded files. Do not restrict the default
          */
-        this.maxLimit = input(-1, { ...(ngDevMode ? { debugName: "maxLimit" } : {}), transform: XToNumber });
+        this.maxLimit = input(-1, { ...(ngDevMode ? { debugName: "maxLimit" } : /* istanbul ignore next */ {}), transform: XToNumber });
         /**
          * @zh_CN 设置上传的请求头部
          * @en_US Set the upload request header
          */
-        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : []));
+        this.headers = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headers" }] : /* istanbul ignore next */ []));
         /**
          * @zh_CN 删除按钮的事件
          * @en_US Delete button event
@@ -141,10 +153,10 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          */
         this.uploadError = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}-property`, template: '' }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], dropContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropContainer", required: false }] }], dropIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropIcon", required: false }] }], dropTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropTitle", required: false }] }], dropDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropDescription", required: false }] }], showDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDrop", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], imgFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgFallback", required: false }] }], imgCut: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgCut", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], multipleModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleModel", required: false }] }], filesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesTpl", required: false }] }], maxLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLimit", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }], uploadReady: [{ type: i0.Output, args: ["uploadReady"] }], uploading: [{ type: i0.Output, args: ["uploading"] }], uploadSuccess: [{ type: i0.Output, args: ["uploadSuccess"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }] } });
@@ -158,20 +170,26 @@ const XUploadPortalPrefix = 'x-upload-portal';
 
 class XUploadPortalComponent {
     constructor() {
-        this.file = input(...(ngDevMode ? [undefined, { debugName: "file" }] : []));
+        this.file = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "file" }] : /* istanbul ignore next */ []));
         this.name = computed(() => {
             return this.file()?.name;
-        }, ...(ngDevMode ? [{ debugName: "name" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         this.url = computed(() => {
             return this.file()?.url;
-        }, ...(ngDevMode ? [{ debugName: "url" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
         this.imgRef = viewChild.required('imgRef');
         this.imgClipRef = viewChild.required('imgClipRef');
         this.boundaryRef = viewChild.required('boundaryRef');
         this.cutRef = viewChild.required('cutRef');
-        this.ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
-        this.cutType = signal('', ...(ngDevMode ? [{ debugName: "cutType" }] : []));
-        this.proportion = signal(1, ...(ngDevMode ? [{ debugName: "proportion" }] : []));
+        this.ready = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+        this.cutType = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cutType" }] : /* istanbul ignore next */ []));
+        this.proportion = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "proportion" }] : /* istanbul ignore next */ []));
         this.originalSize = {
             width: 0,
             height: 0
@@ -336,25 +354,29 @@ class XUploadPortalComponent {
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: XUploadPortalComponent, isStandalone: true, selector: "x-upload-portal", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePortal: "closePortal", surePortal: "surePortal" }, viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true, isSignal: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true, isSignal: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true, isSignal: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: XUploadPortalComponent, isStandalone: true, selector: "x-upload-portal", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePortal: "closePortal", surePortal: "surePortal" }, viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true, isSignal: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true, isSignal: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true, isSignal: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPortalPrefix}`, imports: [XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"] }]
         }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], imgRef: [{ type: i0.ViewChild, args: ['imgRef', { isSignal: true }] }], imgClipRef: [{ type: i0.ViewChild, args: ['imgClipRef', { isSignal: true }] }], boundaryRef: [{ type: i0.ViewChild, args: ['boundaryRef', { isSignal: true }] }], cutRef: [{ type: i0.ViewChild, args: ['cutRef', { isSignal: true }] }], closePortal: [{ type: i0.Output, args: ["closePortal"] }], surePortal: [{ type: i0.Output, args: ["surePortal"] }] } });
 
 class XDragOverlayComponent {
     constructor() {
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
-        this.iconString = computed(() => this.icon(), ...(ngDevMode ? [{ debugName: "iconString" }] : []));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        this.icon = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        this.iconString = computed(() => this.icon(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconString" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XDragOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XDragOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-drag-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
@@ -414,10 +436,10 @@ class XDragOverlayService {
             this.componentRef = null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XDragOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XDragOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -443,17 +465,23 @@ class XUploadComponent extends XUploadProperty {
         this.dragCounter = 0;
         this.elementRef = inject(ElementRef);
         this.file = viewChild.required('file');
-        this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
-        this.showUpload = signal(false, ...(ngDevMode ? [{ debugName: "showUpload" }] : []));
-        this.uploadNodes = signal([], ...(ngDevMode ? [{ debugName: "uploadNodes" }] : []));
+        this.files = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        this.showUpload = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showUpload" }] : /* istanbul ignore next */ []));
+        this.uploadNodes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uploadNodes" }] : /* istanbul ignore next */ []));
         this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.upload)), { initialValue: zh_CN.upload });
-        this.getText = computed(() => this.text() || this.locale().uploadText, ...(ngDevMode ? [{ debugName: "getText" }] : []));
-        this.isTemplateText = computed(() => XIsTemplateRef(this.getText()), ...(ngDevMode ? [{ debugName: "isTemplateText" }] : []));
+        this.getText = computed(() => this.text() || this.locale().uploadText, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getText" }] : /* istanbul ignore next */ []));
+        this.isTemplateText = computed(() => XIsTemplateRef(this.getText()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTemplateText" }] : /* istanbul ignore next */ []));
         this.acceptSignal = computed(() => {
             if (this.type() === 'img' && XIsEmpty(this.accept()))
                 return 'image/*';
             return this.accept();
-        }, ...(ngDevMode ? [{ debugName: "acceptSignal" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "acceptSignal" }] : /* istanbul ignore next */ []));
         if (!this.http) {
             throw new Error(`${XUploadPrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
@@ -707,10 +735,10 @@ class XUploadComponent extends XUploadProperty {
     imgLoad(file) {
         file.state = 'success';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}`, imports: [
                         NgTemplateOutlet,
@@ -728,11 +756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }], file: [{ type: i0.ViewChild, args: ['file', { isSignal: true }] }] } });
 
 class XUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: XUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XUploadComponent],