@ng-nest/ui 20.0.7 → 20.1.0

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

@@ -18,17 +18,17 @@ 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');
+        this.font = input('Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif', ...(ngDevMode ? [{ debugName: "font" }] : []));
         /**
          * @zh_CN 显示文字
          * @en_US Display text
          */
-        this.text = input();
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", 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: "20.2.4", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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: "20.0.0", ngImport: i0, type: XTypographyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTypographyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTypographyPrefix}-property`, template: '' }]
         }] });
@@ -36,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class XTypographyComponent extends XTypographyProperty {
     constructor() {
         super(...arguments);
-        this.firstText = signal('');
+        this.firstText = signal('', ...(ngDevMode ? [{ debugName: "firstText" }] : []));
         this.renderer = inject(Renderer2);
         this.elementRef = inject(ElementRef);
     }
@@ -49,20 +49,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: "20.0.0", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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: "20.2.4", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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: "20.0.0", ngImport: i0, type: XTypographyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: "20.0.0", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTypographyModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XTypographyModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XTypographyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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

@@ -32,62 +32,62 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          * @zh_CN 显示文字
          * @en_US Display text
          */
-        this.text = input();
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         /**
          * @zh_CN 请求地址
          * @en_US Request address
          */
-        this.action = input();
+        this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
         /**
          * @zh_CN 上传文件类型，与原生的 input file 组件一致
          * @en_US Upload file type, consistent with native input file component
          */
-        this.accept = input();
+        this.accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
         /**
          * @zh_CN 文件显示类型
          * @en_US File display type
          */
-        this.type = input('list');
+        this.type = input('list', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          * @zh_CN 图片类型下面加载失败显示
          * @en_US Photo type below loading failed display
          */
-        this.imgFallback = input();
+        this.imgFallback = input(...(ngDevMode ? [undefined, { debugName: "imgFallback" }] : []));
         /**
          * @zh_CN 图片剪裁
          * @en_US Picture cropping
          */
-        this.imgCut = input(false, { transform: XToBoolean });
+        this.imgCut = input(false, ...(ngDevMode ? [{ debugName: "imgCut", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 多文件上传
          * @en_US Multiple file upload
          */
-        this.multiple = input(false, { transform: XToBoolean });
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 点击下载
          * @en_US click download
          */
-        this.download = input(this.config?.download ?? true, { transform: XToBoolean });
+        this.download = input(this.config?.download ?? true, ...(ngDevMode ? [{ debugName: "download", transform: XToBoolean }] : [{ 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');
+        this.multipleModel = input(this.config?.multipleModel ?? 'cover', ...(ngDevMode ? [{ debugName: "multipleModel" }] : []));
         /**
          * @zh_CN 文件列表自定义显示模板
          * @en_US File list custom display template
          */
-        this.filesTpl = input();
+        this.filesTpl = input(...(ngDevMode ? [undefined, { debugName: "filesTpl" }] : []));
         /**
          * @zh_CN 限制单次上传文件个数，只有开启多文件上传 multiple 时生效，默认不做限制
          * @en_US Limit the number of files uploaded files. Do not restrict the default
          */
-        this.maxLimit = input(-1, { transform: XToNumber });
+        this.maxLimit = input(-1, ...(ngDevMode ? [{ debugName: "maxLimit", transform: XToNumber }] : [{ transform: XToNumber }]));
         /**
          * @zh_CN 设置上传的请求头部
          * @en_US Set the upload request header
          */
-        this.headers = input();
+        this.headers = input(...(ngDevMode ? [undefined, { debugName: "headers" }] : []));
         /**
          * @zh_CN 删除按钮的事件
          * @en_US Delete button event
@@ -114,10 +114,10 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          */
         this.uploadError = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", 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 }, 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: "20.2.4", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 }, 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: "20.0.0", ngImport: i0, type: XUploadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}-property`, template: '' }]
         }] });
@@ -131,20 +131,20 @@ const XUploadPortalPrefix = 'x-upload-portal';
 
 class XUploadPortalComponent {
     constructor() {
-        this.file = input();
+        this.file = input(...(ngDevMode ? [undefined, { debugName: "file" }] : []));
         this.name = computed(() => {
             return this.file()?.name;
-        });
+        }, ...(ngDevMode ? [{ debugName: "name" }] : []));
         this.url = computed(() => {
             return this.file()?.url;
-        });
+        }, ...(ngDevMode ? [{ debugName: "url" }] : []));
         this.imgRef = viewChild.required('imgRef');
         this.imgClipRef = viewChild.required('imgClipRef');
         this.boundaryRef = viewChild.required('boundaryRef');
         this.cutRef = viewChild.required('cutRef');
-        this.ready = signal(false);
-        this.cutType = signal('');
-        this.proportion = signal(1);
+        this.ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
+        this.cutType = signal('', ...(ngDevMode ? [{ debugName: "cutType" }] : []));
+        this.proportion = signal(1, ...(ngDevMode ? [{ debugName: "proportion" }] : []));
         this.originalSize = {
             width: 0,
             height: 0
@@ -309,10 +309,10 @@ class XUploadPortalComponent {
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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: "20.2.4", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", 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: "20.0.0", ngImport: i0, type: XUploadPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
         }] });
@@ -329,17 +329,17 @@ class XUploadComponent extends XUploadProperty {
         this.viewContainerRef = inject(ViewContainerRef);
         this.i18n = inject(XI18nService);
         this.file = viewChild.required('file');
-        this.files = signal([]);
-        this.showUpload = signal(false);
-        this.uploadNodes = signal([]);
+        this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+        this.showUpload = signal(false, ...(ngDevMode ? [{ debugName: "showUpload" }] : []));
+        this.uploadNodes = signal([], ...(ngDevMode ? [{ debugName: "uploadNodes" }] : []));
         this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.upload)), { initialValue: zh_CN.upload });
-        this.getText = computed(() => this.text() || this.locale().uploadText);
-        this.isTemplateText = computed(() => XIsTemplateRef(this.getText()));
+        this.getText = computed(() => this.text() || this.locale().uploadText, ...(ngDevMode ? [{ debugName: "getText" }] : []));
+        this.isTemplateText = computed(() => XIsTemplateRef(this.getText()), ...(ngDevMode ? [{ debugName: "isTemplateText" }] : []));
         this.acceptSignal = computed(() => {
             if (this.type() === 'img' && XIsEmpty(this.accept()))
                 return 'image/*';
             return this.accept();
-        });
+        }, ...(ngDevMode ? [{ debugName: "acceptSignal" }] : []));
         if (!this.http) {
             throw new Error(`${XUploadPrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
@@ -514,10 +514,10 @@ class XUploadComponent extends XUploadProperty {
     imgLoad(file) {
         file.state = 'success';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: XUploadComponent, isStandalone: true, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], 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        <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      </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  <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</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)}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: XUploadComponent, isStandalone: true, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], 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        <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      </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  <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</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)}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}`, imports: [
                         NgTemplateOutlet,
@@ -531,11 +531,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class XUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: XUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: XUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XUploadComponent],