cloud-ide-element 1.0.84 → 1.0.86

package/fesm2022/cloud-ide-element.mjs

@@ -2727,7 +2727,8 @@ class CideEleFileManagerService {
                         observe: 'events'
                     }).pipe(retry(uploadOptions.retryAttempts || 3), catchError(this.handleError.bind(this)), finalize(() => {
                         this.removeFromUploadQueue(fileId);
-                        this.removeActiveUpload(fileId);
+                        // Don't remove from activeUploads - keep completed files visible
+                        // Only remove from queue, keep in activeUploads with completed status
                         if (this._uploadQueue().length === 0) {
                             this._isUploading.set(false);
                         }
@@ -2904,6 +2905,25 @@ class CideEleFileManagerService {
         this.removeActiveUpload(fileId);
         console.log('🚫 [FileManagerService] Upload cancelled for:', fileId);
     }
+    /**
+     * Clear all completed uploads from active uploads
+     * Called when the floating uploader is closed
+     */
+    clearCompletedUploads() {
+        const currentUploads = new Map(this._activeUploads());
+        let hasChanges = false;
+        currentUploads.forEach((upload, fileId) => {
+            if (upload.stage === 'complete') {
+                currentUploads.delete(fileId);
+                hasChanges = true;
+                console.log('🧹 [FileManagerService] Clearing completed upload:', fileId);
+            }
+        });
+        if (hasChanges) {
+            this._activeUploads.set(currentUploads);
+            console.log('🧹 [FileManagerService] Cleared all completed uploads');
+        }
+    }
     /**
      * Angular 20: File validation utility
      */
@@ -3156,50 +3176,34 @@ class CideEleFloatingFileUploaderComponent {
     isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
     currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
-    // 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
+    // Use file manager service 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 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" }] : []));
+    // Computed values based on service state
+    hasUploads = computed(() => this.uploadQueue().length > 0 || this.activeUploads().size > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    hasActiveUploads = computed(() => this.uploadQueue().length > 0 || Array.from(this.activeUploads().values()).some(upload => upload.stage !== 'complete'), ...(ngDevMode ? [{ debugName: "hasActiveUploads" }] : []));
+    pendingUploads = computed(() => this.uploadQueue().filter(fileId => !this.activeUploads().has(fileId)), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    activeUploadsLocal = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'reading' || upload.stage === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploadsLocal" }] : []));
+    completedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'complete'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
     // Animation states
     isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
     constructor() {
         console.log('🚀 [FloatingFileUploader] Component initialized');
-        // Set up effect to sync files from service to local state
+        // Set up effect to show/hide floating uploader based on service state
         effect(() => {
-            const uploadQueue = this.fileManagerService.uploadQueue();
-            const activeUploads = this.fileManagerService.activeUploads();
-            const currentLocalFiles = this.localFiles();
-            console.log('🔄 [FloatingFileUploader] File manager service queue changed:', {
-                queueLength: uploadQueue.length,
-                activeUploadsCount: activeUploads.size,
-                localFilesCount: currentLocalFiles.size,
-                queueFiles: uploadQueue
+            const hasActiveUploads = this.hasActiveUploads();
+            const hasUploads = this.hasUploads();
+            console.log('🔄 [FloatingFileUploader] Service state changed:', {
+                hasActiveUploads,
+                hasUploads,
+                queueLength: this.uploadQueue().length,
+                activeUploadsCount: this.activeUploads().size,
+                activeUploads: Array.from(this.activeUploads().entries())
             });
-            // 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) => {
-                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');
+            // Show floating uploader when there are active uploads (not just completed ones)
+            if (hasActiveUploads && !this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to active uploads');
                 this.showWithAnimation();
             }
         });
@@ -3350,8 +3354,8 @@ class CideEleFloatingFileUploaderComponent {
      * Close the floating uploader
      */
     close() {
-        // Clear all local files when closing
-        this.clearLocalFiles();
+        // Clear all completed uploads when closing
+        this.fileManagerService.clearCompletedUploads();
         this.hideWithAnimation();
     }
     /**
@@ -3365,15 +3369,15 @@ class CideEleFloatingFileUploaderComponent {
         if (active.length > 0) {
             return `${active.length} uploading`;
         }
+        else if (pending.length > 0) {
+            return `${pending.length} pending`;
+        }
         else if (completed.length > 0 && failed.length === 0) {
             return `${completed.length} completed`;
         }
         else if (failed.length > 0) {
             return `${completed.length} completed, ${failed.length} failed`;
         }
-        else if (pending.length > 0) {
-            return `${pending.length} pending`;
-        }
         return 'No uploads';
     }
     /**
@@ -3383,7 +3387,7 @@ class CideEleFloatingFileUploaderComponent {
         const active = this.activeUploadsLocal();
         if (active.length === 0)
             return 0;
-        const totalProgress = active.reduce((sum, file) => sum + (file.percentage || 0), 0);
+        const totalProgress = active.reduce((sum, upload) => sum + (upload.percentage || 0), 0);
         return Math.round(totalProgress / active.length);
     }
     /**
@@ -3430,49 +3434,30 @@ class CideEleFloatingFileUploaderComponent {
         return fileId;
     }
     /**
-     * Add file to local state
-     */
-    addLocalFile(fileId, stage, percentage) {
-        const fileName = this.getFileNameFromId(fileId);
-        this.localFiles.update(files => {
-            const newFiles = new Map(files);
-            newFiles.set(fileId, {
-                fileName,
-                stage,
-                percentage,
-                completedAt: stage === 'complete' ? new Date() : undefined,
-                groupId: this.currentGroupId() || undefined
-            });
-            return newFiles;
-        });
-    }
-    /**
-     * Update local file state
+     * Get all files from service state (pending + active uploads)
      */
-    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
+    getAllFiles() {
+        const files = [];
+        // Add pending files
+        this.uploadQueue().forEach(fileId => {
+            if (!this.activeUploads().has(fileId)) {
+                files.push({
+                    fileId,
+                    fileName: this.getFileNameFromId(fileId),
+                    stage: 'pending'
                 });
             }
-            else {
-                // If file doesn't exist locally, add it
-                this.addLocalFile(fileId, stage, percentage);
-            }
-            return newFiles;
         });
-    }
-    /**
-     * Clear all local files
-     */
-    clearLocalFiles() {
-        this.localFiles.set(new Map());
+        // Add active uploads
+        this.activeUploads().forEach((upload, fileId) => {
+            files.push({
+                fileId,
+                fileName: this.getFileNameFromId(fileId),
+                stage: upload.stage,
+                percentage: upload.percentage
+            });
+        });
+        return files;
     }
     /**
      * Set current user ID
@@ -3541,14 +3526,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 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" }] });
+    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 -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\">\n\n  <!-- Header -->\n  <div class=\"uploader-header\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Overall Progress Bar -->\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\n    <div class=\"overall-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\n      </div>\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\n    </div>\n    }\n\n    <!-- Upload Queue - Show files from service state -->\n    @if (getAllFiles().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of getAllFiles(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\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"] }] });
 }
 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 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"] }]
+                    ], template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\">\n\n  <!-- Header -->\n  <div class=\"uploader-header\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Overall Progress Bar -->\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\n    <div class=\"overall-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\n      </div>\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\n    </div>\n    }\n\n    <!-- Upload Queue - Show files from service state -->\n    @if (getAllFiles().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of getAllFiles(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\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 {