cloud-ide-element 1.0.78 → 1.0.80

package/fesm2022/cloud-ide-element.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, afterRenderEffect, afterNextRender, Directive, ElementRef, viewChild, effect } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, afterRenderEffect, afterNextRender, effect, Directive, ElementRef, viewChild } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, takeUntil, distinctUntilChanged, Observable, retry, catchError, finalize, throwError } from 'rxjs';
@@ -4514,10 +4514,8 @@ class CideEleFloatingFileUploaderComponent {
     // Signals for reactive state
     isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
     isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
-    uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
-    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
-    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
     currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
     // Computed values
     hasUploads = computed(() => this.uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
     pendingUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'pending'), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
@@ -4528,14 +4526,31 @@ class CideEleFloatingFileUploaderComponent {
     isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
     constructor() {
         console.log('🚀 [FloatingFileUploader] Component initialized');
+        // Set up effect to monitor local upload queue
+        effect(() => {
+            const uploadQueue = this.uploadQueue();
+            const hasUploads = uploadQueue.length > 0;
+            console.log('🔄 [FloatingFileUploader] Upload queue changed:', {
+                queueLength: uploadQueue.length,
+                hasUploads,
+                currentVisible: this.isVisible()
+            });
+            // Show floating uploader when files are added to the queue
+            if (hasUploads && !this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to upload queue');
+                this.showWithAnimation();
+            }
+            else if (!hasUploads && this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Hiding floating uploader - no files in queue');
+                this.hideWithAnimation();
+            }
+        });
     }
     ngOnInit() {
         // Set up drag and drop listeners
         this.setupDragAndDrop();
         // Set up file input change listeners
         this.setupFileInputListeners();
-        // Note: The file manager service uses signals, so we'll handle uploads directly
-        // when files are added to the queue rather than subscribing to service state
     }
     ngOnDestroy() {
         console.log('🧹 [FloatingFileUploader] Component destroyed');
@@ -4576,6 +4591,11 @@ class CideEleFloatingFileUploaderComponent {
      */
     handleFileInputChange(event) {
         const target = event.target;
+        console.log('🔍 [FloatingFileUploader] File input change event detected:', {
+            type: target.type,
+            filesLength: target.files?.length || 0,
+            element: target
+        });
         // Check if this is a file input with files
         if (target.type === 'file' && target.files && target.files.length > 0) {
             console.log('📁 [FloatingFileUploader] File input change detected:', target.files.length, 'files');
@@ -4628,66 +4648,27 @@ class CideEleFloatingFileUploaderComponent {
      */
     handleFiles(files) {
         console.log('📁 [FloatingFileUploader] Handling files:', files.length);
-        // Add files to the file manager service queue
-        files.forEach(file => {
-            const fileId = this.generateFileId(file);
-            // Create upload progress item
-            const uploadItem = {
-                fileId,
-                fileName: file.name,
-                progress: 0,
-                status: 'pending'
-            };
-            // Add to local queue
-            this.uploadQueue.update(queue => [...queue, uploadItem]);
-            // Start upload using file manager service
-            this.fileManagerService.uploadFile(file, {
-                userId: this.currentUserId(),
-                permissions: ['read', 'write'],
-                tags: []
-            }, (progress) => {
-                this.updateUploadProgress(fileId, progress);
-            })
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    console.log('✅ [FloatingFileUploader] Upload completed:', response);
-                    this.updateUploadStatus(fileId, 'completed', 100, undefined, response);
-                },
-                error: (error) => {
-                    console.error('❌ [FloatingFileUploader] Upload failed:', error);
-                    this.updateUploadStatus(fileId, 'error', 0, error.message || 'Upload failed');
-                }
-            });
-        });
-        this.updateVisibility();
+        // Use handleExternalFiles to process the files
+        this.handleExternalFiles(files, this.currentUserId());
     }
     /**
-     * Update visibility based on upload state
+     * Update visibility - simplified for notification only
      */
     updateVisibility() {
-        const hasActiveUploads = this.activeUploads().length > 0;
-        const hasPendingUploads = this.pendingUploads().length > 0;
-        const hasCompletedUploads = this.completedUploads().length > 0;
-        const hasFailedUploads = this.failedUploads().length > 0;
-        // Show if there are active, pending, or recent completed/failed uploads
-        const shouldShow = hasActiveUploads || hasPendingUploads || hasCompletedUploads || hasFailedUploads;
-        if (shouldShow && !this.isVisible()) {
-            this.showWithAnimation();
-        }
-        else if (!shouldShow && this.isVisible()) {
-            this.hideWithAnimation();
-        }
+        // This is just a notification component now
+        // The actual uploads are handled by the global uploader
     }
     /**
      * Show with animation
      */
     showWithAnimation() {
+        console.log('🎬 [FloatingFileUploader] showWithAnimation called - setting isVisible to true');
         this.isAnimating.set(true);
         this.isVisible.set(true);
         // Remove animation class after animation completes
         setTimeout(() => {
             this.isAnimating.set(false);
+            console.log('🎬 [FloatingFileUploader] Animation completed, isVisible:', this.isVisible());
         }, 300);
     }
     /**
@@ -4711,52 +4692,39 @@ class CideEleFloatingFileUploaderComponent {
      * Close the floating uploader
      */
     close() {
-        this.clearAllUploads();
         this.hideWithAnimation();
     }
     /**
-     * Clear all uploads
-     */
-    clearAllUploads() {
-        this.uploadQueue.set([]);
-    }
-    /**
-     * Clear completed uploads
-     */
-    clearCompletedUploads() {
-        this.uploadQueue.update(queue => queue.filter(upload => upload.status !== 'completed'));
-    }
-    /**
-     * Cancel upload
-     */
-    cancelUpload(fileId) {
-        console.log('🚫 [FloatingFileUploader] Cancelling upload:', fileId);
-        this.fileManagerService.cancelUpload(fileId);
-        this.updateUploadStatus(fileId, 'cancelled', 0);
-    }
-    /**
-     * Retry upload
-     */
-    retryUpload(fileId) {
-        console.log('🔄 [FloatingFileUploader] Retrying upload:', fileId);
-        this.updateUploadStatus(fileId, 'pending', 0);
-        // Note: Actual retry logic would need to be implemented based on stored file data
-    }
-    /**
-     * Update upload progress
+     * Get upload summary text
      */
-    updateUploadProgress(fileId, progress) {
-        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
-            ? { ...upload, progress, status: 'uploading' }
-            : upload));
+    getUploadSummary() {
+        const active = this.activeUploads().length;
+        const completed = this.completedUploads().length;
+        const failed = this.failedUploads().length;
+        const pending = this.pendingUploads().length;
+        if (active > 0) {
+            return `${active} uploading`;
+        }
+        else if (completed > 0 && failed === 0) {
+            return `${completed} completed`;
+        }
+        else if (failed > 0) {
+            return `${completed} completed, ${failed} failed`;
+        }
+        else if (pending > 0) {
+            return `${pending} pending`;
+        }
+        return 'No uploads';
     }
     /**
-     * Update upload status
+     * Get overall progress percentage
      */
-    updateUploadStatus(fileId, status, progress, error, uploadedFile) {
-        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
-            ? { ...upload, status, progress, error, uploadedFile }
-            : upload));
+    getOverallProgress() {
+        const uploads = this.uploadQueue();
+        if (uploads.length === 0)
+            return 0;
+        const totalProgress = uploads.reduce((sum, upload) => sum + upload.progress, 0);
+        return Math.round(totalProgress / uploads.length);
     }
     /**
      * Get status icon
@@ -4785,65 +4753,20 @@ class CideEleFloatingFileUploaderComponent {
         }
     }
     /**
-     * Get file size display
-     */
-    getFileSizeDisplay(size) {
-        if (size === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(size) / Math.log(k));
-        return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }
-    /**
-     * Get overall progress percentage
-     */
-    getOverallProgress() {
-        const uploads = this.uploadQueue();
-        if (uploads.length === 0)
-            return 0;
-        const totalProgress = uploads.reduce((sum, upload) => sum + upload.progress, 0);
-        return Math.round(totalProgress / uploads.length);
-    }
-    /**
-     * Get upload summary text
-     */
-    getUploadSummary() {
-        const active = this.activeUploads().length;
-        const completed = this.completedUploads().length;
-        const failed = this.failedUploads().length;
-        const pending = this.pendingUploads().length;
-        if (active > 0) {
-            return `${active} uploading`;
-        }
-        else if (completed > 0 && failed === 0) {
-            return `${completed} completed`;
-        }
-        else if (failed > 0) {
-            return `${completed} completed, ${failed} failed`;
-        }
-        else if (pending > 0) {
-            return `${pending} pending`;
-        }
-        return 'No uploads';
-    }
-    /**
-     * Generate unique file ID
+     * Cancel upload
      */
-    generateFileId(file) {
-        return `${file.name}_${file.size}_${Date.now()}`;
+    cancelUpload(fileId) {
+        console.log('🚫 [FloatingFileUploader] Cancelling upload:', fileId);
+        this.fileManagerService.cancelUpload(fileId);
+        this.updateUploadStatus(fileId, 'cancelled', 0);
     }
     /**
-     * Extract file name from file ID
+     * Retry upload
      */
-    extractFileNameFromId(fileId) {
-        // Extract filename from the fileId format: filename_size_timestamp
-        const parts = fileId.split('_');
-        if (parts.length >= 3) {
-            // Remove the last two parts (size and timestamp) to get the filename
-            return parts.slice(0, -2).join('_');
-        }
-        return fileId;
+    retryUpload(fileId) {
+        console.log('🔄 [FloatingFileUploader] Retrying upload:', fileId);
+        this.updateUploadStatus(fileId, 'pending', 0);
+        // Note: Actual retry logic would need to be implemented based on stored file data
     }
     /**
      * Set current user ID
@@ -4862,18 +4785,77 @@ class CideEleFloatingFileUploaderComponent {
         if (userId && userId !== this.currentUserId()) {
             this.setCurrentUserId(userId);
         }
-        // Handle the files
-        this.handleFiles(files);
+        // Add files to the local upload queue
+        // This will trigger the effect in the constructor to show the floating uploader
+        files.forEach((file, index) => {
+            const fileId = this.generateFileId(file);
+            // Create upload queue item
+            const uploadItem = {
+                fileId,
+                fileName: file.name,
+                progress: 0,
+                status: 'pending',
+                file: file
+            };
+            console.log(`📁 [FloatingFileUploader] Adding file ${index + 1}/${files.length} to upload queue:`, {
+                fileId,
+                fileName: file.name,
+                status: 'pending'
+            });
+            // Add to local upload queue
+            this.uploadQueue.update(queue => [...queue, uploadItem]);
+            // Start upload using file manager service
+            this.fileManagerService.uploadFile(file, {
+                userId: this.currentUserId(),
+                permissions: ['read', 'write'],
+                tags: []
+            }, (progress) => {
+                this.updateUploadProgress(fileId, progress);
+            })
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    console.log('✅ [FloatingFileUploader] Upload completed:', response);
+                    this.updateUploadStatus(fileId, 'completed', 100, undefined, response);
+                },
+                error: (error) => {
+                    console.error('❌ [FloatingFileUploader] Upload failed:', error);
+                    this.updateUploadStatus(fileId, 'error', 0, error.message || 'Upload failed');
+                }
+            });
+        });
+    }
+    /**
+     * Generate unique file ID
+     */
+    generateFileId(file) {
+        return `${file.name}_${file.size}_${Date.now()}`;
+    }
+    /**
+     * Update upload progress
+     */
+    updateUploadProgress(fileId, progress) {
+        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
+            ? { ...upload, progress, status: 'uploading' }
+            : upload));
+    }
+    /**
+     * Update upload status
+     */
+    updateUploadStatus(fileId, status, progress, error, uploadedFile) {
+        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
+            ? { ...upload, status, progress, error, uploadedFile }
+            : upload));
     }
     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     [class.uploading]=\"isUploading()\">\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 (isUploading()) {\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 -->\r\n    @if (hasUploads()) {\r\n    <div class=\"upload-queue\">\r\n      @for (upload of uploadQueue(); track upload.fileId) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\r\n        \r\n        <!-- File Info -->\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (upload.status) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('completed') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\r\n              }\r\n              @case ('cancelled') {\r\n              <span class=\"text-gray-600\">Cancelled</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 (upload.status === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(upload.fileId)\" 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(upload.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\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\" (click)=\"retryUpload(upload.fileId)\" 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    }\r\n\r\n    <!-- Hidden file input for drag & drop -->\r\n    <div class=\"hidden-uploader\">\r\n      <input type=\"file\" multiple style=\"display: none;\" id=\"floating-file-input\">\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- Footer (always visible) -->\r\n  <div class=\"uploader-footer\">\r\n    <div class=\"footer-stats\">\r\n      @if (activeUploads().length > 0) {\r\n      <span class=\"stat uploading\">\r\n        <cide-ele-icon size=\"xs\">cloud_upload</cide-ele-icon>\r\n        {{ activeUploads().length }} uploading\r\n      </span>\r\n      }\r\n      @if (completedUploads().length > 0) {\r\n      <span class=\"stat completed\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        {{ completedUploads().length }} completed\r\n      </span>\r\n      }\r\n      @if (failedUploads().length > 0) {\r\n      <span class=\"stat failed\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        {{ failedUploads().length }} failed\r\n      </span>\r\n      }\r\n    </div>\r\n  </div>\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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    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) {\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 -->\r\n    @if (uploadQueue().length > 0) {\r\n    <div class=\"upload-queue\">\r\n      @for (upload of uploadQueue(); track upload.fileId) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\r\n        \r\n        <!-- File Info -->\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (upload.status) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('completed') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\r\n              }\r\n              @case ('cancelled') {\r\n              <span class=\"text-gray-600\">Cancelled</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 (upload.status === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(upload.fileId)\" 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(upload.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\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\" (click)=\"retryUpload(upload.fileId)\" 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    }\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)}\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     [class.uploading]=\"isUploading()\">\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 (isUploading()) {\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 -->\r\n    @if (hasUploads()) {\r\n    <div class=\"upload-queue\">\r\n      @for (upload of uploadQueue(); track upload.fileId) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\r\n        \r\n        <!-- File Info -->\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (upload.status) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('completed') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\r\n              }\r\n              @case ('cancelled') {\r\n              <span class=\"text-gray-600\">Cancelled</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 (upload.status === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(upload.fileId)\" 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(upload.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\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\" (click)=\"retryUpload(upload.fileId)\" 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    }\r\n\r\n    <!-- Hidden file input for drag & drop -->\r\n    <div class=\"hidden-uploader\">\r\n      <input type=\"file\" multiple style=\"display: none;\" id=\"floating-file-input\">\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- Footer (always visible) -->\r\n  <div class=\"uploader-footer\">\r\n    <div class=\"footer-stats\">\r\n      @if (activeUploads().length > 0) {\r\n      <span class=\"stat uploading\">\r\n        <cide-ele-icon size=\"xs\">cloud_upload</cide-ele-icon>\r\n        {{ activeUploads().length }} uploading\r\n      </span>\r\n      }\r\n      @if (completedUploads().length > 0) {\r\n      <span class=\"stat completed\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        {{ completedUploads().length }} completed\r\n      </span>\r\n      }\r\n      @if (failedUploads().length > 0) {\r\n      <span class=\"stat failed\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        {{ failedUploads().length }} failed\r\n      </span>\r\n      }\r\n    </div>\r\n  </div>\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)}\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) {\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 -->\r\n    @if (uploadQueue().length > 0) {\r\n    <div class=\"upload-queue\">\r\n      @for (upload of uploadQueue(); track upload.fileId) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\r\n        \r\n        <!-- File Info -->\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (upload.status) {\r\n              @case ('pending') {\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('completed') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\r\n              }\r\n              @case ('cancelled') {\r\n              <span class=\"text-gray-600\">Cancelled</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 (upload.status === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(upload.fileId)\" 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(upload.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\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\" (click)=\"retryUpload(upload.fileId)\" 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    }\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)}\n"] }]
         }], ctorParameters: () => [] });
 
 class CideTextareaComponent {