ngx-kit 6.0.2 → 6.2.0

package/fesm2022/ngx-kit-dropzone.mjs

@@ -1,5 +1,61 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injectable, InjectionToken, input, output, signal, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { filter, map, finalize } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http';
+
+class NgxDropzoneHttpUploadService {
+    http = inject(HttpClient);
+    upload(request) {
+        const body = new FormData();
+        body.append(request.alias, request.file, request.file.name);
+        for (const [key, value] of Object.entries(request.data ?? {})) {
+            body.append(key, value instanceof Blob ? value : String(value));
+        }
+        const headers = request.headers instanceof HttpHeaders ? request.headers : new HttpHeaders(request.headers);
+        return this.http
+            .post(request.url, body, {
+            headers,
+            withCredentials: request.withCredentials ?? false,
+            observe: 'events',
+            reportProgress: true,
+        })
+            .pipe(filter((event) => event.type === HttpEventType.UploadProgress || event.type === HttpEventType.Response), map((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                const total = event.total;
+                return {
+                    type: 'progress',
+                    loaded: event.loaded,
+                    total,
+                    percent: total ? Math.min(100, Math.round((event.loaded / total) * 100)) : 0,
+                };
+            }
+            return {
+                type: 'response',
+                response: event.body,
+                status: event.status,
+                headers: event.headers,
+            };
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropzoneHttpUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropzoneHttpUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropzoneHttpUploadService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Upload adapter used by ngx-dropzone.
+ *
+ * Default: Angular HttpClient.
+ * Override this token at application/component level to use Axios or any
+ * other upload implementation.
+ */
+const NGX_DROPZONE_UPLOAD_SERVICE = new InjectionToken('NGX_DROPZONE_UPLOAD_SERVICE', {
+    providedIn: 'root',
+    factory: () => inject(NgxDropzoneHttpUploadService),
+});
 
 /**
  * چک می‌کنه یه فایل با pattern رشته‌ای accept (مثل input[type=file])
@@ -91,19 +147,6 @@ let uidCounter = 0;
 function nextId() {
     return `ngx-dz-${Date.now().toString(36)}-${uidCounter++}`;
 }
-/**
- * ناحیه‌ی درگ‌اند‌دراپِ فایل — کاملاً مستقل (بدون وابستگی به هیچ lib
- * دیگه‌ای، حتی shared)، signal-based و OnPush.
- *
- * ویژگی‌های مهمی که معمولاً پیاده‌سازی‌های ساده‌ی dropzone ندارن:
- *  - شمارنده‌ی dragenter/dragleave: چون dragleave برای فرزندهای داخل
- *    dropzone هم شلیک می‌شه، پیاده‌سازی‌های ساده موقع درگ‌کردن روی متن/آیکون
- *    داخل ناحیه، حالت "درگ" رو اشتباهی خاموش می‌کنن (چشمک‌زدن). این‌جا با
- *    شمارنده حل شده.
- *  - پیمایش بازگشتیِ پوشه‌ها (وقتی کاربر یه پوشه رو درگ کنه، نه فقط فایل).
- *  - قابل‌دسترسی با کیبورد (focusable + Enter/Space).
- *  - پاک‌سازی object URL پیش‌نمایش‌ها روی حذف/destroy (وگرنه نشتی حافظه‌ست).
- */
 class NgxDropzoneComponent {
     /** الگوی accept مثل input[type=file]: "image/*", ".pdf,.docx" و ... */
     accept = input('', /* @ts-ignore */
@@ -121,17 +164,61 @@ class NgxDropzoneComponent {
     /** نمایش لیست/پیش‌نمایش فایل‌های انتخاب‌شده داخل خودِ کامپوننت */
     showFileList = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showFileList" }] : /* istanbul ignore next */ []));
+    /** Upload endpoint. */
+    uploadUrl = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadUrl" }] : /* istanbul ignore next */ []));
+    /** Multipart form-data field name. */
+    uploadAlias = input('file', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadAlias" }] : /* istanbul ignore next */ []));
+    /** Automatically enqueue newly accepted files for upload. */
+    autoUpload = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoUpload" }] : /* istanbul ignore next */ []));
+    /** Maximum number of simultaneous uploads. */
+    maxParallel = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxParallel" }] : /* istanbul ignore next */ []));
+    /**
+     * Manual upload behavior:
+     * - all: one "Upload all" action uploads all pending files.
+     * - single: every pending row gets its own Upload button.
+     */
+    uploadMode = input('all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadMode" }] : /* istanbul ignore next */ []));
+    /** Extra multipart form fields sent with every file. */
+    uploadData = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadData" }] : /* istanbul ignore next */ []));
+    /** Optional request headers. */
+    uploadHeaders = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadHeaders" }] : /* istanbul ignore next */ []));
+    /** Send credentials/cookies with the upload request. */
+    uploadWithCredentials = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadWithCredentials" }] : /* istanbul ignore next */ []));
     filesAdded = output();
     filesRejected = output();
-    /** کل لیست فعلی (بعد از هر تغییر) — برای binding راحت‌تر */
     filesChange = output();
+    /** Emitted when an individual upload starts. */
+    uploadStarted = output();
+    /** Emitted for every upload progress update. */
+    uploadProgress = output();
+    /** Emitted after a file is successfully uploaded. */
+    uploadSuccess = output();
+    /** Emitted when an upload fails. */
+    uploadError = output();
     files = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
     isDragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
     dragCounter = 0;
+    uploadService = inject(NGX_DROPZONE_UPLOAD_SERVICE);
     fileInput = viewChild('fileInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    uploadSubscriptions = new Map();
+    uploadQueue = [];
+    activeUploads = 0;
+    activeUploadIds = new Set();
+    pendingCount = computed(() => this.files().filter((item) => this.isPending(item)).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingCount" }] : /* istanbul ignore next */ []));
+    hasUploadConfiguration = computed(() => this.uploadUrl().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasUploadConfiguration" }] : /* istanbul ignore next */ []));
     hint = computed(() => {
         const parts = [];
         const accept = this.accept();
@@ -146,12 +233,20 @@ class NgxDropzoneComponent {
     formatSize(bytes) {
         return formatBytes(bytes);
     }
+    isPending(item) {
+        return item.status === 'pending' || item.status === 'accepted';
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
     ngOnDestroy() {
-        // همه‌ی object URLهای پیش‌نمایش باید revoke بشن، وگرنه تا وقتی تب باز
-        // باشه، بلاب‌های تصویر توی حافظه‌ی مرورگر می‌مونن.
-        for (const f of this.files()) {
-            if (f.previewUrl)
-                URL.revokeObjectURL(f.previewUrl);
+        for (const subscription of this.uploadSubscriptions.values()) {
+            subscription.unsubscribe();
+        }
+        this.uploadSubscriptions.clear();
+        for (const item of this.files()) {
+            if (item.previewUrl)
+                URL.revokeObjectURL(item.previewUrl);
         }
     }
     onDragEnter(ev) {
@@ -162,10 +257,10 @@ class NgxDropzoneComponent {
         this.isDragging.set(true);
     }
     onDragOver(ev) {
-        // بدون preventDefault روی dragover، رویداد drop اصلاً شلیک نمی‌شه.
         ev.preventDefault();
-        if (ev.dataTransfer)
+        if (ev.dataTransfer) {
             ev.dataTransfer.dropEffect = this.disabled() ? 'none' : 'copy';
+        }
     }
     onDragLeave(ev) {
         ev.preventDefault();
@@ -199,22 +294,46 @@ class NgxDropzoneComponent {
         const input = ev.target;
         const files = Array.from(input.files ?? []);
         this.handleIncomingFiles(files);
-        // اجازه بده همون فایل دوباره انتخاب بشه (input تغییر نمی‌کنه وگرنه)
         input.value = '';
     }
     removeFile(id) {
         const target = this.files().find((f) => f.id === id);
+        this.uploadSubscriptions.get(id)?.unsubscribe();
+        this.uploadSubscriptions.delete(id);
+        // Unsubscribing an HttpClient upload cancels the request. Release its
+        // concurrency slot immediately; finalize() will see that the id is no
+        // longer active and won't decrement twice.
+        if (this.activeUploadIds.delete(id)) {
+            this.activeUploads = Math.max(0, this.activeUploads - 1);
+        }
         if (target?.previewUrl)
             URL.revokeObjectURL(target.previewUrl);
         this.files.update((list) => list.filter((f) => f.id !== id));
+        // Remove stale queue entries. The queue is intentionally lazy, so an
+        // entry can safely remain until pumpQueue() sees that it no longer exists.
         this.emitCurrentFiles();
+        this.pumpQueue();
+    }
+    uploadAll() {
+        this.enqueueUploads(this.files()
+            .filter((item) => this.isPending(item))
+            .map((item) => item.id));
+    }
+    uploadSingle(id) {
+        this.enqueueUploads([id]);
+    }
+    retryUpload(id) {
+        this.files.update((list) => list.map((item) => item.id === id ? { ...item, status: 'pending', progress: 0, error: undefined } : item));
+        this.enqueueUploads([id]);
     }
     handleIncomingFiles(incoming) {
         if (!incoming.length)
             return;
         const accepted = [];
         const rejected = [];
-        const existingCount = this.files().filter((f) => f.status === 'accepted').length;
+        // A single-file dropzone behaves like a native single-select input:
+        // selecting another file replaces the previous one.
+        const existingCount = this.multiple() ? this.files().length : 0;
         const maxFiles = this.maxFiles();
         const maxSize = this.maxFileSize();
         const isMultiple = this.multiple();
@@ -240,33 +359,159 @@ class NgxDropzoneComponent {
                 file,
                 previewUrl: isImage ? URL.createObjectURL(file) : undefined,
                 status: 'accepted',
+                progress: 0,
             });
         }
         if (accepted.length) {
+            if (!isMultiple) {
+                for (const previous of this.files()) {
+                    this.uploadSubscriptions.get(previous.id)?.unsubscribe();
+                    this.uploadSubscriptions.delete(previous.id);
+                    this.activeUploadIds.delete(previous.id);
+                    if (previous.previewUrl)
+                        URL.revokeObjectURL(previous.previewUrl);
+                }
+                this.activeUploads = this.activeUploadIds.size;
+            }
             this.files.update((list) => (isMultiple ? [...list, ...accepted] : accepted));
             this.filesAdded.emit(accepted.map((a) => a.file));
             this.emitCurrentFiles();
+            if (this.autoUpload()) {
+                this.enqueueUploads(accepted.map((item) => item.id));
+            }
         }
         if (rejected.length) {
             this.filesRejected.emit(rejected);
         }
     }
+    enqueueUploads(ids) {
+        if (!this.uploadUrl().trim()) {
+            const error = new Error('ngx-dropzone: uploadUrl is required for uploading files.');
+            for (const id of ids)
+                this.markUploadError(id, error, false);
+            return;
+        }
+        const queued = new Set(this.uploadQueue);
+        for (const id of ids) {
+            const item = this.files().find((file) => file.id === id);
+            if (!item || !this.isPending(item) || queued.has(id))
+                continue;
+            this.uploadQueue.push(id);
+            queued.add(id);
+        }
+        this.pumpQueue();
+    }
+    pumpQueue() {
+        const limit = Math.max(1, Math.floor(this.maxParallel() || 1));
+        while (this.activeUploads < limit && this.uploadQueue.length) {
+            const id = this.uploadQueue.shift();
+            const item = this.files().find((file) => file.id === id);
+            if (!item || !this.isPending(item))
+                continue;
+            this.startUpload(item);
+        }
+    }
+    startUpload(item) {
+        this.activeUploads++;
+        this.activeUploadIds.add(item.id);
+        this.updateFile(item.id, {
+            status: 'uploading',
+            progress: 0,
+            error: undefined,
+        });
+        const current = this.files().find((file) => file.id === item.id);
+        if (current)
+            this.uploadStarted.emit(current);
+        let subscription;
+        try {
+            subscription = this.uploadService
+                .upload({
+                url: this.uploadUrl(),
+                alias: this.uploadAlias() || 'file',
+                file: item.file,
+                data: this.uploadData(),
+                headers: this.uploadHeaders(),
+                withCredentials: this.uploadWithCredentials(),
+            })
+                .pipe(finalize(() => this.finishUpload(item.id)))
+                .subscribe({
+                next: (event) => {
+                    if (event.type === 'progress') {
+                        this.updateFile(item.id, {
+                            progress: event.percent,
+                        });
+                        const updated = this.files().find((file) => file.id === item.id);
+                        if (updated) {
+                            this.uploadProgress.emit({
+                                item: updated,
+                                loaded: event.loaded,
+                                total: event.total,
+                                percent: event.percent,
+                            });
+                        }
+                        return;
+                    }
+                    this.updateFile(item.id, {
+                        status: 'uploaded',
+                        progress: 100,
+                        response: event.response,
+                        error: undefined,
+                    });
+                    const updated = this.files().find((file) => file.id === item.id);
+                    if (updated)
+                        this.uploadSuccess.emit(updated);
+                },
+                error: (error) => {
+                    this.markUploadError(item.id, error, true);
+                },
+            });
+        }
+        catch (error) {
+            this.markUploadError(item.id, error, true);
+            this.finishUpload(item.id);
+            return;
+        }
+        if (!subscription.closed)
+            this.uploadSubscriptions.set(item.id, subscription);
+    }
+    markUploadError(id, error, releaseActiveSlot) {
+        this.updateFile(id, {
+            status: 'error',
+            error,
+        });
+        const item = this.files().find((file) => file.id === id);
+        if (item)
+            this.uploadError.emit({ item, error });
+        if (!releaseActiveSlot) {
+            this.pumpQueue();
+        }
+    }
+    finishUpload(id) {
+        this.uploadSubscriptions.delete(id);
+        if (this.activeUploadIds.delete(id)) {
+            this.activeUploads = Math.max(0, this.activeUploads - 1);
+        }
+        this.pumpQueue();
+    }
+    updateFile(id, patch) {
+        this.files.update((list) => list.map((item) => (item.id === id ? { ...item, ...patch } : item)));
+    }
     emitCurrentFiles() {
         this.filesChange.emit(this.files().map((f) => f.file));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDropzoneComponent, isStandalone: true, selector: "ngx-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showFileList: { classPropertyName: "showFileList", publicName: "showFileList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", filesRejected: "filesRejected", filesChange: "filesChange" }, host: { classAttribute: "ngx-dropzone-host" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ngx-dropzone\"\n  [class.dragging]=\"isDragging()\"\n  [class.disabled]=\"disabled()\"\n  [class.has-files]=\"files().length > 0\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onBrowseClick()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"ngx-dropzone-input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"onFileInputChange($event)\" />\n\n  <div class=\"ngx-dropzone-icon-wrap\">\n    <ng-content select=\"[dropzone-icon]\">\n      <svg class=\"ngx-dropzone-icon\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"30\" height=\"30\">\n        <path\n          d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"ngx-dropzone-text\">\n    <ng-content>\n      <strong>Drop files here</strong>\n      <span>or click to browse</span>\n    </ng-content>\n  </div>\n\n  @if (hint()) {\n    <div class=\"ngx-dropzone-hint\">{{ hint() }}</div>\n  }\n</div>\n\n@if (showFileList() && files().length) {\n  <ul class=\"ngx-dropzone-list\">\n    @for (item of files(); track item.id) {\n      <li class=\"ngx-dropzone-item\">\n        <div class=\"ngx-dropzone-thumb-wrap\">\n          @if (item.previewUrl) {\n            <img class=\"ngx-dropzone-thumb\" [src]=\"item.previewUrl\" [alt]=\"item.file.name\" />\n          } @else {\n            <span class=\"ngx-dropzone-file-icon\">\uD83D\uDCC4</span>\n          }\n        </div>\n        <div class=\"ngx-dropzone-meta\">\n          <span class=\"ngx-dropzone-name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n          <span class=\"ngx-dropzone-size\">{{ formatSize(item.file.size) }}</span>\n        </div>\n        <span class=\"ngx-dropzone-status\" aria-hidden=\"true\">\u2713</span>\n        <button\n          type=\"button\"\n          class=\"ngx-dropzone-remove\"\n          [attr.aria-label]=\"'Remove ' + item.file.name\"\n          (click)=\"removeFile(item.id); $event.stopPropagation()\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.ngx-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:2.25rem 1.5rem;border-radius:16px;cursor:pointer;text-align:center;overflow:hidden;background:light-dark(#fafbfc,#1a1a1e);border:2px dashed light-dark(#d6dae1,#35353c);transition:border-color .2s ease,background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.ngx-dropzone:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,light-dark(rgba(37,99,235,.06),rgba(59,130,246,.1)),transparent 65%);opacity:0;transition:opacity .2s ease;pointer-events:none}.ngx-dropzone:hover:not(.disabled){border-color:light-dark(#93c5fd,#3b82f6);box-shadow:0 4px 18px light-dark(rgba(37,99,235,.08),rgba(0,0,0,.35))}.ngx-dropzone:hover:not(.disabled):before{opacity:1}.ngx-dropzone:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:3px}.ngx-dropzone.dragging{border-color:light-dark(#2563eb,#60a5fa);border-style:solid;background:light-dark(#eff6ff,#16213a);transform:scale(1.015);box-shadow:0 8px 28px light-dark(rgba(37,99,235,.18),rgba(59,130,246,.25))}.ngx-dropzone.dragging:before{opacity:1}.ngx-dropzone.dragging .ngx-dropzone-icon-wrap{transform:translateY(-4px) scale(1.08)}.ngx-dropzone.disabled{cursor:not-allowed;opacity:.55}.ngx-dropzone.has-files{padding-block:1.5rem}.ngx-dropzone-input{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}.ngx-dropzone-icon-wrap{display:flex;align-items:center;justify-content:center;inline-size:56px;block-size:56px;border-radius:50%;background:light-dark(#eef2ff,#232433);color:light-dark(#4f46e5,#818cf8);transition:transform .22s cubic-bezier(.34,1.56,.64,1);z-index:1}.ngx-dropzone-text{z-index:1;display:flex;flex-direction:column;gap:.15rem}.ngx-dropzone-text strong{font-size:.92rem;font-weight:600;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-text span{font-size:.8rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-hint{z-index:1;font-size:.72rem;color:light-dark(#9ca3af,#6b7280);background:light-dark(#f3f4f6,#232327);padding:.15rem .6rem;border-radius:999px}.ngx-dropzone-list{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}.ngx-dropzone-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:10px;background:light-dark(#ffffff,#1f1f24);border:1px solid light-dark(#eef0f3,#2d2d33);transition:transform .16s ease,box-shadow .16s ease;animation:ngx-dropzone-item-in .22s cubic-bezier(.22,.9,.32,1) both}.ngx-dropzone-item:hover{box-shadow:0 2px 10px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4))}@keyframes ngx-dropzone-item-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ngx-dropzone-thumb-wrap{flex-shrink:0;inline-size:38px;block-size:38px;border-radius:8px;overflow:hidden;background:light-dark(#f4f4f5,#29292f);display:flex;align-items:center;justify-content:center}.ngx-dropzone-thumb{inline-size:100%;block-size:100%;object-fit:cover}.ngx-dropzone-file-icon{font-size:1.1rem}.ngx-dropzone-meta{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.1rem}.ngx-dropzone-name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-size{font-size:.7rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-status{flex-shrink:0;inline-size:20px;block-size:20px;border-radius:50%;background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80);font-size:.7rem;display:flex;align-items:center;justify-content:center}.ngx-dropzone-remove{flex-shrink:0;appearance:none;border:none;background:transparent;cursor:pointer;color:light-dark(#9ca3af,#71717a);font-size:.8rem;line-height:1;padding:.3rem;border-radius:6px;transition:background-color .14s ease,color .14s ease}.ngx-dropzone-remove:hover{color:light-dark(#dc2626,#f87171);background:light-dark(#fee2e2,#3f1d1d)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDropzoneComponent, isStandalone: true, selector: "ngx-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showFileList: { classPropertyName: "showFileList", publicName: "showFileList", isSignal: true, isRequired: false, transformFunction: null }, uploadUrl: { classPropertyName: "uploadUrl", publicName: "uploadUrl", isSignal: true, isRequired: false, transformFunction: null }, uploadAlias: { classPropertyName: "uploadAlias", publicName: "uploadAlias", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, maxParallel: { classPropertyName: "maxParallel", publicName: "maxParallel", isSignal: true, isRequired: false, transformFunction: null }, uploadMode: { classPropertyName: "uploadMode", publicName: "uploadMode", isSignal: true, isRequired: false, transformFunction: null }, uploadData: { classPropertyName: "uploadData", publicName: "uploadData", isSignal: true, isRequired: false, transformFunction: null }, uploadHeaders: { classPropertyName: "uploadHeaders", publicName: "uploadHeaders", isSignal: true, isRequired: false, transformFunction: null }, uploadWithCredentials: { classPropertyName: "uploadWithCredentials", publicName: "uploadWithCredentials", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", filesRejected: "filesRejected", filesChange: "filesChange", uploadStarted: "uploadStarted", uploadProgress: "uploadProgress", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, host: { classAttribute: "ngx-dropzone-host" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ngx-dropzone\"\r\n  [class.dragging]=\"isDragging()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.has-files]=\"files().length > 0\"\r\n  tabindex=\"0\"\r\n  role=\"button\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  (click)=\"onBrowseClick()\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\">\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"ngx-dropzone-input\"\r\n    [accept]=\"accept()\"\r\n    [multiple]=\"multiple()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    (change)=\"onFileInputChange($event)\" />\r\n\r\n  <div class=\"ngx-dropzone-icon-wrap\">\r\n    <ng-content select=\"[dropzone-icon]\">\r\n      <svg class=\"ngx-dropzone-icon\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"30\" height=\"30\">\r\n        <path\r\n          d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </ng-content>\r\n  </div>\r\n\r\n  <div class=\"ngx-dropzone-text\">\r\n    <ng-content>\r\n      <strong>Drop files here</strong>\r\n      <span>or click to browse</span>\r\n    </ng-content>\r\n  </div>\r\n\r\n  @if (hint()) {\r\n    <div class=\"ngx-dropzone-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n\r\n@if (!autoUpload() && uploadMode() === 'all' && pendingCount() > 0) {\r\n  <div class=\"ngx-dropzone-actions\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"ngx-dropzone-upload-all\"\r\n      [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n      (click)=\"uploadAll(); $event.stopPropagation()\">\r\n      Upload all\r\n      <span>{{ pendingCount() }}</span>\r\n    </button>\r\n  </div>\r\n}\r\n\r\n@if (showFileList() && files().length) {\r\n  <ul class=\"ngx-dropzone-list\">\r\n    @for (item of files(); track item.id) {\r\n      <li class=\"ngx-dropzone-item\" [class.is-uploading]=\"item.status === 'uploading'\">\r\n        <div class=\"ngx-dropzone-thumb-wrap\">\r\n          @if (item.previewUrl) {\r\n            <img class=\"ngx-dropzone-thumb\" [src]=\"item.previewUrl\" [alt]=\"item.file.name\" />\r\n          } @else {\r\n            <span class=\"ngx-dropzone-file-icon\">\uD83D\uDCC4</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"ngx-dropzone-meta\">\r\n          <span class=\"ngx-dropzone-name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\r\n          <span class=\"ngx-dropzone-size\">{{ formatSize(item.file.size) }}</span>\r\n\r\n          @if (item.status === 'uploading' || item.status === 'uploaded') {\r\n            <div\r\n              class=\"ngx-dropzone-progress\"\r\n              role=\"progressbar\"\r\n              [attr.aria-valuenow]=\"item.progress\"\r\n              aria-valuemin=\"0\"\r\n              aria-valuemax=\"100\"\r\n              [attr.aria-label]=\"'Upload progress for ' + item.file.name\">\r\n              <span class=\"ngx-dropzone-progress-bar\" [style.width.%]=\"item.progress\"></span>\r\n            </div>\r\n            <span class=\"ngx-dropzone-progress-text\">{{ item.progress }}%</span>\r\n          }\r\n\r\n          @if (item.status === 'error') {\r\n            <span class=\"ngx-dropzone-error\">Upload failed</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"ngx-dropzone-row-actions\">\r\n          @if (!autoUpload() && uploadMode() === 'single' && isPending(item)) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-dropzone-upload\"\r\n              [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n              [attr.aria-label]=\"'Upload ' + item.file.name\"\r\n              (click)=\"uploadSingle(item.id); $event.stopPropagation()\">\r\n              Upload\r\n            </button>\r\n          }\r\n\r\n          @if (item.status === 'error') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-dropzone-retry\"\r\n              [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n              [attr.aria-label]=\"'Retry upload for ' + item.file.name\"\r\n              (click)=\"retryUpload(item.id); $event.stopPropagation()\">\r\n              Retry\r\n            </button>\r\n          }\r\n\r\n          @if (item.status === 'uploaded') {\r\n            <span class=\"ngx-dropzone-status success\" aria-label=\"Uploaded\">\u2713</span>\r\n          } @else if (item.status === 'uploading') {\r\n            <span class=\"ngx-dropzone-status uploading\" aria-label=\"Uploading\"></span>\r\n          } @else if (item.status === 'error') {\r\n            <span class=\"ngx-dropzone-status error\" aria-label=\"Upload failed\">!</span>\r\n          } @else {\r\n            <span class=\"ngx-dropzone-status pending\" aria-label=\"Pending\">\u2022</span>\r\n          }\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"ngx-dropzone-remove\"\r\n            [attr.aria-label]=\"'Remove ' + item.file.name\"\r\n            (click)=\"removeFile(item.id); $event.stopPropagation()\">\r\n            \u2715\r\n          </button>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ngx-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:2.25rem 1.5rem;border-radius:16px;cursor:pointer;text-align:center;overflow:hidden;background:light-dark(#fafbfc,#1a1a1e);border:2px dashed light-dark(#d6dae1,#35353c);transition:border-color .2s ease,background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.ngx-dropzone:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,light-dark(rgba(37,99,235,.06),rgba(59,130,246,.1)),transparent 65%);opacity:0;transition:opacity .2s ease;pointer-events:none}.ngx-dropzone:hover:not(.disabled){border-color:light-dark(#93c5fd,#3b82f6);box-shadow:0 4px 18px light-dark(rgba(37,99,235,.08),rgba(0,0,0,.35))}.ngx-dropzone:hover:not(.disabled):before{opacity:1}.ngx-dropzone:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:3px}.ngx-dropzone.dragging{border-color:light-dark(#2563eb,#60a5fa);border-style:solid;background:light-dark(#eff6ff,#16213a);transform:scale(1.015);box-shadow:0 8px 28px light-dark(rgba(37,99,235,.18),rgba(59,130,246,.25))}.ngx-dropzone.dragging:before{opacity:1}.ngx-dropzone.dragging .ngx-dropzone-icon-wrap{transform:translateY(-4px) scale(1.08)}.ngx-dropzone.disabled{cursor:not-allowed;opacity:.55}.ngx-dropzone.has-files{padding-block:1.5rem}.ngx-dropzone-input{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}.ngx-dropzone-icon-wrap{display:flex;align-items:center;justify-content:center;inline-size:56px;block-size:56px;border-radius:50%;background:light-dark(#eef2ff,#232433);color:light-dark(#4f46e5,#818cf8);transition:transform .22s cubic-bezier(.34,1.56,.64,1);z-index:1}.ngx-dropzone-text{z-index:1;display:flex;flex-direction:column;gap:.15rem}.ngx-dropzone-text strong{font-size:.92rem;font-weight:600;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-text span{font-size:.8rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-hint{z-index:1;font-size:.72rem;color:light-dark(#9ca3af,#6b7280);background:light-dark(#f3f4f6,#232327);padding:.15rem .6rem;border-radius:999px}.ngx-dropzone-list{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}.ngx-dropzone-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:10px;background:light-dark(#ffffff,#1f1f24);border:1px solid light-dark(#eef0f3,#2d2d33);transition:transform .16s ease,box-shadow .16s ease;animation:ngx-dropzone-item-in .22s cubic-bezier(.22,.9,.32,1) both}.ngx-dropzone-item:hover{box-shadow:0 2px 10px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4))}@keyframes ngx-dropzone-item-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ngx-dropzone-thumb-wrap{flex-shrink:0;inline-size:38px;block-size:38px;border-radius:8px;overflow:hidden;background:light-dark(#f4f4f5,#29292f);display:flex;align-items:center;justify-content:center}.ngx-dropzone-thumb{inline-size:100%;block-size:100%;object-fit:cover}.ngx-dropzone-file-icon{font-size:1.1rem}.ngx-dropzone-meta{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.1rem}.ngx-dropzone-name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-size{font-size:.7rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-status{flex-shrink:0;inline-size:20px;block-size:20px;border-radius:50%;background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80);font-size:.7rem;display:flex;align-items:center;justify-content:center}.ngx-dropzone-remove{flex-shrink:0;appearance:none;border:none;background:transparent;cursor:pointer;color:light-dark(#9ca3af,#71717a);font-size:.8rem;line-height:1;padding:.3rem;border-radius:6px;transition:background-color .14s ease,color .14s ease}.ngx-dropzone-remove:hover{color:light-dark(#dc2626,#f87171);background:light-dark(#fee2e2,#3f1d1d)}.ngx-dropzone-actions{display:flex;justify-content:flex-end;margin-top:.7rem}.ngx-dropzone-upload-all,.ngx-dropzone-upload,.ngx-dropzone-retry{appearance:none;border:1px solid light-dark(#dbe3f0,#3b3b45);border-radius:7px;background:light-dark(#2563eb,#3b82f6);color:#fff;cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;padding:.35rem .65rem;transition:opacity .14s ease,transform .14s ease}.ngx-dropzone-upload:hover:not(:disabled),.ngx-dropzone-upload-all:hover:not(:disabled),.ngx-dropzone-retry:hover:not(:disabled){transform:translateY(-1px)}.ngx-dropzone-upload-all:disabled,.ngx-dropzone-upload:disabled,.ngx-dropzone-retry:disabled{cursor:not-allowed;opacity:.5}.ngx-dropzone-upload-all{display:inline-flex;align-items:center;gap:.45rem}.ngx-dropzone-upload-all span{min-inline-size:1.15rem;block-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#ffffff2e}.ngx-dropzone-retry{background:transparent;color:light-dark(#dc2626,#f87171)}.ngx-dropzone-row-actions{flex-shrink:0;display:flex;align-items:center;gap:.35rem}.ngx-dropzone-item.is-uploading .ngx-dropzone-status.uploading{animation:ngx-dropzone-upload-pulse 1.1s ease-in-out infinite}.ngx-dropzone-status.pending{background:light-dark(#f4f4f5,#29292f);color:light-dark(#a1a1aa,#71717a)}.ngx-dropzone-status.uploading{background:light-dark(#dbeafe,#172554);border:3px solid light-dark(#93c5fd,#3b82f6)}.ngx-dropzone-status.error{background:light-dark(#fee2e2,#450a0a);color:light-dark(#dc2626,#f87171);font-weight:700}.ngx-dropzone-status.success{background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80)}.ngx-dropzone-progress{position:relative;inline-size:100%;block-size:4px;margin-top:.35rem;overflow:hidden;border-radius:999px;background:light-dark(#e5e7eb,#303038)}.ngx-dropzone-progress-bar{display:block;block-size:100%;border-radius:inherit;background:light-dark(#2563eb,#60a5fa);transition:width .12s linear}.ngx-dropzone-progress-text{font-size:.65rem;color:light-dark(#6b7280,#a1a1aa)}.ngx-dropzone-error{font-size:.65rem;color:light-dark(#dc2626,#f87171)}@keyframes ngx-dropzone-upload-pulse{50%{opacity:.45}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropzoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dropzone', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-dropzone-host',
-                    }, template: "<div\n  class=\"ngx-dropzone\"\n  [class.dragging]=\"isDragging()\"\n  [class.disabled]=\"disabled()\"\n  [class.has-files]=\"files().length > 0\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onBrowseClick()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"ngx-dropzone-input\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"onFileInputChange($event)\" />\n\n  <div class=\"ngx-dropzone-icon-wrap\">\n    <ng-content select=\"[dropzone-icon]\">\n      <svg class=\"ngx-dropzone-icon\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"30\" height=\"30\">\n        <path\n          d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"ngx-dropzone-text\">\n    <ng-content>\n      <strong>Drop files here</strong>\n      <span>or click to browse</span>\n    </ng-content>\n  </div>\n\n  @if (hint()) {\n    <div class=\"ngx-dropzone-hint\">{{ hint() }}</div>\n  }\n</div>\n\n@if (showFileList() && files().length) {\n  <ul class=\"ngx-dropzone-list\">\n    @for (item of files(); track item.id) {\n      <li class=\"ngx-dropzone-item\">\n        <div class=\"ngx-dropzone-thumb-wrap\">\n          @if (item.previewUrl) {\n            <img class=\"ngx-dropzone-thumb\" [src]=\"item.previewUrl\" [alt]=\"item.file.name\" />\n          } @else {\n            <span class=\"ngx-dropzone-file-icon\">\uD83D\uDCC4</span>\n          }\n        </div>\n        <div class=\"ngx-dropzone-meta\">\n          <span class=\"ngx-dropzone-name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n          <span class=\"ngx-dropzone-size\">{{ formatSize(item.file.size) }}</span>\n        </div>\n        <span class=\"ngx-dropzone-status\" aria-hidden=\"true\">\u2713</span>\n        <button\n          type=\"button\"\n          class=\"ngx-dropzone-remove\"\n          [attr.aria-label]=\"'Remove ' + item.file.name\"\n          (click)=\"removeFile(item.id); $event.stopPropagation()\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block}.ngx-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:2.25rem 1.5rem;border-radius:16px;cursor:pointer;text-align:center;overflow:hidden;background:light-dark(#fafbfc,#1a1a1e);border:2px dashed light-dark(#d6dae1,#35353c);transition:border-color .2s ease,background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.ngx-dropzone:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,light-dark(rgba(37,99,235,.06),rgba(59,130,246,.1)),transparent 65%);opacity:0;transition:opacity .2s ease;pointer-events:none}.ngx-dropzone:hover:not(.disabled){border-color:light-dark(#93c5fd,#3b82f6);box-shadow:0 4px 18px light-dark(rgba(37,99,235,.08),rgba(0,0,0,.35))}.ngx-dropzone:hover:not(.disabled):before{opacity:1}.ngx-dropzone:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:3px}.ngx-dropzone.dragging{border-color:light-dark(#2563eb,#60a5fa);border-style:solid;background:light-dark(#eff6ff,#16213a);transform:scale(1.015);box-shadow:0 8px 28px light-dark(rgba(37,99,235,.18),rgba(59,130,246,.25))}.ngx-dropzone.dragging:before{opacity:1}.ngx-dropzone.dragging .ngx-dropzone-icon-wrap{transform:translateY(-4px) scale(1.08)}.ngx-dropzone.disabled{cursor:not-allowed;opacity:.55}.ngx-dropzone.has-files{padding-block:1.5rem}.ngx-dropzone-input{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}.ngx-dropzone-icon-wrap{display:flex;align-items:center;justify-content:center;inline-size:56px;block-size:56px;border-radius:50%;background:light-dark(#eef2ff,#232433);color:light-dark(#4f46e5,#818cf8);transition:transform .22s cubic-bezier(.34,1.56,.64,1);z-index:1}.ngx-dropzone-text{z-index:1;display:flex;flex-direction:column;gap:.15rem}.ngx-dropzone-text strong{font-size:.92rem;font-weight:600;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-text span{font-size:.8rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-hint{z-index:1;font-size:.72rem;color:light-dark(#9ca3af,#6b7280);background:light-dark(#f3f4f6,#232327);padding:.15rem .6rem;border-radius:999px}.ngx-dropzone-list{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}.ngx-dropzone-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:10px;background:light-dark(#ffffff,#1f1f24);border:1px solid light-dark(#eef0f3,#2d2d33);transition:transform .16s ease,box-shadow .16s ease;animation:ngx-dropzone-item-in .22s cubic-bezier(.22,.9,.32,1) both}.ngx-dropzone-item:hover{box-shadow:0 2px 10px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4))}@keyframes ngx-dropzone-item-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ngx-dropzone-thumb-wrap{flex-shrink:0;inline-size:38px;block-size:38px;border-radius:8px;overflow:hidden;background:light-dark(#f4f4f5,#29292f);display:flex;align-items:center;justify-content:center}.ngx-dropzone-thumb{inline-size:100%;block-size:100%;object-fit:cover}.ngx-dropzone-file-icon{font-size:1.1rem}.ngx-dropzone-meta{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.1rem}.ngx-dropzone-name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-size{font-size:.7rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-status{flex-shrink:0;inline-size:20px;block-size:20px;border-radius:50%;background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80);font-size:.7rem;display:flex;align-items:center;justify-content:center}.ngx-dropzone-remove{flex-shrink:0;appearance:none;border:none;background:transparent;cursor:pointer;color:light-dark(#9ca3af,#71717a);font-size:.8rem;line-height:1;padding:.3rem;border-radius:6px;transition:background-color .14s ease,color .14s ease}.ngx-dropzone-remove:hover{color:light-dark(#dc2626,#f87171);background:light-dark(#fee2e2,#3f1d1d)}\n"] }]
-        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+                    }, template: "<div\r\n  class=\"ngx-dropzone\"\r\n  [class.dragging]=\"isDragging()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.has-files]=\"files().length > 0\"\r\n  tabindex=\"0\"\r\n  role=\"button\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  (click)=\"onBrowseClick()\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\">\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"ngx-dropzone-input\"\r\n    [accept]=\"accept()\"\r\n    [multiple]=\"multiple()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    (change)=\"onFileInputChange($event)\" />\r\n\r\n  <div class=\"ngx-dropzone-icon-wrap\">\r\n    <ng-content select=\"[dropzone-icon]\">\r\n      <svg class=\"ngx-dropzone-icon\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"30\" height=\"30\">\r\n        <path\r\n          d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </ng-content>\r\n  </div>\r\n\r\n  <div class=\"ngx-dropzone-text\">\r\n    <ng-content>\r\n      <strong>Drop files here</strong>\r\n      <span>or click to browse</span>\r\n    </ng-content>\r\n  </div>\r\n\r\n  @if (hint()) {\r\n    <div class=\"ngx-dropzone-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n\r\n@if (!autoUpload() && uploadMode() === 'all' && pendingCount() > 0) {\r\n  <div class=\"ngx-dropzone-actions\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"ngx-dropzone-upload-all\"\r\n      [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n      (click)=\"uploadAll(); $event.stopPropagation()\">\r\n      Upload all\r\n      <span>{{ pendingCount() }}</span>\r\n    </button>\r\n  </div>\r\n}\r\n\r\n@if (showFileList() && files().length) {\r\n  <ul class=\"ngx-dropzone-list\">\r\n    @for (item of files(); track item.id) {\r\n      <li class=\"ngx-dropzone-item\" [class.is-uploading]=\"item.status === 'uploading'\">\r\n        <div class=\"ngx-dropzone-thumb-wrap\">\r\n          @if (item.previewUrl) {\r\n            <img class=\"ngx-dropzone-thumb\" [src]=\"item.previewUrl\" [alt]=\"item.file.name\" />\r\n          } @else {\r\n            <span class=\"ngx-dropzone-file-icon\">\uD83D\uDCC4</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"ngx-dropzone-meta\">\r\n          <span class=\"ngx-dropzone-name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\r\n          <span class=\"ngx-dropzone-size\">{{ formatSize(item.file.size) }}</span>\r\n\r\n          @if (item.status === 'uploading' || item.status === 'uploaded') {\r\n            <div\r\n              class=\"ngx-dropzone-progress\"\r\n              role=\"progressbar\"\r\n              [attr.aria-valuenow]=\"item.progress\"\r\n              aria-valuemin=\"0\"\r\n              aria-valuemax=\"100\"\r\n              [attr.aria-label]=\"'Upload progress for ' + item.file.name\">\r\n              <span class=\"ngx-dropzone-progress-bar\" [style.width.%]=\"item.progress\"></span>\r\n            </div>\r\n            <span class=\"ngx-dropzone-progress-text\">{{ item.progress }}%</span>\r\n          }\r\n\r\n          @if (item.status === 'error') {\r\n            <span class=\"ngx-dropzone-error\">Upload failed</span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"ngx-dropzone-row-actions\">\r\n          @if (!autoUpload() && uploadMode() === 'single' && isPending(item)) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-dropzone-upload\"\r\n              [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n              [attr.aria-label]=\"'Upload ' + item.file.name\"\r\n              (click)=\"uploadSingle(item.id); $event.stopPropagation()\">\r\n              Upload\r\n            </button>\r\n          }\r\n\r\n          @if (item.status === 'error') {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-dropzone-retry\"\r\n              [disabled]=\"disabled() || !hasUploadConfiguration()\"\r\n              [attr.aria-label]=\"'Retry upload for ' + item.file.name\"\r\n              (click)=\"retryUpload(item.id); $event.stopPropagation()\">\r\n              Retry\r\n            </button>\r\n          }\r\n\r\n          @if (item.status === 'uploaded') {\r\n            <span class=\"ngx-dropzone-status success\" aria-label=\"Uploaded\">\u2713</span>\r\n          } @else if (item.status === 'uploading') {\r\n            <span class=\"ngx-dropzone-status uploading\" aria-label=\"Uploading\"></span>\r\n          } @else if (item.status === 'error') {\r\n            <span class=\"ngx-dropzone-status error\" aria-label=\"Upload failed\">!</span>\r\n          } @else {\r\n            <span class=\"ngx-dropzone-status pending\" aria-label=\"Pending\">\u2022</span>\r\n          }\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"ngx-dropzone-remove\"\r\n            [attr.aria-label]=\"'Remove ' + item.file.name\"\r\n            (click)=\"removeFile(item.id); $event.stopPropagation()\">\r\n            \u2715\r\n          </button>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ngx-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:2.25rem 1.5rem;border-radius:16px;cursor:pointer;text-align:center;overflow:hidden;background:light-dark(#fafbfc,#1a1a1e);border:2px dashed light-dark(#d6dae1,#35353c);transition:border-color .2s ease,background-color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.ngx-dropzone:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,light-dark(rgba(37,99,235,.06),rgba(59,130,246,.1)),transparent 65%);opacity:0;transition:opacity .2s ease;pointer-events:none}.ngx-dropzone:hover:not(.disabled){border-color:light-dark(#93c5fd,#3b82f6);box-shadow:0 4px 18px light-dark(rgba(37,99,235,.08),rgba(0,0,0,.35))}.ngx-dropzone:hover:not(.disabled):before{opacity:1}.ngx-dropzone:focus-visible{outline:2px solid light-dark(#2563eb,#60a5fa);outline-offset:3px}.ngx-dropzone.dragging{border-color:light-dark(#2563eb,#60a5fa);border-style:solid;background:light-dark(#eff6ff,#16213a);transform:scale(1.015);box-shadow:0 8px 28px light-dark(rgba(37,99,235,.18),rgba(59,130,246,.25))}.ngx-dropzone.dragging:before{opacity:1}.ngx-dropzone.dragging .ngx-dropzone-icon-wrap{transform:translateY(-4px) scale(1.08)}.ngx-dropzone.disabled{cursor:not-allowed;opacity:.55}.ngx-dropzone.has-files{padding-block:1.5rem}.ngx-dropzone-input{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}.ngx-dropzone-icon-wrap{display:flex;align-items:center;justify-content:center;inline-size:56px;block-size:56px;border-radius:50%;background:light-dark(#eef2ff,#232433);color:light-dark(#4f46e5,#818cf8);transition:transform .22s cubic-bezier(.34,1.56,.64,1);z-index:1}.ngx-dropzone-text{z-index:1;display:flex;flex-direction:column;gap:.15rem}.ngx-dropzone-text strong{font-size:.92rem;font-weight:600;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-text span{font-size:.8rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-hint{z-index:1;font-size:.72rem;color:light-dark(#9ca3af,#6b7280);background:light-dark(#f3f4f6,#232327);padding:.15rem .6rem;border-radius:999px}.ngx-dropzone-list{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}.ngx-dropzone-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:10px;background:light-dark(#ffffff,#1f1f24);border:1px solid light-dark(#eef0f3,#2d2d33);transition:transform .16s ease,box-shadow .16s ease;animation:ngx-dropzone-item-in .22s cubic-bezier(.22,.9,.32,1) both}.ngx-dropzone-item:hover{box-shadow:0 2px 10px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4))}@keyframes ngx-dropzone-item-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ngx-dropzone-thumb-wrap{flex-shrink:0;inline-size:38px;block-size:38px;border-radius:8px;overflow:hidden;background:light-dark(#f4f4f5,#29292f);display:flex;align-items:center;justify-content:center}.ngx-dropzone-thumb{inline-size:100%;block-size:100%;object-fit:cover}.ngx-dropzone-file-icon{font-size:1.1rem}.ngx-dropzone-meta{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.1rem}.ngx-dropzone-name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:light-dark(#1f2937,#e4e4e7)}.ngx-dropzone-size{font-size:.7rem;color:light-dark(#9ca3af,#71717a)}.ngx-dropzone-status{flex-shrink:0;inline-size:20px;block-size:20px;border-radius:50%;background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80);font-size:.7rem;display:flex;align-items:center;justify-content:center}.ngx-dropzone-remove{flex-shrink:0;appearance:none;border:none;background:transparent;cursor:pointer;color:light-dark(#9ca3af,#71717a);font-size:.8rem;line-height:1;padding:.3rem;border-radius:6px;transition:background-color .14s ease,color .14s ease}.ngx-dropzone-remove:hover{color:light-dark(#dc2626,#f87171);background:light-dark(#fee2e2,#3f1d1d)}.ngx-dropzone-actions{display:flex;justify-content:flex-end;margin-top:.7rem}.ngx-dropzone-upload-all,.ngx-dropzone-upload,.ngx-dropzone-retry{appearance:none;border:1px solid light-dark(#dbe3f0,#3b3b45);border-radius:7px;background:light-dark(#2563eb,#3b82f6);color:#fff;cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;padding:.35rem .65rem;transition:opacity .14s ease,transform .14s ease}.ngx-dropzone-upload:hover:not(:disabled),.ngx-dropzone-upload-all:hover:not(:disabled),.ngx-dropzone-retry:hover:not(:disabled){transform:translateY(-1px)}.ngx-dropzone-upload-all:disabled,.ngx-dropzone-upload:disabled,.ngx-dropzone-retry:disabled{cursor:not-allowed;opacity:.5}.ngx-dropzone-upload-all{display:inline-flex;align-items:center;gap:.45rem}.ngx-dropzone-upload-all span{min-inline-size:1.15rem;block-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#ffffff2e}.ngx-dropzone-retry{background:transparent;color:light-dark(#dc2626,#f87171)}.ngx-dropzone-row-actions{flex-shrink:0;display:flex;align-items:center;gap:.35rem}.ngx-dropzone-item.is-uploading .ngx-dropzone-status.uploading{animation:ngx-dropzone-upload-pulse 1.1s ease-in-out infinite}.ngx-dropzone-status.pending{background:light-dark(#f4f4f5,#29292f);color:light-dark(#a1a1aa,#71717a)}.ngx-dropzone-status.uploading{background:light-dark(#dbeafe,#172554);border:3px solid light-dark(#93c5fd,#3b82f6)}.ngx-dropzone-status.error{background:light-dark(#fee2e2,#450a0a);color:light-dark(#dc2626,#f87171);font-weight:700}.ngx-dropzone-status.success{background:light-dark(#dcfce7,#14532d);color:light-dark(#16a34a,#4ade80)}.ngx-dropzone-progress{position:relative;inline-size:100%;block-size:4px;margin-top:.35rem;overflow:hidden;border-radius:999px;background:light-dark(#e5e7eb,#303038)}.ngx-dropzone-progress-bar{display:block;block-size:100%;border-radius:inherit;background:light-dark(#2563eb,#60a5fa);transition:width .12s linear}.ngx-dropzone-progress-text{font-size:.65rem;color:light-dark(#6b7280,#a1a1aa)}.ngx-dropzone-error{font-size:.65rem;color:light-dark(#dc2626,#f87171)}@keyframes ngx-dropzone-upload-pulse{50%{opacity:.45}}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], uploadUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrl", required: false }] }], uploadAlias: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadAlias", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], maxParallel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxParallel", required: false }] }], uploadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMode", required: false }] }], uploadData: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadData", required: false }] }], uploadHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadHeaders", required: false }] }], uploadWithCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadWithCredentials", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], uploadStarted: [{ type: i0.Output, args: ["uploadStarted"] }], uploadProgress: [{ type: i0.Output, args: ["uploadProgress"] }], uploadSuccess: [{ type: i0.Output, args: ["uploadSuccess"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxDropzoneComponent, extractFilesFromDataTransfer, formatBytes, matchesAccept };
+export { NGX_DROPZONE_UPLOAD_SERVICE, NgxDropzoneComponent, NgxDropzoneHttpUploadService, extractFilesFromDataTransfer, formatBytes, matchesAccept };
 //# sourceMappingURL=ngx-kit-dropzone.mjs.map