cloud-ide-element 1.0.83 → 1.0.84

package/fesm2022/cloud-ide-element.mjs

@@ -3156,60 +3156,52 @@ class CideEleFloatingFileUploaderComponent {
     isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
     currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
-    // Local state to maintain completed files visibility
-    completedFiles = signal(new Map(), ...(ngDevMode ? [{ debugName: "completedFiles" }] : []));
+    // Local state to maintain all files (pending, active, completed)
+    localFiles = signal(new Map(), ...(ngDevMode ? [{ debugName: "localFiles" }] : []));
     // Use file manager service's upload queue as the single source of truth
     uploadQueue = computed(() => this.fileManagerService.uploadQueue(), ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
     activeUploads = computed(() => this.fileManagerService.activeUploads(), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
-    // Computed values based on file manager service state and local completed files
-    hasUploads = computed(() => this.uploadQueue().length > 0 || this.activeUploads().size > 0 || this.completedFiles().size > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
-    pendingUploads = computed(() => this.uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "pendingUploads" }] : [])); // All files in queue are pending
-    completedUploads = computed(() => {
-        const active = this.activeUploads();
-        const activeCompleted = Array.from(active.values()).filter(upload => upload.stage === 'complete');
-        const localCompleted = Array.from(this.completedFiles().values());
-        return [...activeCompleted, ...localCompleted];
-    }, ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
-    failedUploads = computed(() => {
-        const active = this.activeUploads();
-        return Array.from(active.values()).filter(upload => upload.stage === 'error');
-    }, ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
+    // Computed values based on local state only
+    hasUploads = computed(() => this.localFiles().size > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    pendingUploads = computed(() => Array.from(this.localFiles().values()).filter(file => file.stage === 'pending'), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    activeUploadsLocal = computed(() => Array.from(this.localFiles().values()).filter(file => file.stage === 'reading' || file.stage === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploadsLocal" }] : []));
+    completedUploads = computed(() => Array.from(this.localFiles().values()).filter(file => file.stage === 'complete'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => Array.from(this.localFiles().values()).filter(file => file.stage === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
     // Animation states
     isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
     constructor() {
         console.log('🚀 [FloatingFileUploader] Component initialized');
-        // Set up effect to monitor file manager service's upload queue
+        // Set up effect to sync files from service to local state
         effect(() => {
             const uploadQueue = this.fileManagerService.uploadQueue();
             const activeUploads = this.fileManagerService.activeUploads();
-            const hasUploads = uploadQueue.length > 0 || activeUploads.size > 0 || this.completedFiles().size > 0;
+            const currentLocalFiles = this.localFiles();
             console.log('🔄 [FloatingFileUploader] File manager service queue changed:', {
                 queueLength: uploadQueue.length,
                 activeUploadsCount: activeUploads.size,
-                completedFilesCount: this.completedFiles().size,
-                hasUploads,
-                currentVisible: this.isVisible(),
+                localFilesCount: currentLocalFiles.size,
                 queueFiles: uploadQueue
             });
-            // Show floating uploader when files are added to the file manager service queue
-            // But don't auto-hide when uploads complete - let user manually close
-            if (hasUploads && !this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to file manager queue');
-                this.showWithAnimation();
-            }
-            // Note: Removed auto-hide logic - floating uploader stays visible until manually closed
-        });
-        // Set up effect to track completed uploads
-        effect(() => {
-            const activeUploads = this.fileManagerService.activeUploads();
-            const currentCompleted = this.completedFiles();
-            // Check for newly completed uploads
+            // Sync pending files from service queue to local state
+            uploadQueue.forEach(fileId => {
+                if (!currentLocalFiles.has(fileId)) {
+                    console.log('📝 [FloatingFileUploader] Adding pending file to local state:', fileId);
+                    this.addLocalFile(fileId, 'pending');
+                }
+            });
+            // Sync active uploads from service to local state
             activeUploads.forEach((upload, fileId) => {
-                if (upload.stage === 'complete' && !currentCompleted.has(fileId)) {
-                    console.log('✅ [FloatingFileUploader] File completed, adding to local completed files:', fileId);
-                    this.addCompletedFile(fileId, upload);
+                const localFile = currentLocalFiles.get(fileId);
+                if (!localFile || localFile.stage !== upload.stage) {
+                    console.log('🔄 [FloatingFileUploader] Updating local file state:', fileId, upload.stage);
+                    this.updateLocalFile(fileId, upload.stage, upload.percentage);
                 }
             });
+            // Show floating uploader when files are added
+            if (this.localFiles().size > 0 && !this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to local files');
+                this.showWithAnimation();
+            }
         });
     }
     ngOnInit() {
@@ -3358,29 +3350,29 @@ class CideEleFloatingFileUploaderComponent {
      * Close the floating uploader
      */
     close() {
-        // Clear completed files when closing
-        this.clearCompletedFiles();
+        // Clear all local files when closing
+        this.clearLocalFiles();
         this.hideWithAnimation();
     }
     /**
      * Get upload summary text
      */
     getUploadSummary() {
-        const queueLength = this.uploadQueue().length;
-        const activeCount = this.activeUploads().size;
-        const completed = this.completedUploads().length;
-        const failed = this.failedUploads().length;
-        if (activeCount > 0) {
-            return `${activeCount} uploading`;
+        const pending = this.pendingUploads();
+        const active = this.activeUploadsLocal();
+        const completed = this.completedUploads();
+        const failed = this.failedUploads();
+        if (active.length > 0) {
+            return `${active.length} uploading`;
         }
-        else if (completed > 0 && failed === 0) {
-            return `${completed} completed`;
+        else if (completed.length > 0 && failed.length === 0) {
+            return `${completed.length} completed`;
         }
-        else if (failed > 0) {
-            return `${completed} completed, ${failed} failed`;
+        else if (failed.length > 0) {
+            return `${completed.length} completed, ${failed.length} failed`;
         }
-        else if (queueLength > 0) {
-            return `${queueLength} pending`;
+        else if (pending.length > 0) {
+            return `${pending.length} pending`;
         }
         return 'No uploads';
     }
@@ -3388,11 +3380,11 @@ class CideEleFloatingFileUploaderComponent {
      * Get overall progress percentage
      */
     getOverallProgress() {
-        const activeUploads = this.activeUploads();
-        if (activeUploads.size === 0)
+        const active = this.activeUploadsLocal();
+        if (active.length === 0)
             return 0;
-        const totalProgress = Array.from(activeUploads.values()).reduce((sum, upload) => sum + upload.percentage, 0);
-        return Math.round(totalProgress / activeUploads.size);
+        const totalProgress = active.reduce((sum, file) => sum + (file.percentage || 0), 0);
+        return Math.round(totalProgress / active.length);
     }
     /**
      * Get status icon based on upload stage
@@ -3438,25 +3430,49 @@ class CideEleFloatingFileUploaderComponent {
         return fileId;
     }
     /**
-     * Add completed file to local state
+     * Add file to local state
      */
-    addCompletedFile(fileId, upload) {
+    addLocalFile(fileId, stage, percentage) {
         const fileName = this.getFileNameFromId(fileId);
-        this.completedFiles.update(completed => {
-            const newCompleted = new Map(completed);
-            newCompleted.set(fileId, {
+        this.localFiles.update(files => {
+            const newFiles = new Map(files);
+            newFiles.set(fileId, {
                 fileName,
-                completedAt: new Date(),
+                stage,
+                percentage,
+                completedAt: stage === 'complete' ? new Date() : undefined,
                 groupId: this.currentGroupId() || undefined
             });
-            return newCompleted;
+            return newFiles;
+        });
+    }
+    /**
+     * Update local file state
+     */
+    updateLocalFile(fileId, stage, percentage) {
+        this.localFiles.update(files => {
+            const newFiles = new Map(files);
+            const existingFile = newFiles.get(fileId);
+            if (existingFile) {
+                newFiles.set(fileId, {
+                    ...existingFile,
+                    stage,
+                    percentage,
+                    completedAt: stage === 'complete' ? new Date() : existingFile.completedAt
+                });
+            }
+            else {
+                // If file doesn't exist locally, add it
+                this.addLocalFile(fileId, stage, percentage);
+            }
+            return newFiles;
         });
     }
     /**
-     * Clear all completed files
+     * Clear all local files
      */
-    clearCompletedFiles() {
-        this.completedFiles.set(new Map());
+    clearLocalFiles() {
+        this.localFiles.set(new Map());
     }
     /**
      * Set current user ID
@@ -3525,14 +3541,14 @@ class CideEleFloatingFileUploaderComponent {
         return this.hasUploads();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0 || completedFiles().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show completed files from local state -->\r\n      @for (entry of completedFiles() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item status-completed\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">check_circle</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ entry.value.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-green-600\">Completed</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from local state -->\r\n    @if (localFiles().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show all files from local state -->\r\n      @for (entry of localFiles() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ entry.value.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading' && entry.value.percentage !== undefined) {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
                         CommonModule,
                         CideIconComponent
-                    ], template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0 || completedFiles().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show completed files from local state -->\r\n      @for (entry of completedFiles() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item status-completed\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">check_circle</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ entry.value.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-green-600\">Completed</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
+                    ], template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from local state -->\r\n    @if (localFiles().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show all files from local state -->\r\n      @for (entry of localFiles() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ entry.value.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading' && entry.value.percentage !== undefined) {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
         }], ctorParameters: () => [] });
 
 class CideEleFileInputComponent {