@ng-nest/ui 17.0.12 → 18.0.0

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

@@ -1,19 +1,19 @@
 import { HttpClient, HttpRequest, HttpHeaders, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, Renderer2, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XInputBoolean, XWithConfig, XInputNumber, XClamp, XConfigService, XIsTemplateRef, XIsArray } from '@ng-nest/ui/core';
-import { XControlValueAccessor, XValueAccessor } from '@ng-nest/ui/base-form';
+import { input, output, Component, computed, viewChild, signal, inject, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, ViewContainerRef, NgModule } from '@angular/core';
+import { XToBoolean, XToNumber, XClamp, XIsTemplateRef, XIsEmpty, XIsArray } from '@ng-nest/ui/core';
+import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { takeUntil, map } from 'rxjs/operators';
-import { Subject, fromEvent } from 'rxjs';
-import { XI18nService } from '@ng-nest/ui/i18n';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
 import { XPortalService } from '@ng-nest/ui/portal';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { Subject, fromEvent } from 'rxjs';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { XImageGroupComponent, XImageComponent } from '@ng-nest/ui/image';
 import { XProgressComponent } from '@ng-nest/ui/progress';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Upload
@@ -21,103 +21,109 @@ import { XProgressComponent } from '@ng-nest/ui/progress';
  * @decorator component
  */
 const XUploadPrefix = 'x-upload';
-const X_CONFIG_NAME = 'upload';
+const X_UPLOAD_CONFIG_NAME = 'upload';
 /**
  * Upload Property
  */
-class XUploadProperty extends XControlValueAccessor {
+class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 显示文字
+         * @en_US Display text
+         */
+        this.text = input();
+        /**
+         * @zh_CN 请求地址
+         * @en_US Request address
+         */
+        this.action = input();
+        /**
+         * @zh_CN 上传文件类型，与原生的 input file 组件一致
+         * @en_US Upload file type, consistent with native input file component
+         */
+        this.accept = input();
         /**
          * @zh_CN 文件显示类型
          * @en_US File display type
          */
-        this.type = 'list';
+        this.type = input('list');
+        /**
+         * @zh_CN 图片类型下面加载失败显示
+         * @en_US Photo type below loading failed display
+         */
+        this.imgFallback = input();
+        /**
+         * @zh_CN 图片剪裁
+         * @en_US Picture cropping
+         */
+        this.imgCut = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 多文件上传
+         * @en_US Multiple file upload
+         */
+        this.multiple = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 点击下载
+         * @en_US click download
+         */
+        this.download = input(this.config?.download ?? true, { 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');
+        /**
+         * @zh_CN 文件列表自定义显示模板
+         * @en_US File list custom display template
+         */
+        this.filesTpl = input();
+        /**
+         * @zh_CN 限制单次上传文件个数，只有开启多文件上传 multiple 时生效，默认不做限制
+         * @en_US Limit the number of files uploaded files. Do not restrict the default
+         */
+        this.maxLimit = input(-1, { transform: XToNumber });
+        /**
+         * @zh_CN 设置上传的请求头部
+         * @en_US Set the upload request header
+         */
+        this.headers = input();
         /**
          * @zh_CN 删除按钮的事件
          * @en_US Delete button event
          */
-        this.removeClick = new EventEmitter();
+        this.removeClick = output();
         /**
          * @zh_CN 开始上传事件
          * @en_US Start upload event
          */
-        this.uploadReady = new EventEmitter();
+        this.uploadReady = output();
         /**
          * @zh_CN 正在上传事件
          * @en_US Start upload event
          */
-        this.uploading = new EventEmitter();
+        this.uploading = output();
         /**
          * @zh_CN 上传成功事件
          * @en_US Start upload event
          */
-        this.uploadSuccess = new EventEmitter();
+        this.uploadSuccess = output();
         /**
          * @zh_CN 上传失败事件
          * @en_US Start upload event
          */
-        this.uploadError = new EventEmitter();
+        this.uploadError = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XUploadProperty, selector: "x-upload-property", inputs: { text: "text", action: "action", accept: "accept", type: "type", imgFallback: "imgFallback", imgCut: "imgCut", multiple: "multiple", download: "download", multipleModel: "multipleModel", filesTpl: "filesTpl", maxLimit: "maxLimit", headers: "headers" }, 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: "18.0.1", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XUploadProperty, 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 }); }
 }
-__decorate([
-    XInputBoolean()
-], XUploadProperty.prototype, "imgCut", void 0);
-__decorate([
-    XInputBoolean()
-], XUploadProperty.prototype, "multiple", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XUploadProperty.prototype, "download", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'cover')
-], XUploadProperty.prototype, "multipleModel", void 0);
-__decorate([
-    XInputNumber()
-], XUploadProperty.prototype, "maxLimit", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}-property`, template: '' }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], imgFallback: [{
-                type: Input
-            }], imgCut: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], download: [{
-                type: Input
-            }], multipleModel: [{
-                type: Input
-            }], filesTpl: [{
-                type: Input
-            }], maxLimit: [{
-                type: Input
-            }], headers: [{
-                type: Input
-            }], removeClick: [{
-                type: Output
-            }], uploadReady: [{
-                type: Output
-            }], uploading: [{
-                type: Output
-            }], uploadSuccess: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }] } });
+        }] });
 /**
- * Upload Portal
+ * @zh_CN 上传显示窗口
+ * @en_US Upload portal
  * @selector x-upload-portal
  * @decorator component
  */
@@ -125,9 +131,20 @@ const XUploadPortalPrefix = 'x-upload-portal';
 
 class XUploadPortalComponent {
     constructor() {
-        this.ready = false;
-        this.cutType = '';
-        this.proportion = 1;
+        this.file = input();
+        this.name = computed(() => {
+            return this.file()?.name;
+        });
+        this.url = computed(() => {
+            return this.file()?.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.originalSize = {
             width: 0,
             height: 0
@@ -143,28 +160,29 @@ class XUploadPortalComponent {
             y: 0
         };
         this.doc = inject(DOCUMENT);
-        this._unSubject = new Subject();
+        this.closePortal = output();
+        this.surePortal = output();
+        this.unSubject = new Subject();
         this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
     }
     ngAfterViewInit() {
         this.setCut();
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
+        this.unSubject.next();
+        this.unSubject.complete();
     }
     setCut() {
-        let width = this.imgRef.nativeElement.clientWidth;
-        let height = this.imgRef.nativeElement.clientHeight;
-        this.renderer.setStyle(this.cutRef.nativeElement, 'width', `${width}px`);
-        this.renderer.setStyle(this.cutRef.nativeElement, 'height', `${height}px`);
-        this.renderer.setStyle(this.boundaryRef.nativeElement, 'width', `${width}px`);
-        this.renderer.setStyle(this.boundaryRef.nativeElement, 'height', `${height}px`);
-        this.renderer.setStyle(this.imgRef.nativeElement, 'width', `${width}px`);
-        this.renderer.setStyle(this.imgRef.nativeElement, 'height', `${height}px`);
-        this.renderer.setStyle(this.imgClipRef.nativeElement, 'width', `${width}px`);
-        this.renderer.setStyle(this.imgClipRef.nativeElement, 'height', `${height}px`);
+        let width = this.imgRef().nativeElement.clientWidth;
+        let height = this.imgRef().nativeElement.clientHeight;
+        this.renderer.setStyle(this.cutRef().nativeElement, 'width', `${width}px`);
+        this.renderer.setStyle(this.cutRef().nativeElement, 'height', `${height}px`);
+        this.renderer.setStyle(this.boundaryRef().nativeElement, 'width', `${width}px`);
+        this.renderer.setStyle(this.boundaryRef().nativeElement, 'height', `${height}px`);
+        this.renderer.setStyle(this.imgRef().nativeElement, 'width', `${width}px`);
+        this.renderer.setStyle(this.imgRef().nativeElement, 'height', `${height}px`);
+        this.renderer.setStyle(this.imgClipRef().nativeElement, 'width', `${width}px`);
+        this.renderer.setStyle(this.imgClipRef().nativeElement, 'height', `${height}px`);
         this.cutBox.width = width;
         this.cutBox.height = height;
         this.boundaryBox = { width, height };
@@ -175,9 +193,8 @@ class XUploadPortalComponent {
             left: 0
         };
         this.setOriginalSize();
-        this.ready = true;
-        this.cdr.detectChanges();
-        const mouseDown = fromEvent(this.cutRef.nativeElement, 'mousedown').pipe(takeUntil(this._unSubject));
+        this.ready.set(true);
+        const mouseDown = fromEvent(this.cutRef().nativeElement, 'mousedown').pipe(takeUntil(this.unSubject));
         mouseDown.subscribe((downMe) => {
             let x = downMe.pageX;
             let y = downMe.pageY;
@@ -187,8 +204,7 @@ class XUploadPortalComponent {
             let className = downMe.target.className;
             const spt = `${XUploadPortalPrefix}-cut-`;
             if (className.includes(spt)) {
-                this.cutType = className.replace(spt, '');
-                this.cdr.detectChanges();
+                this.cutType.set(className.replace(spt, ''));
             }
             fromEvent(this.doc.documentElement, 'mousemove')
                 .pipe(takeUntil(_unSub))
@@ -197,13 +213,12 @@ class XUploadPortalComponent {
                 offsetY = moveMe.pageY - y;
                 x = moveMe.pageX;
                 y = moveMe.pageY;
-                this.setCutEle(this.cutType, offsetX, offsetY);
+                this.setCutEle(this.cutType(), offsetX, offsetY);
             });
             fromEvent(this.doc.documentElement, 'mouseup')
                 .pipe(takeUntil(_unSub))
                 .subscribe(() => {
-                this.cutType = '';
-                this.cdr.detectChanges();
+                this.cutType.set('');
                 _unSub.next();
                 _unSub.complete();
             });
@@ -211,10 +226,10 @@ class XUploadPortalComponent {
     }
     setOriginalSize() {
         const img = new Image();
-        img.src = this.file?.url;
+        img.src = this.url();
         img.onload = () => {
             this.originalSize = { width: img.width, height: img.height };
-            this.proportion = this.boundaryBox.width / this.originalSize.width;
+            this.proportion.set(this.boundaryBox.width / this.originalSize.width);
         };
     }
     setCutEle(position, x, y) {
@@ -258,7 +273,7 @@ class XUploadPortalComponent {
                 this.cutBox.y += y;
                 break;
         }
-        const boundaryRect = this.boundaryRef.nativeElement.getBoundingClientRect();
+        const boundaryRect = this.boundaryRef().nativeElement.getBoundingClientRect();
         const maxY = boundaryRect.height - this.cutBox.height;
         const maxX = boundaryRect.width - this.cutBox.width;
         this.cutBox.x = XClamp(this.cutBox.x, 0, maxX);
@@ -273,147 +288,122 @@ class XUploadPortalComponent {
             bottom: this.cutBox.height + this.cutBox.y,
             left: this.cutBox.x
         };
-        this.renderer.setStyle(this.imgClipRef.nativeElement, 'clip', `rect(${this.clipRect.top}px,${this.clipRect.right}px,${this.clipRect.bottom}px,${this.clipRect.left}px)`);
-        this.renderer.setStyle(this.cutRef.nativeElement, 'width', `${this.cutBox.width}px`);
-        this.renderer.setStyle(this.cutRef.nativeElement, 'height', `${this.cutBox.height}px`);
-        this.renderer.setStyle(this.cutRef.nativeElement, 'transform', `translate3d(${this.cutBox.x}px, ${this.cutBox.y}px, 0)`);
+        this.renderer.setStyle(this.imgClipRef().nativeElement, 'clip', `rect(${this.clipRect.top}px,${this.clipRect.right}px,${this.clipRect.bottom}px,${this.clipRect.left}px)`);
+        this.renderer.setStyle(this.cutRef().nativeElement, 'width', `${this.cutBox.width}px`);
+        this.renderer.setStyle(this.cutRef().nativeElement, 'height', `${this.cutBox.height}px`);
+        this.renderer.setStyle(this.cutRef().nativeElement, 'transform', `translate3d(${this.cutBox.x}px, ${this.cutBox.y}px, 0)`);
     }
     sure() {
         const canvas = this.doc.createElement('canvas');
-        canvas.width = this.cutBox.width / this.proportion;
-        canvas.height = this.cutBox.height / this.proportion;
+        canvas.width = this.cutBox.width / this.proportion();
+        canvas.height = this.cutBox.height / this.proportion();
         const context = canvas.getContext('2d');
         const img = new Image();
-        img.src = this.file?.url;
+        img.src = this.url();
         img.crossOrigin = 'anonymous';
         img.onload = () => {
-            context.drawImage(img, -this.cutBox.x / this.proportion, -this.cutBox.y / this.proportion);
+            context.drawImage(img, -this.cutBox.x / this.proportion(), -this.cutBox.y / this.proportion());
             canvas.toBlob((blob) => {
-                this.surePortal(blob);
-                this.closePortal();
+                this.surePortal.emit(blob);
+                this.closePortal.emit();
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XUploadPortalComponent, isStandalone: true, selector: "x-upload-portal", viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: 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>{{ file?.name }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"file?.url\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"file?.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;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: "18.0.1", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.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;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: "17.3.10", ngImport: i0, type: XUploadPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XUploadPortalPrefix}`, standalone: true, 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>{{ file?.name }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"file?.url\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"file?.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;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: { imgRef: [{
-                type: ViewChild,
-                args: ['imgRef']
-            }], imgClipRef: [{
-                type: ViewChild,
-                args: ['imgClipRef']
-            }], boundaryRef: [{
-                type: ViewChild,
-                args: ['boundaryRef']
-            }], cutRef: [{
-                type: ViewChild,
-                args: ['cutRef']
-            }] } });
+            args: [{ selector: `${XUploadPortalPrefix}`, standalone: true, 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;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"] }]
+        }] });
 
 class XUploadComponent extends XUploadProperty {
+    writeValue(value) {
+        this.value.set(value);
+        this.setFiles();
+    }
     constructor() {
-        super(...arguments);
-        this.files = [];
-        this.showUpload = false;
-        this.uploadNodes = [];
-        this.locale = {};
-        this._unSubject = new Subject();
+        super();
         this.http = inject(HttpClient, { optional: true });
-        this.cdr = inject(ChangeDetectorRef);
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.i18n = inject(XI18nService);
-        this.configService = inject(XConfigService);
-    }
-    get getText() {
-        return this.text || this.locale.uploadText;
-    }
-    get isTemplateText() {
-        return XIsTemplateRef(this.getText);
-    }
-    writeValue(value) {
-        this.value = value;
-        this.setFiles();
-        this.cdr.detectChanges();
-    }
-    ngOnInit() {
+        this.file = viewChild.required('file');
+        this.files = signal([]);
+        this.showUpload = signal(false);
+        this.uploadNodes = signal([]);
+        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.acceptSignal = computed(() => {
+            if (this.type() === 'img' && XIsEmpty(this.accept()))
+                return 'image/*';
+            return this.accept();
+        });
         if (!this.http) {
             throw new Error(`${XUploadPrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
-        this.i18n.localeChange
-            .pipe(map((x) => x.upload), takeUntil(this._unSubject))
-            .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
-        });
-        if (this.type === 'img')
-            this.accept = 'image/*';
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
     }
     setFiles() {
-        if (!Array.isArray(this.value))
+        if (!Array.isArray(this.value()))
             return;
-        // if (this.type !== 'img') return;
-        this.files = this.value.map((x) => {
+        this.files.set(this.value().map((x) => {
             if (!x.state)
                 x.state = 'success';
             return x;
-        });
+        }));
     }
     change(event) {
         let input = event.target;
         if (typeof input === 'undefined' || input.files?.length === 0)
             return;
         let files = [];
-        let max = this.maxLimit ? Number(this.maxLimit) : input.files.length;
+        let max = this.maxLimit() > -1 ? this.maxLimit() : input.files.length;
         for (let i = 0; i < max; i++) {
             let file = input.files.item(i);
             file.state = 'ready';
             files = [...files, file];
         }
         if (files.length > 0)
-            this.showUpload = true;
-        if (this.multipleModel === 'cover') {
-            this.files = files;
+            this.showUpload.set(true);
+        if (this.multipleModel() === 'cover') {
+            this.files.set(files);
         }
-        else if (this.multipleModel === 'add') {
-            this.files = [...this.files, ...files];
+        else if (this.multipleModel() === 'add') {
+            this.files.update((x) => [...x, ...files]);
         }
-        this.value = this.files;
-        this.onChange && this.onChange(this.value);
+        this.value.set(this.files());
+        this.onChange && this.onChange(this.value());
         this.onUploading();
         input.value = '';
-        this.cdr.detectChanges();
     }
     remove(file, index) {
-        this.files.splice(index, 1);
-        if (this.files.length === 0)
-            this.file.nativeElement.value = '';
-        this.showUpload = this.files.find((x) => x.state === 'ready') != null;
-        const vindex = this.value.indexOf(file);
+        this.files.update((x) => {
+            x.splice(index, 1);
+            return [...x];
+        });
+        if (this.files().length === 0)
+            this.file().nativeElement.value = '';
+        this.showUpload.set(this.files().find((x) => x.state === 'ready') != null);
+        const vindex = this.value().indexOf(file);
         if (vindex > -1) {
-            this.value.splice(vindex, 1);
-            this.onChange && this.onChange(this.value);
+            this.value.update((x) => {
+                x.splice(vindex, 1);
+                return [...x];
+            });
+            this.onChange && this.onChange(this.value());
         }
         this.removeClick.emit({ file: file, index: index });
-        this.cdr.detectChanges();
     }
     uploadClick() {
-        if (this.disabled)
+        if (this.disabledComputed())
             return;
-        this.file.nativeElement.click();
+        this.file().nativeElement.click();
     }
     onUploading() {
         if (!this.action)
             return;
-        let readyFiles = this.files.filter((x) => x.state === 'ready');
+        let readyFiles = this.files().filter((x) => x.state === 'ready');
         readyFiles.forEach((x) => {
             this.uploadFile(x);
         });
@@ -421,11 +411,11 @@ class XUploadComponent extends XUploadProperty {
     uploadFile(file, index = -1) {
         let formData = new FormData();
         formData.append('file', file);
-        const req = new HttpRequest('POST', this.action, formData, {
+        const req = new HttpRequest('POST', this.action(), formData, {
             reportProgress: true,
             responseType: 'arraybuffer',
             withCredentials: false,
-            headers: new HttpHeaders(this.headers)
+            headers: new HttpHeaders(this.headers())
         });
         this.http
             ?.request(req)
@@ -446,19 +436,22 @@ class XUploadComponent extends XUploadProperty {
                     console.error(e);
                 }
                 if (index !== -1) {
-                    this.files[index] = file;
+                    this.files.update((x) => {
+                        x[index] = file;
+                        return [...x];
+                    });
                 }
                 this.uploadSuccess.emit(file);
-                this.cdr.detectChanges();
             };
         })))
-            .subscribe(() => {
-            this.showUpload = this.files.find((y) => y.state === 'ready') != null;
-            this.cdr.detectChanges();
-        }, () => {
-            file.state = 'error';
-            this.uploadError.emit(file);
-            this.cdr.detectChanges();
+            .subscribe({
+            complete: () => {
+                this.showUpload.set(this.files().find((y) => y.state === 'ready') != null);
+            },
+            error: () => {
+                file.state = 'error';
+                this.uploadError.emit(file);
+            }
         });
     }
     getEventMessage(event, file, successFunc) {
@@ -466,17 +459,17 @@ class XUploadComponent extends XUploadProperty {
             case HttpEventType.Sent:
                 file.state = 'ready';
                 this.uploadReady.emit(file);
-                return `开始上传文件`;
+                return this.locale().beginUploadText;
             case HttpEventType.UploadProgress:
                 file.state = 'uploading';
                 if (event.total)
                     file.percent = Math.round((100 * event.loaded) / event.total);
                 this.uploading.emit(file);
-                return `上传中`;
+                return this.locale().uploadingText;
             case HttpEventType.Response:
                 file.state = 'success';
                 successFunc(event.body);
-                return `文件上传完毕`;
+                return this.locale().uploadCompleted;
         }
         return;
     }
@@ -496,17 +489,14 @@ class XUploadComponent extends XUploadProperty {
         let componentRef = this.portal?.componentRef;
         if (!componentRef)
             return;
-        Object.assign(componentRef.instance, {
-            file: file,
-            closePortal: () => this.closePortal(),
-            destroyPortal: () => this.destroyPortal(),
-            surePortal: (blob) => {
-                const fl = new File([blob], file.name, { type: blob.type });
-                fl.state = 'ready';
-                this.uploadFile(fl, index);
-            }
+        componentRef.setInput('file', file);
+        const { closePortal, surePortal } = componentRef.instance;
+        closePortal.subscribe(() => this.closePortal());
+        surePortal.subscribe((blob) => {
+            const fl = new File([blob], file.name, { type: blob.type });
+            fl.state = 'ready';
+            this.uploadFile(fl, index);
         });
-        componentRef.changeDetectorRef.detectChanges();
     }
     portalAttached() {
         return this.portal?.overlayRef?.hasAttached();
@@ -514,7 +504,6 @@ class XUploadComponent extends XUploadProperty {
     closePortal() {
         if (this.portalAttached()) {
             this.portal?.overlayRef?.detach();
-            this.cdr.detectChanges();
             return true;
         }
         return false;
@@ -524,16 +513,14 @@ class XUploadComponent extends XUploadProperty {
     }
     imgError(_event, file) {
         file.state = 'error';
-        this.cdr.detectChanges();
     }
     imgLoad(file) {
         file.state = 'success';
-        this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XUploadComponent, isStandalone: true, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type }}\" [class.x-disabled]=\"disabled\">\r\n  <input\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"accept\"\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)\" onlyIcon closable 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\" [disabled]=\"disabled\" type=\"primary\">{{ getText }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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 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: "18.0.1", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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    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)\" onlyIcon closable 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\" [disabled]=\"disabledComputed()\" type=\"primary\">{{ getText() }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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: "17.3.10", ngImport: i0, type: XUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}`, standalone: true, imports: [
                         NgTemplateOutlet,
@@ -543,18 +530,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XImageGroupComponent,
                         XImageComponent,
                         XProgressComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent)], template: "<div #upload class=\"x-upload x-upload-{{ type }}\" [class.x-disabled]=\"disabled\">\r\n  <input\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"accept\"\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)\" onlyIcon closable 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\" [disabled]=\"disabled\" type=\"primary\">{{ getText }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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 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"] }]
-        }], propDecorators: { file: [{
-                type: ViewChild,
-                args: ['file', { static: true }]
-            }] } });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent)], template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <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)\" onlyIcon closable 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\" [disabled]=\"disabledComputed()\" type=\"primary\">{{ getText() }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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"] }]
+        }], ctorParameters: () => [] });
 
 class XUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XUploadComponent],