@ng-nest/ui 20.1.4 → 20.1.7

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

@@ -1,19 +1,21 @@
 import { HttpClient, HttpRequest, HttpHeaders, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { input, output, Component, computed, viewChild, signal, inject, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, NgModule } from '@angular/core';
-import { XToBoolean, XToNumber, XClamp, XIsTemplateRef, XIsEmpty, XIsArray } from '@ng-nest/ui/core';
+import { input, output, Component, computed, viewChild, signal, inject, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, DOCUMENT as DOCUMENT$1, RendererFactory2, Injectable, ViewContainerRef, ElementRef, effect, untracked, HostBinding, NgModule } from '@angular/core';
+import { XToBoolean, XToNumber, XClamp, XComputedStyle, XIsTemplateRef, XIsEmpty, XIsArray } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { takeUntil, map } from 'rxjs/operators';
 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 { Subject, fromEvent, Subscription } 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';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 /**
  * Upload
@@ -38,6 +40,31 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          * @en_US Request address
          */
         this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域
+         * @en_US Drag and drop upload area
+         */
+        this.dropContainer = input(...(ngDevMode ? [undefined, { debugName: "dropContainer" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的图标
+         * @en_US Drag and drop upload area icon
+         */
+        this.dropIcon = input(...(ngDevMode ? [undefined, { debugName: "dropIcon" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的标题
+         * @en_US Drag and drop upload area title
+         */
+        this.dropTitle = input(...(ngDevMode ? [undefined, { debugName: "dropTitle" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的描述
+         * @en_US Drag and drop upload area description
+         */
+        this.dropDescription = input(...(ngDevMode ? [undefined, { debugName: "dropDescription" }] : []));
+        /**
+         * @zh_CN 直接显示可拖拽上传的区域
+         * @en_US Show the drag and drop upload area directly
+         */
+        this.showDrop = input(false, ...(ngDevMode ? [{ debugName: "showDrop", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 上传文件类型，与原生的 input file 组件一致
          * @en_US Upload file type, consistent with native input file component
@@ -115,7 +142,7 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
         this.uploadError = output();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
@@ -317,7 +344,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             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"] }]
         }] });
 
+class XDragOverlayComponent {
+    constructor() {
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        this.iconString = computed(() => this.icon(), ...(ngDevMode ? [{ debugName: "iconString" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-drag-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"] }]
+        }] });
+
+class XDragOverlayService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.document = inject(DOCUMENT$1);
+        this.overlayRef = null;
+        this.componentRef = null;
+        this.containerPosition = '';
+        this.factory = inject(RendererFactory2);
+        this.renderer = this.factory.createRenderer(null, null);
+    }
+    createOverlay(container, params) {
+        this.removeOverlay(container);
+        this.containerPosition = container.style.position;
+        this.renderer.setStyle(container, 'position', 'relative');
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this.overlay.position().global(),
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+        this.overlayRef = this.overlay.create(overlayConfig);
+        if (this.overlayRef && this.overlayRef.overlayElement) {
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'width', container.offsetWidth + 'px');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'height', container.offsetHeight + 'px');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'border-radius', XComputedStyle(container, 'border-radius'));
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'position', 'absolute');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'pointer-events', 'none');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'z-index', 'none');
+        }
+        const portal = new ComponentPortal(XDragOverlayComponent);
+        this.componentRef = this.overlayRef.attach(portal);
+        this.componentRef.setInput('icon', params.icon);
+        this.componentRef.setInput('title', params.title);
+        this.componentRef.setInput('description', params.description);
+        if (this.overlayRef && this.overlayRef.overlayElement) {
+            container.appendChild(this.overlayRef.overlayElement);
+        }
+    }
+    removeOverlay(container) {
+        if (this.overlayRef) {
+            const resizeObserver = this.overlayRef.resizeObserver;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            if (this.overlayRef.overlayElement && this.overlayRef.overlayElement.parentNode) {
+                this.overlayRef.overlayElement.parentNode.removeChild(this.overlayRef.overlayElement);
+            }
+            this.renderer.setStyle(container, 'position', this.containerPosition);
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+            this.componentRef = null;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class XUploadComponent extends XUploadProperty {
+    get getShowDrop() {
+        return this.showDrop();
+    }
     writeValue(value) {
         this.value.set(value);
         this.setFiles();
@@ -328,6 +435,10 @@ class XUploadComponent extends XUploadProperty {
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.i18n = inject(XI18nService);
+        this.renderer = inject(Renderer2);
+        this.dragOverlayService = inject(XDragOverlayService);
+        this.dragCounter = 0;
+        this.elementRef = inject(ElementRef);
         this.file = viewChild.required('file');
         this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
         this.showUpload = signal(false, ...(ngDevMode ? [{ debugName: "showUpload" }] : []));
@@ -343,6 +454,82 @@ class XUploadComponent extends XUploadProperty {
         if (!this.http) {
             throw new Error(`${XUploadPrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
+        effect(() => {
+            const container = this.dropContainer();
+            untracked(() => {
+                this.setupDropContainer(container);
+            });
+        });
+    }
+    ngAfterViewInit() {
+        if (this.showDrop() && this.dropContainer()) {
+            this.setupDropContainer(this.dropContainer());
+        }
+    }
+    ngOnDestory() {
+        if (this.dropSubscription) {
+            this.dropSubscription.unsubscribe();
+        }
+    }
+    setupDropContainer(container) {
+        if (this.dropSubscription) {
+            this.dropSubscription.unsubscribe();
+        }
+        if (!container)
+            return;
+        const element = container instanceof ElementRef ? container.nativeElement : container;
+        const dragEnter$ = fromEvent(element, 'dragenter');
+        const dragOver$ = fromEvent(element, 'dragover');
+        const dragLeave$ = fromEvent(element, 'dragleave');
+        const drop$ = fromEvent(element, 'drop');
+        this.dropSubscription = new Subscription();
+        this.dropSubscription.add(dragEnter$.subscribe((event) => {
+            event.preventDefault();
+            this.dragCounter++;
+            if (this.dragCounter === 1) {
+                this.addDragOverStyle(element);
+            }
+        }));
+        this.dropSubscription.add(dragOver$.subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        }));
+        this.dropSubscription.add(dragLeave$.subscribe((event) => {
+            event.preventDefault();
+            this.dragCounter--;
+            if (this.dragCounter === 0) {
+                this.removeDragOverStyle(element);
+            }
+        }));
+        this.dropSubscription.add(drop$.subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dragCounter = 0;
+            this.removeDragOverStyle(element);
+            const files = event.dataTransfer?.files;
+            if (files && files.length > 0) {
+                this.handleFiles(files);
+            }
+        }));
+    }
+    addDragOverStyle(element) {
+        if (this.showDrop()) {
+            this.renderer.addClass(this.elementRef.nativeElement, 'x-upload-drag-over');
+        }
+        else {
+            const icon = this.dropIcon();
+            const title = this.dropTitle();
+            const description = this.dropDescription();
+            this.dragOverlayService.createOverlay(element, { icon, title, description });
+        }
+    }
+    removeDragOverStyle(element) {
+        if (this.showDrop()) {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'x-upload-drag-over');
+        }
+        else {
+            this.dragOverlayService.removeOverlay(element);
+        }
     }
     setFiles() {
         if (!Array.isArray(this.value()))
@@ -357,10 +544,14 @@ class XUploadComponent extends XUploadProperty {
         let input = event.target;
         if (typeof input === 'undefined' || input.files?.length === 0)
             return;
+        this.handleFiles(input.files);
+        input.value = '';
+    }
+    handleFiles(fileList) {
         let files = [];
-        let max = this.maxLimit() > -1 ? this.maxLimit() : input.files.length;
+        let max = this.maxLimit() > -1 ? this.maxLimit() : fileList.length;
         for (let i = 0; i < max; i++) {
-            let file = input.files.item(i);
+            let file = fileList.item(i);
             file.state = 'ready';
             files = [...files, file];
         }
@@ -375,7 +566,6 @@ class XUploadComponent extends XUploadProperty {
         this.value.set(this.files());
         this.onChange && this.onChange(this.value());
         this.onUploading();
-        input.value = '';
     }
     remove(file, index) {
         this.files.update((x) => {
@@ -515,7 +705,7 @@ class XUploadComponent extends XUploadProperty {
         file.state = 'success';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
@@ -526,9 +716,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         XButtonComponent,
                         XImageGroupComponent,
                         XImageComponent,
-                        XProgressComponent
-                    ], 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    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"] }]
-        }], ctorParameters: () => [] });
+                        XProgressComponent,
+                        XDragOverlayComponent
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { getShowDrop: [{
+                type: HostBinding,
+                args: ['class.x-upload-show-drop']
+            }] } });
 
 class XUploadModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }