cloud-ide-element 1.0.95 → 1.0.97

package/fesm2022/cloud-ide-element.mjs

@@ -2947,6 +2947,22 @@ class CideEleFileManagerService {
     getFetchedFilesByGroupId(groupId) {
         return this._fetchedFiles().get(groupId) || [];
     }
+    /**
+     * Signal to trigger floating uploader visibility
+     */
+    _showFloatingUploader = signal(false, ...(ngDevMode ? [{ debugName: "_showFloatingUploader" }] : []));
+    showFloatingUploader = this._showFloatingUploader.asReadonly();
+    /**
+     * Trigger floating uploader to show
+     */
+    triggerFloatingUploaderShow() {
+        console.log('🎬 [FileManagerService] Triggering floating uploader to show');
+        this._showFloatingUploader.set(true);
+        // Reset after a short delay to allow components to react
+        setTimeout(() => {
+            this._showFloatingUploader.set(false);
+        }, 100);
+    }
     /**
      * Get all files (active uploads + fetched files) for a group ID
      * @param groupId The group ID to get files for
@@ -3283,8 +3299,21 @@ class CideEleFloatingFileUploaderComponent {
     failedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
     // Animation states
     isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    // Drag functionality
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    dragOffset = { x: 0, y: 0 };
+    // File drag and drop functionality
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    // Window resize handler reference for cleanup
+    windowResizeHandler;
+    // Cached dimensions for performance
+    cachedDimensions = { width: 320, height: 200 };
+    lastDimensionUpdate = 0;
     constructor() {
         console.log('🚀 [FloatingFileUploader] Component initialized');
+        // Initialize default position
+        this.initializePosition();
         // Set up effect to show/hide floating uploader based on service state
         effect(() => {
             const hasActiveUploads = this.hasActiveUploads();
@@ -3302,17 +3331,31 @@ class CideEleFloatingFileUploaderComponent {
                 this.showWithAnimation();
             }
         });
+        // Set up effect to listen for manual show trigger from service
+        effect(() => {
+            const shouldShow = this.fileManagerService.showFloatingUploader();
+            if (shouldShow && !this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to service trigger');
+                this.showWithAnimation();
+            }
+        });
     }
     ngOnInit() {
         // Set up drag and drop listeners
         this.setupDragAndDrop();
         // Set up file input change listeners
         this.setupFileInputListeners();
+        // Set up window resize listener
+        this.setupWindowResize();
     }
     ngOnDestroy() {
         console.log('🧹 [FloatingFileUploader] Component destroyed');
         this.removeDragAndDropListeners();
         this.removeFileInputListeners();
+        // Clean up window resize listener
+        if (this.windowResizeHandler) {
+            window.removeEventListener('resize', this.windowResizeHandler);
+        }
     }
     /**
      * Set up drag and drop functionality
@@ -3616,13 +3659,20 @@ class CideEleFloatingFileUploaderComponent {
                 .subscribe({
                 next: (files) => {
                     console.log('✅ [FloatingFileUploader] Files fetched and stored:', files.length);
+                    // Force show the uploader after files are loaded
+                    this.showWithAnimation();
                 },
                 error: (error) => {
                     console.error('❌ [FloatingFileUploader] Failed to fetch files:', error);
+                    // Still show the uploader even if fetch fails
+                    this.showWithAnimation();
                 }
             });
         }
-        this.showWithAnimation();
+        else {
+            // Show immediately if no group ID
+            this.showWithAnimation();
+        }
     }
     /**
      * Check if there are any uploads for the current group
@@ -3637,15 +3687,212 @@ class CideEleFloatingFileUploaderComponent {
         // Note: This would need to be enhanced based on how group IDs are stored in the file manager service
         return this.hasUploads();
     }
+    /**
+     * Handle drag over event for file drop
+     */
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    /**
+     * Handle drag leave event for file drop
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    /**
+     * Handle drop event for file drop
+     */
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.handleFileSelection(Array.from(files));
+        }
+    }
+    /**
+     * Trigger file input click
+     */
+    triggerFileInput() {
+        const fileInput = document.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+    /**
+     * Handle file input change
+     */
+    onFileInputChange(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.handleFileSelection(Array.from(input.files));
+            input.value = ''; // Reset input
+        }
+    }
+    /**
+     * Handle file selection from drag/drop or file input
+     */
+    handleFileSelection(files) {
+        console.log('📁 [FloatingFileUploader] Files selected:', files.map(f => f.name));
+        const groupId = this.currentGroupId() || this.generateGroupId();
+        this.currentGroupId.set(groupId);
+        // Upload files using the file manager service
+        files.forEach(file => {
+            this.fileManagerService.uploadFile(file, {
+                groupId: groupId,
+                isMultiple: true,
+                userId: this.currentUserId()
+            });
+        });
+    }
+    /**
+     * Generate a unique group ID
+     */
+    generateGroupId() {
+        return `group_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Update cached dimensions (throttled for performance)
+     */
+    updateCachedDimensions() {
+        const now = Date.now();
+        // Only update dimensions every 100ms to avoid excessive DOM queries
+        if (now - this.lastDimensionUpdate < 100) {
+            return;
+        }
+        const uploaderElement = document.querySelector('.floating-uploader');
+        if (uploaderElement) {
+            this.cachedDimensions = {
+                width: uploaderElement.offsetWidth,
+                height: uploaderElement.offsetHeight
+            };
+            this.lastDimensionUpdate = now;
+        }
+    }
+    /**
+     * Start dragging the uploader
+     */
+    startDrag(event) {
+        event.preventDefault();
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const currentPos = this.position();
+        this.dragOffset = {
+            x: clientX - currentPos.x,
+            y: clientY - currentPos.y
+        };
+        this.isDragging.set(true);
+        // Update cached dimensions at the start of drag for better performance
+        this.updateCachedDimensions();
+        // Add event listeners for drag and end
+        const moveHandler = (e) => this.onDrag(e);
+        const endHandler = () => this.endDrag(moveHandler, endHandler);
+        document.addEventListener('mousemove', moveHandler, { passive: false });
+        document.addEventListener('mouseup', endHandler);
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
+        // Prevent text selection during drag
+        document.body.style.userSelect = 'none';
+    }
+    /**
+     * Handle dragging movement
+     */
+    onDrag(event) {
+        if (!this.isDragging())
+            return;
+        event.preventDefault();
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const newX = clientX - this.dragOffset.x;
+        const newY = clientY - this.dragOffset.y;
+        // Constrain to viewport bounds using cached dimensions for performance
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Use cached dimensions instead of DOM queries for better performance
+        const uploaderWidth = this.cachedDimensions.width;
+        const uploaderHeight = this.cachedDimensions.height;
+        // Ensure uploader stays within viewport bounds
+        const constrainedX = Math.max(0, Math.min(newX, viewportWidth - uploaderWidth));
+        const constrainedY = Math.max(0, Math.min(newY, viewportHeight - uploaderHeight));
+        this.position.set({ x: constrainedX, y: constrainedY });
+    }
+    /**
+     * End dragging
+     */
+    endDrag(moveHandler, endHandler) {
+        this.isDragging.set(false);
+        // Remove event listeners
+        document.removeEventListener('mousemove', moveHandler);
+        document.removeEventListener('mouseup', endHandler);
+        document.removeEventListener('touchmove', moveHandler);
+        document.removeEventListener('touchend', endHandler);
+        // Restore text selection
+        document.body.style.userSelect = '';
+    }
+    /**
+     * Set up window resize listener to keep uploader within bounds
+     */
+    setupWindowResize() {
+        const handleResize = () => {
+            const currentPos = this.position();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Update cached dimensions on resize
+            this.updateCachedDimensions();
+            // Use cached dimensions for performance
+            const uploaderWidth = this.cachedDimensions.width;
+            const uploaderHeight = this.cachedDimensions.height;
+            // Constrain position to new viewport bounds
+            const constrainedX = Math.max(0, Math.min(currentPos.x, viewportWidth - uploaderWidth));
+            const constrainedY = Math.max(0, Math.min(currentPos.y, viewportHeight - uploaderHeight));
+            // Update position if it changed
+            if (constrainedX !== currentPos.x || constrainedY !== currentPos.y) {
+                this.position.set({ x: constrainedX, y: constrainedY });
+                console.log('📐 [FloatingFileUploader] Position adjusted for window resize:', { x: constrainedX, y: constrainedY });
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        // Store reference for cleanup
+        this.windowResizeHandler = handleResize;
+    }
+    /**
+     * Initialize default position
+     */
+    initializePosition() {
+        // Set initial position to bottom-right corner
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Initialize cached dimensions with defaults
+        this.cachedDimensions = { width: 320, height: 300 };
+        // Use cached dimensions for initial positioning
+        const uploaderWidth = this.cachedDimensions.width;
+        const uploaderHeight = this.cachedDimensions.height;
+        // Ensure initial position is within bounds
+        const initialX = Math.max(20, viewportWidth - uploaderWidth - 20);
+        const initialY = Math.max(20, viewportHeight - uploaderHeight - 20);
+        this.position.set({
+            x: initialX,
+            y: initialY
+        });
+        // Update dimensions after a short delay to get actual rendered size
+        setTimeout(() => {
+            this.updateCachedDimensions();
+        }, 100);
+    }
     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 -->\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 - Fixed at top -->\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\n    <div class=\"overall-progress sticky-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 (only 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.sticky-progress{position:sticky;top:0;background:#fff;z-index:10;box-shadow:0 2px 4px #0000000d}.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.sticky-progress{background:#1e293b;box-shadow:0 2px 4px #0003}.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"] }] });
+    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     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\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    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\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 (only 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;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.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.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 .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.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.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.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 .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.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 -->\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 - Fixed at top -->\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\n    <div class=\"overall-progress sticky-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 (only 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.sticky-progress{position:sticky;top:0;background:#fff;z-index:10;box-shadow:0 2px 4px #0000000d}.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.sticky-progress{background:#1e293b;box-shadow:0 2px 4px #0003}.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     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\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    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\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 (only 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;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.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.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 .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.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.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.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 .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.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 {
@@ -4348,8 +4595,36 @@ class CideEleFileInputComponent {
      * This can be called to show the floating uploader even when no files are selected
      */
     showUploader() {
-        if (this.floatingUploader && this.showFloatingUploaderSignal()) {
-            console.log('👁️ [FileInput] Manually showing floating uploader');
+        console.log('👁️ [FileInput] Manually showing floating uploader');
+        if (!this.showFloatingUploaderSignal()) {
+            console.log('⚠️ [FileInput] Floating uploader is disabled');
+            return;
+        }
+        const groupId = this.groupId();
+        if (groupId) {
+            // Fetch files for the group and trigger floating uploader to show
+            this.fileManagerService.fetchAndStoreFilesByGroupId(groupId)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (files) => {
+                    console.log('✅ [FileInput] Files fetched for floating uploader:', files.length);
+                    // Trigger the floating uploader to show via service
+                    this.fileManagerService.triggerFloatingUploaderShow();
+                },
+                error: (error) => {
+                    console.error('❌ [FileInput] Failed to fetch files for floating uploader:', error);
+                    // Still trigger show even if fetch fails
+                    this.fileManagerService.triggerFloatingUploaderShow();
+                }
+            });
+        }
+        else {
+            // No group ID, just trigger show
+            this.fileManagerService.triggerFloatingUploaderShow();
+        }
+        // Fallback to direct component access if available
+        if (this.floatingUploader) {
+            console.log('👁️ [FileInput] Using direct component access as fallback');
             this.floatingUploader.showUploader(this.floatingUploaderGroupIdSignal());
         }
     }
@@ -4594,7 +4869,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @if (multipleSignal() && fileNames().length > 1) {\n          <!-- Show file count for multiple files -->\n          <div class=\"cide-file-input-multiple-count\">\n            {{ fileNames().length }} files selected\n          </div>\n        } @else {\n          <!-- Show individual file names for single file or when only one file selected -->\n          @for (name of fileNames(); track name) {\n            <span>{{ name }}</span>\n          }\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button -->\n  @if (showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"cide-file-input-upload-status\">\n      <div class=\"cide-file-input-upload-count\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"upload-count-text\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"cide-file-input-show-files-btn\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n        Show Files\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-multiple-count{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f0f9ff;border:1px solid #0ea5e9;border-radius:.5rem;color:#0369a1;font-weight:500;font-size:.9rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}.cide-file-input-upload-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;margin-top:.5rem;gap:.75rem}.cide-file-input-upload-status .cide-file-input-upload-count{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem;font-weight:500}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#1e293b}.cide-file-input-upload-status .cide-file-input-show-files-btn{display:flex;align-items:center;gap:.25rem;padding:.375rem .5rem;background:#3b82f6;color:#fff;border:none;border-radius:.25rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:auto;white-space:nowrap}.cide-file-input-upload-status .cide-file-input-show-files-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f633}.cide-file-input-upload-status .cide-file-input-show-files-btn:active{transform:translateY(0);box-shadow:0 1px 2px #3b82f61a}@media (prefers-color-scheme: dark){.cide-file-input-upload-status{background:#1e293b;border-color:#334155}.cide-file-input-upload-status .cide-file-input-upload-count{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#f1f5f9}.cide-file-input-upload-status .cide-file-input-show-files-btn{background:#3b82f6}.cide-file-input-upload-status .cide-file-input-show-files-btn:hover{background:#2563eb}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"cide-file-input-drop-zone\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      [class.cide-file-input-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-has-files]=\"hasFiles()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"cide-file-input-drop-content\">\n        <!-- Icon and Text -->\n        <div class=\"cide-file-input-drop-main\">\n          <cide-ele-icon class=\"cide-file-input-drop-icon\" size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"cide-file-input-drop-text\">\n            @if (isDragOver()) {\n              <span class=\"cide-file-input-drop-title\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"cide-file-input-drop-title\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"cide-file-input-drop-subtitle\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"cide-file-input-drop-title\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"cide-file-input-drop-actions\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"cide-file-input-action-btn cide-file-input-clear-btn\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"cide-file-input-upload-status\">\n      <div class=\"cide-file-input-upload-count\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"upload-count-text\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"cide-file-input-show-files-icon\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-drop-zone{border:2px dashed #d1d5db;border-radius:8px;background:#f9fafb;cursor:pointer;transition:all .2s ease;min-height:60px}.cide-file-input-drop-zone:hover{border-color:#3b82f6;background:#f0f9ff}.cide-file-input-drop-zone.cide-file-input-drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.cide-file-input-drop-zone.cide-file-input-disabled{opacity:.5;cursor:not-allowed}.cide-file-input-drop-zone.cide-file-input-disabled:hover{border-color:#d1d5db;background:#f9fafb;transform:none}.cide-file-input-drop-zone.cide-file-input-has-files{border-color:#10b981;background:#f0fdf4}.cide-file-input-drop-zone.cide-file-input-has-files:hover{border-color:#059669;background:#ecfdf5}.cide-file-input-drop-content{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}.cide-file-input-drop-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.cide-file-input-drop-icon{color:#6b7280;transition:color .2s ease;flex-shrink:0}.cide-file-input-drag-over .cide-file-input-drop-icon{color:#3b82f6}.cide-file-input-has-files .cide-file-input-drop-icon{color:#10b981}.cide-file-input-drop-text{display:flex;flex-direction:column;gap:2px;min-width:0}.cide-file-input-drop-title{font-size:14px;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cide-file-input-drag-over .cide-file-input-drop-title{color:#1d4ed8}.cide-file-input-has-files .cide-file-input-drop-title{color:#065f46}.cide-file-input-drop-subtitle{font-size:12px;color:#6b7280}.cide-file-input-has-files .cide-file-input-drop-subtitle{color:#047857}.cide-file-input-drop-actions{display:flex;gap:4px;flex-shrink:0}.cide-file-input-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;transition:all .2s ease}.cide-file-input-action-btn:hover{background:#0000000d}.cide-file-input-action-btn.cide-file-input-clear-btn{color:#dc2626}.cide-file-input-action-btn.cide-file-input-clear-btn:hover{background:#fef2f2;color:#b91c1c}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-multiple-count{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f0f9ff;border:1px solid #0ea5e9;border-radius:.5rem;color:#0369a1;font-weight:500;font-size:.9rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}.cide-file-input-upload-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;margin-top:.5rem;gap:.75rem}.cide-file-input-upload-status .cide-file-input-upload-count{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem;font-weight:500}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#1e293b}.cide-file-input-upload-status .cide-file-input-show-files-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;color:#6b7280;border:none;border-radius:.25rem;cursor:pointer;transition:all .2s ease}.cide-file-input-upload-status .cide-file-input-show-files-icon:hover{background:#f3f4f6;color:#3b82f6}.cide-file-input-upload-status .cide-file-input-show-files-icon:active{background:#e5e7eb}@media (prefers-color-scheme: dark){.cide-file-input-drop-zone{border-color:#475569;background:#334155}.cide-file-input-drop-zone:hover{border-color:#3b82f6;background:#1e3a8a}.cide-file-input-drop-zone.cide-file-input-drag-over{border-color:#60a5fa;background:#1e40af}.cide-file-input-drop-zone.cide-file-input-has-files{border-color:#10b981;background:#064e3b}.cide-file-input-drop-zone.cide-file-input-has-files:hover{border-color:#059669;background:#065f46}.cide-file-input-drop-icon{color:#94a3b8}.cide-file-input-drag-over .cide-file-input-drop-icon{color:#60a5fa}.cide-file-input-has-files .cide-file-input-drop-icon{color:#34d399}.cide-file-input-drop-title{color:#f1f5f9}.cide-file-input-drag-over .cide-file-input-drop-title{color:#93c5fd}.cide-file-input-has-files .cide-file-input-drop-title{color:#6ee7b7}.cide-file-input-drop-subtitle{color:#94a3b8}.cide-file-input-has-files .cide-file-input-drop-subtitle{color:#a7f3d0}.cide-file-input-action-btn:hover{background:#ffffff1a}.cide-file-input-action-btn.cide-file-input-clear-btn{color:#f87171}.cide-file-input-action-btn.cide-file-input-clear-btn:hover{background:#7f1d1d;color:#fca5a5}.cide-file-input-upload-status{background:#1e293b;border-color:#334155}.cide-file-input-upload-status .cide-file-input-upload-count{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#f1f5f9}.cide-file-input-upload-status .cide-file-input-show-files-icon{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-show-files-icon:hover{background:#374151;color:#60a5fa}.cide-file-input-upload-status .cide-file-input-show-files-icon:active{background:#4b5563}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -4609,7 +4884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @if (multipleSignal() && fileNames().length > 1) {\n          <!-- Show file count for multiple files -->\n          <div class=\"cide-file-input-multiple-count\">\n            {{ fileNames().length }} files selected\n          </div>\n        } @else {\n          <!-- Show individual file names for single file or when only one file selected -->\n          @for (name of fileNames(); track name) {\n            <span>{{ name }}</span>\n          }\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button -->\n  @if (showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"cide-file-input-upload-status\">\n      <div class=\"cide-file-input-upload-count\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"upload-count-text\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"cide-file-input-show-files-btn\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n        Show Files\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-multiple-count{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f0f9ff;border:1px solid #0ea5e9;border-radius:.5rem;color:#0369a1;font-weight:500;font-size:.9rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}.cide-file-input-upload-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;margin-top:.5rem;gap:.75rem}.cide-file-input-upload-status .cide-file-input-upload-count{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem;font-weight:500}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#1e293b}.cide-file-input-upload-status .cide-file-input-show-files-btn{display:flex;align-items:center;gap:.25rem;padding:.375rem .5rem;background:#3b82f6;color:#fff;border:none;border-radius:.25rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:auto;white-space:nowrap}.cide-file-input-upload-status .cide-file-input-show-files-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f633}.cide-file-input-upload-status .cide-file-input-show-files-btn:active{transform:translateY(0);box-shadow:0 1px 2px #3b82f61a}@media (prefers-color-scheme: dark){.cide-file-input-upload-status{background:#1e293b;border-color:#334155}.cide-file-input-upload-status .cide-file-input-upload-count{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#f1f5f9}.cide-file-input-upload-status .cide-file-input-show-files-btn{background:#3b82f6}.cide-file-input-upload-status .cide-file-input-show-files-btn:hover{background:#2563eb}}\n"] }]
+                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"cide-file-input-drop-zone\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      [class.cide-file-input-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-has-files]=\"hasFiles()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"cide-file-input-drop-content\">\n        <!-- Icon and Text -->\n        <div class=\"cide-file-input-drop-main\">\n          <cide-ele-icon class=\"cide-file-input-drop-icon\" size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"cide-file-input-drop-text\">\n            @if (isDragOver()) {\n              <span class=\"cide-file-input-drop-title\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"cide-file-input-drop-title\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"cide-file-input-drop-subtitle\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"cide-file-input-drop-title\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"cide-file-input-drop-actions\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"cide-file-input-action-btn cide-file-input-clear-btn\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"cide-file-input-upload-status\">\n      <div class=\"cide-file-input-upload-count\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"upload-count-text\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"cide-file-input-show-files-icon\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-drop-zone{border:2px dashed #d1d5db;border-radius:8px;background:#f9fafb;cursor:pointer;transition:all .2s ease;min-height:60px}.cide-file-input-drop-zone:hover{border-color:#3b82f6;background:#f0f9ff}.cide-file-input-drop-zone.cide-file-input-drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.cide-file-input-drop-zone.cide-file-input-disabled{opacity:.5;cursor:not-allowed}.cide-file-input-drop-zone.cide-file-input-disabled:hover{border-color:#d1d5db;background:#f9fafb;transform:none}.cide-file-input-drop-zone.cide-file-input-has-files{border-color:#10b981;background:#f0fdf4}.cide-file-input-drop-zone.cide-file-input-has-files:hover{border-color:#059669;background:#ecfdf5}.cide-file-input-drop-content{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}.cide-file-input-drop-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.cide-file-input-drop-icon{color:#6b7280;transition:color .2s ease;flex-shrink:0}.cide-file-input-drag-over .cide-file-input-drop-icon{color:#3b82f6}.cide-file-input-has-files .cide-file-input-drop-icon{color:#10b981}.cide-file-input-drop-text{display:flex;flex-direction:column;gap:2px;min-width:0}.cide-file-input-drop-title{font-size:14px;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cide-file-input-drag-over .cide-file-input-drop-title{color:#1d4ed8}.cide-file-input-has-files .cide-file-input-drop-title{color:#065f46}.cide-file-input-drop-subtitle{font-size:12px;color:#6b7280}.cide-file-input-has-files .cide-file-input-drop-subtitle{color:#047857}.cide-file-input-drop-actions{display:flex;gap:4px;flex-shrink:0}.cide-file-input-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;transition:all .2s ease}.cide-file-input-action-btn:hover{background:#0000000d}.cide-file-input-action-btn.cide-file-input-clear-btn{color:#dc2626}.cide-file-input-action-btn.cide-file-input-clear-btn:hover{background:#fef2f2;color:#b91c1c}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-multiple-count{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f0f9ff;border:1px solid #0ea5e9;border-radius:.5rem;color:#0369a1;font-weight:500;font-size:.9rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}.cide-file-input-upload-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;margin-top:.5rem;gap:.75rem}.cide-file-input-upload-status .cide-file-input-upload-count{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem;font-weight:500}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#1e293b}.cide-file-input-upload-status .cide-file-input-show-files-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;color:#6b7280;border:none;border-radius:.25rem;cursor:pointer;transition:all .2s ease}.cide-file-input-upload-status .cide-file-input-show-files-icon:hover{background:#f3f4f6;color:#3b82f6}.cide-file-input-upload-status .cide-file-input-show-files-icon:active{background:#e5e7eb}@media (prefers-color-scheme: dark){.cide-file-input-drop-zone{border-color:#475569;background:#334155}.cide-file-input-drop-zone:hover{border-color:#3b82f6;background:#1e3a8a}.cide-file-input-drop-zone.cide-file-input-drag-over{border-color:#60a5fa;background:#1e40af}.cide-file-input-drop-zone.cide-file-input-has-files{border-color:#10b981;background:#064e3b}.cide-file-input-drop-zone.cide-file-input-has-files:hover{border-color:#059669;background:#065f46}.cide-file-input-drop-icon{color:#94a3b8}.cide-file-input-drag-over .cide-file-input-drop-icon{color:#60a5fa}.cide-file-input-has-files .cide-file-input-drop-icon{color:#34d399}.cide-file-input-drop-title{color:#f1f5f9}.cide-file-input-drag-over .cide-file-input-drop-title{color:#93c5fd}.cide-file-input-has-files .cide-file-input-drop-title{color:#6ee7b7}.cide-file-input-drop-subtitle{color:#94a3b8}.cide-file-input-has-files .cide-file-input-drop-subtitle{color:#a7f3d0}.cide-file-input-action-btn:hover{background:#ffffff1a}.cide-file-input-action-btn.cide-file-input-clear-btn{color:#f87171}.cide-file-input-action-btn.cide-file-input-clear-btn:hover{background:#7f1d1d;color:#fca5a5}.cide-file-input-upload-status{background:#1e293b;border-color:#334155}.cide-file-input-upload-status .cide-file-input-upload-count{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-upload-count .upload-count-text{color:#f1f5f9}.cide-file-input-upload-status .cide-file-input-show-files-icon{color:#94a3b8}.cide-file-input-upload-status .cide-file-input-show-files-icon:hover{background:#374151;color:#60a5fa}.cide-file-input-upload-status .cide-file-input-show-files-icon:active{background:#4b5563}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], accept: [{
@@ -4656,488 +4931,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
-class CideEleGlobalFileUploaderComponent {
-    // Dependency injection
-    destroyRef = inject(DestroyRef);
-    fileService = inject(CideEleFileManagerService);
-    // Input properties
-    userId = '';
-    multiple = true;
-    accept = '';
-    maxFileSize = 10; // MB
-    allowedTypes = [];
-    // Output events
-    uploadComplete = new EventEmitter();
-    uploadError = new EventEmitter();
-    uploadCancelled = new EventEmitter();
-    allUploadsComplete = new EventEmitter();
-    // Signals for reactive state management
-    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
-    uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
-    currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
-    // Computed values
-    hasUploads = computed(() => this.uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
-    pendingUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'pending'), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
-    activeUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
-    completedUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'completed'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
-    failedUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
-    constructor() {
-        console.log('🚀 [GlobalFileUploader] Component initialized');
-    }
-    /**
-     * Handle drag over event
-     */
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(true);
-    }
-    /**
-     * Handle drag leave event
-     */
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-    }
-    /**
-     * Handle drop event
-     */
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.addFilesToQueue(Array.from(files));
-        }
-    }
-    /**
-     * Handle file input change
-     */
-    onFileInputChange(event) {
-        const target = event.target;
-        const files = target.files;
-        if (files && files.length > 0) {
-            this.addFilesToQueue(Array.from(files));
-        }
-        // Reset input value to allow selecting the same file again
-        target.value = '';
-    }
-    /**
-     * Add files to upload queue
-     */
-    addFilesToQueue(files) {
-        // Validate files
-        const validFiles = files.filter(file => this.validateFile(file));
-        if (validFiles.length === 0) {
-            console.warn('⚠️ [GlobalFileUploader] No valid files to upload');
-            return;
-        }
-        const newUploads = validFiles.map(file => ({
-            fileId: this.generateFileId(file),
-            fileName: file.name,
-            progress: 0,
-            status: 'pending',
-            file: file
-        }));
-        this.uploadQueue.update(queue => [...queue, ...newUploads]);
-        this.processUploadQueue();
-    }
-    /**
-     * Validate file
-     */
-    validateFile(file) {
-        // Check file size
-        const maxSizeBytes = this.maxFileSize * 1024 * 1024;
-        if (file.size > maxSizeBytes) {
-            console.warn(`⚠️ [GlobalFileUploader] File ${file.name} exceeds size limit`);
-            return false;
-        }
-        // Check file type
-        if (this.allowedTypes.length > 0 && !this.allowedTypes.includes(file.type)) {
-            console.warn(`⚠️ [GlobalFileUploader] File type ${file.type} not allowed`);
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Process upload queue
-     */
-    processUploadQueue() {
-        const pendingUploads = this.uploadQueue().filter(upload => upload.status === 'pending');
-        if (pendingUploads.length > 0 && !this.isUploading()) {
-            this.isUploading.set(true);
-            if (this.multiple && pendingUploads.length > 1) {
-                // Multiple file upload with group ID
-                this.uploadMultipleFiles(pendingUploads);
-            }
-            else {
-                // Single file upload
-                this.uploadNextFile();
-            }
-        }
-    }
-    /**
-     * Upload multiple files with group ID
-     */
-    uploadMultipleFiles(uploads) {
-        console.log('📤 [GlobalFileUploader] Starting multiple file upload for:', uploads.length, 'files');
-        // Generate group ID first
-        this.fileService.generateObjectId()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (response) => {
-                const groupId = response.data?.objectId;
-                console.log('🆔 [GlobalFileUploader] Generated group ID:', groupId);
-                this.currentGroupId.set(groupId || null);
-                if (groupId) {
-                    // Upload all files with the same group ID
-                    this.uploadFilesWithGroupId(uploads, groupId);
-                }
-                else {
-                    console.error('❌ [GlobalFileUploader] No group ID received');
-                    this.handleUploadError('Failed to generate group ID', uploads[0]?.fileId);
-                }
-            },
-            error: (error) => {
-                console.error('❌ [GlobalFileUploader] Failed to generate group ID:', error);
-                this.handleUploadError('Failed to generate group ID', uploads[0]?.fileId);
-            }
-        });
-    }
-    /**
-     * Upload files with group ID
-     */
-    uploadFilesWithGroupId(uploads, groupId) {
-        let completedCount = 0;
-        let failedCount = 0;
-        const totalFiles = uploads.length;
-        const uploadedFiles = [];
-        uploads.forEach((upload, index) => {
-            // Update status to uploading
-            this.updateUploadStatus(upload.fileId, 'uploading', 0);
-            const uploadRequest = {
-                file: upload.file,
-                userId: this.userId,
-                groupId: groupId,
-                tags: [],
-                permissions: ['read', 'write']
-            };
-            this.fileService.uploadFile(upload.file, this.convertToFileUploadOptions(uploadRequest), (progress) => {
-                // Use the original fileId for progress updates during upload
-                this.updateUploadProgress(upload.fileId, progress);
-            })
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    completedCount++;
-                    console.log(`✅ [GlobalFileUploader] File ${index + 1}/${totalFiles} uploaded successfully`);
-                    // Find the upload item by cyfm_temp_unique_id from response
-                    const responseFile = response?.data?.core_file_manager?.[0];
-                    const tempUniqueId = responseFile?.cyfm_temp_unique_id;
-                    console.log('🔍 [GlobalFileUploader] Response tempUniqueId:', tempUniqueId);
-                    console.log('🔍 [GlobalFileUploader] Original upload fileId:', upload.fileId);
-                    // Use the tempUniqueId to find and update the correct upload item
-                    if (tempUniqueId) {
-                        this.updateUploadStatusByTempId(tempUniqueId, 'completed', 100, undefined, response);
-                    }
-                    else {
-                        // Fallback to original fileId
-                        this.updateUploadStatus(upload.fileId, 'completed', 100, undefined, response);
-                    }
-                    this.uploadComplete.emit({
-                        fileId: tempUniqueId || upload.fileId,
-                        fileName: upload.fileName,
-                        progress: 100,
-                        status: 'completed',
-                        uploadedFile: response
-                    });
-                    if (responseFile) {
-                        uploadedFiles.push(responseFile);
-                    }
-                    console.log('🔍 [GlobalFileUploader] Upload response received:', response);
-                    console.log('🔍 [GlobalFileUploader] Response data structure:', response?.data);
-                    // Check if all files are completed
-                    if (completedCount + failedCount === totalFiles) {
-                        this.handleMultipleUploadComplete(completedCount, failedCount, groupId, uploadedFiles);
-                    }
-                },
-                error: (error) => {
-                    failedCount++;
-                    console.error(`❌ [GlobalFileUploader] File ${index + 1}/${totalFiles} upload failed:`, error);
-                    this.updateUploadStatus(upload.fileId, 'error', 0, error.message || 'Upload failed');
-                    this.uploadError.emit({
-                        fileId: upload.fileId,
-                        error: error.message || 'Upload failed'
-                    });
-                    // Check if all files are completed
-                    if (completedCount + failedCount === totalFiles) {
-                        this.handleMultipleUploadComplete(completedCount, failedCount, groupId, uploadedFiles);
-                    }
-                }
-            });
-        });
-    }
-    /**
-     * Handle multiple upload completion
-     */
-    handleMultipleUploadComplete(completed, failed, groupId, uploadedFiles) {
-        console.log(`📊 [GlobalFileUploader] Multiple upload complete: ${completed}/${completed + failed} successful`);
-        this.isUploading.set(false);
-        if (completed > 0) {
-            this.allUploadsComplete.emit({
-                groupId: groupId,
-                uploadedFiles: uploadedFiles
-            });
-        }
-    }
-    /**
-     * Upload next file in queue (single file mode)
-     */
-    uploadNextFile() {
-        const pendingUpload = this.uploadQueue().find(upload => upload.status === 'pending');
-        if (!pendingUpload) {
-            this.isUploading.set(false);
-            return;
-        }
-        // Update status to uploading
-        this.updateUploadStatus(pendingUpload.fileId, 'uploading', 0);
-        const uploadRequest = {
-            file: pendingUpload.file,
-            userId: this.userId,
-            tags: [],
-            permissions: ['read', 'write']
-        };
-        this.fileService.uploadFile(pendingUpload.file, this.convertToFileUploadOptions(uploadRequest), (progress) => {
-            this.updateUploadProgress(pendingUpload.fileId, progress);
-        })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (response) => {
-                console.log('✅ [GlobalFileUploader] Single file upload successful:', response);
-                // Find the upload item by cyfm_temp_unique_id from response
-                const responseFile = response?.data?.core_file_manager?.[0];
-                const tempUniqueId = responseFile?.cyfm_temp_unique_id;
-                console.log('🔍 [GlobalFileUploader] Single upload - Response tempUniqueId:', tempUniqueId);
-                console.log('🔍 [GlobalFileUploader] Single upload - Original upload fileId:', pendingUpload.fileId);
-                // Use the tempUniqueId to find and update the correct upload item
-                if (tempUniqueId) {
-                    this.updateUploadStatusByTempId(tempUniqueId, 'completed', 100, undefined, response);
-                }
-                else {
-                    // Fallback to original fileId
-                    this.updateUploadStatus(pendingUpload.fileId, 'completed', 100, undefined, response);
-                }
-                this.uploadComplete.emit({
-                    fileId: tempUniqueId || pendingUpload.fileId,
-                    fileName: pendingUpload.fileName,
-                    progress: 100,
-                    status: 'completed',
-                    uploadedFile: response
-                });
-                // Process next file
-                setTimeout(() => this.uploadNextFile(), 500);
-            },
-            error: (error) => {
-                console.error('❌ [GlobalFileUploader] Upload error:', error);
-                this.updateUploadStatus(pendingUpload.fileId, 'error', 0, error.message || 'Upload failed');
-                this.uploadError.emit({
-                    fileId: pendingUpload.fileId,
-                    error: error.message || 'Upload failed'
-                });
-                // Process next file
-                setTimeout(() => this.uploadNextFile(), 500);
-            }
-        });
-    }
-    /**
-     * Update upload progress
-     */
-    updateUploadProgress(fileId, progress) {
-        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
-            ? { ...upload, progress }
-            : upload));
-    }
-    /**
-     * Update upload status
-     */
-    updateUploadStatus(fileId, status, progress, error, uploadedFile) {
-        console.log('🔄 [GlobalFileUploader] Updating upload status:', { fileId, status, progress, error: !!error, uploadedFile: !!uploadedFile });
-        this.uploadQueue.update(queue => {
-            const updatedQueue = queue.map(upload => {
-                if (upload.fileId === fileId) {
-                    console.log('🔄 [GlobalFileUploader] Found upload to update:', upload.fileName, 'from', upload.status, 'to', status);
-                    return { ...upload, status, progress, error, uploadedFile };
-                }
-                return upload;
-            });
-            console.log('🔄 [GlobalFileUploader] Updated queue:', updatedQueue.map(u => ({ fileName: u.fileName, status: u.status })));
-            return updatedQueue;
-        });
-    }
-    /**
-     * Update upload status by cyfm_temp_unique_id
-     */
-    updateUploadStatusByTempId(tempUniqueId, status, progress, error, uploadedFile) {
-        console.log('🔄 [GlobalFileUploader] Updating upload status by tempId:', { tempUniqueId, status, progress, error: !!error, uploadedFile: !!uploadedFile });
-        this.uploadQueue.update(queue => {
-            const updatedQueue = queue.map(upload => {
-                // Check if this upload's fileId matches the tempUniqueId
-                if (upload.fileId === tempUniqueId) {
-                    console.log('🔄 [GlobalFileUploader] Found upload by tempId to update:', upload.fileName, 'from', upload.status, 'to', status);
-                    return { ...upload, status, progress, error, uploadedFile };
-                }
-                return upload;
-            });
-            console.log('🔄 [GlobalFileUploader] Updated queue by tempId:', updatedQueue.map(u => ({ fileName: u.fileName, status: u.status, fileId: u.fileId })));
-            return updatedQueue;
-        });
-    }
-    /**
-     * Handle upload error
-     */
-    handleUploadError(error, fileId) {
-        if (fileId) {
-            this.updateUploadStatus(fileId, 'error', 0, error);
-            this.uploadError.emit({ fileId, error });
-        }
-        this.isUploading.set(false);
-    }
-    /**
-     * Cancel upload
-     */
-    cancelUpload(fileId) {
-        this.updateUploadStatus(fileId, 'cancelled', 0);
-        this.uploadCancelled.emit(fileId);
-        // Remove from queue after a delay
-        setTimeout(() => {
-            this.uploadQueue.update(queue => queue.filter(upload => upload.fileId !== fileId));
-        }, 1000);
-    }
-    /**
-     * Retry upload
-     */
-    retryUpload(fileId) {
-        this.updateUploadStatus(fileId, 'pending', 0);
-        this.processUploadQueue();
-    }
-    /**
-     * Remove upload from queue
-     */
-    removeUpload(fileId) {
-        this.uploadQueue.update(queue => queue.filter(upload => upload.fileId !== fileId));
-    }
-    /**
-     * Clear completed uploads
-     */
-    clearCompleted() {
-        this.uploadQueue.update(queue => queue.filter(upload => upload.status !== 'completed'));
-    }
-    /**
-     * Clear all uploads
-     */
-    clearAll() {
-        this.uploadQueue.set([]);
-        this.currentGroupId.set(null);
-    }
-    /**
-     * Get status icon
-     */
-    getStatusIcon(status) {
-        switch (status) {
-            case 'pending': return 'schedule';
-            case 'uploading': return 'cloud_upload';
-            case 'completed': return 'check_circle';
-            case 'error': return 'error';
-            case 'cancelled': return 'cancel';
-            default: return 'help';
-        }
-    }
-    /**
-     * Get status class
-     */
-    getStatusClass(status) {
-        switch (status) {
-            case 'pending': return 'status-pending';
-            case 'uploading': return 'status-uploading';
-            case 'completed': return 'status-completed';
-            case 'error': return 'status-error';
-            case 'cancelled': return 'status-cancelled';
-            default: return 'status-unknown';
-        }
-    }
-    /**
-     * Get file size display
-     */
-    getFileSizeDisplay(file) {
-        const bytes = file.size;
-        if (bytes === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }
-    /**
-     * Generate unique file ID - this should match the service's generateFileId method
-     * The service uses: ${file.name}_${file.size}_${Date.now()}
-     */
-    generateFileId(file) {
-        return `${file.name}_${file.size}_${Date.now()}`;
-    }
-    /**
-     * Convert IFileUploadRequest to FileUploadOptions
-     */
-    convertToFileUploadOptions(request) {
-        return {
-            altText: request.altText,
-            userId: request.userId,
-            permissions: request.permissions,
-            tags: request.tags,
-            groupId: request.groupId
-        };
-    }
-    /**
-     * Trigger file input click
-     */
-    triggerFileInput() {
-        const fileInput = document.getElementById('global-file-input');
-        if (fileInput) {
-            fileInput.click();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleGlobalFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleGlobalFileUploaderComponent, isStandalone: true, selector: "cide-ele-global-file-uploader", inputs: { userId: "userId", multiple: "multiple", accept: "accept", maxFileSize: "maxFileSize", allowedTypes: "allowedTypes" }, outputs: { uploadComplete: "uploadComplete", uploadError: "uploadError", uploadCancelled: "uploadCancelled", allUploadsComplete: "allUploadsComplete" }, ngImport: i0, template: "<!-- Global File Uploader Component -->\r\n<div class=\"global-file-uploader\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input id=\"global-file-input\" type=\"file\" [multiple]=\"multiple\" [accept]=\"accept\" \r\n         (change)=\"onFileInputChange($event)\" style=\"display: none;\">\r\n\r\n  <!-- Drag and Drop Zone -->\r\n  <div class=\"upload-zone\" [class.drag-over]=\"isDragOver()\" (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\" (click)=\"triggerFileInput()\">\r\n\r\n    <div class=\"upload-zone-content\">\r\n      <cide-ele-icon name=\"cloud_upload\" class=\"upload-icon\" size=\"lg\">\r\n      </cide-ele-icon>\r\n\r\n      <h3 class=\"upload-title\">\r\n        {{ isDragOver() ? 'Drop files here' : 'Upload Files' }}\r\n      </h3>\r\n\r\n      <p class=\"upload-subtitle\">\r\n        {{ isDragOver() ? 'Release to upload' : 'Drag and drop files here or click to browse' }}\r\n      </p>\r\n\r\n      <button cideEleButton cideEleButton variant=\"outline\" size=\"sm\"\r\n        (click)=\"triggerFileInput(); $event.stopPropagation()\">\r\n        <cide-ele-icon name=\"add\" size=\"sm\"></cide-ele-icon>\r\n        Choose Files\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload Queue -->\r\n  @if (hasUploads()) {\r\n  <div class=\"upload-queue\">\r\n    <div class=\"queue-header\">\r\n      <h4 class=\"queue-title\">Upload Queue</h4>\r\n      <div class=\"queue-actions\">\r\n        @if (completedUploads().length > 0) {\r\n        <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"clearCompleted()\">\r\n          Clear Completed\r\n        </button>\r\n        }\r\n        <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"clearAll()\">\r\n          Clear All\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"queue-items\">\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=\"sm\">\r\n            {{getStatusIcon(upload.status)}}\r\n          </cide-ele-icon>\r\n\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            @if (upload.file) {\r\n            <div class=\"file-size\">{{ getFileSizeDisplay(upload.file) }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar -->\r\n        @if (upload.status === 'uploading') {\r\n        <div class=\"progress-container\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\">\r\n            </div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Status Text -->\r\n        @if (upload.status !== 'uploading') {\r\n        <div class=\"status-text\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <span class=\"text-yellow-600\">Waiting...</span>\r\n          }\r\n          @case ('completed') {\r\n          <span class=\"text-green-600\">Uploaded successfully</span>\r\n          }\r\n          @case ('error') {\r\n          <span class=\"text-red-600\">{{ upload.error || 'Upload 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        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"cancelUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"cancel\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"cancelUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"cancel\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"retryUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"refresh\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('cancelled') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></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    <!-- Queue Summary -->\r\n    <div class=\"queue-summary\">\r\n      <div class=\"summary-stats\">\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"schedule\" size=\"xs\"></cide-ele-icon>\r\n          {{ pendingUploads().length }} pending\r\n        </span>\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"cloud_upload\" size=\"xs\"></cide-ele-icon>\r\n          {{ activeUploads().length }} uploading\r\n        </span>\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"check_circle\" size=\"xs\"></cide-ele-icon>\r\n          {{ completedUploads().length }} completed\r\n        </span>\r\n        @if (failedUploads().length > 0) {\r\n        <span class=\"stat error\">\r\n          <cide-ele-icon name=\"error\" size=\"xs\"></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</div>\r\n\r\n", styles: [".global-file-uploader{@apply tw-w-full tw-max-w-2xl tw-mx-auto tw-p-4;}.global-file-uploader .upload-zone{@apply tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-8 tw-text-center tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out;@apply hover:tw-border-blue-400 hover:tw-bg-blue-50;}.global-file-uploader .upload-zone.drag-over{@apply tw-border-blue-500 tw-bg-blue-100 tw-scale-105;}.global-file-uploader .upload-zone .upload-zone-content{@apply tw-space-y-4;}.global-file-uploader .upload-zone .upload-zone-content .upload-icon{@apply tw-text-gray-400 tw-mx-auto;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-xl tw-font-semibold tw-text-gray-700 tw-m-0;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-sm tw-text-gray-500 tw-m-0;}.global-file-uploader .upload-queue{@apply tw-mt-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm;}.global-file-uploader .upload-queue .queue-header{@apply tw-flex tw-justify-between tw-items-center tw-p-4 tw-border-b tw-border-gray-200;}.global-file-uploader .upload-queue .queue-header .queue-title{@apply tw-text-lg tw-font-medium tw-text-gray-700 tw-m-0;}.global-file-uploader .upload-queue .queue-header .queue-actions{@apply tw-flex tw-space-x-2;}.global-file-uploader .upload-queue .queue-items{@apply tw-max-h-96 tw-overflow-y-auto;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-flex tw-items-center tw-justify-between tw-p-4 tw-border-b tw-border-gray-100 tw-transition-colors tw-duration-200;}.global-file-uploader .upload-queue .queue-items .upload-item:last-child{@apply tw-border-b-0;}.global-file-uploader .upload-queue .queue-items .upload-item.status-pending{@apply tw-bg-yellow-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-uploading{@apply tw-bg-blue-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-completed{@apply tw-bg-green-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-error{@apply tw-bg-red-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-cancelled{@apply tw-bg-gray-50;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info{@apply tw-flex tw-items-center tw-flex-1 tw-min-w-0;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .status-icon{@apply tw-mr-3 tw-flex-shrink-0;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details{@apply tw-min-w-0 tw-flex-1;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-name{@apply tw-text-sm tw-font-medium tw-text-gray-700 tw-truncate;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-size{@apply tw-text-xs tw-text-gray-500 tw-mt-1;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container{@apply tw-flex tw-items-center tw-space-x-3 tw-flex-1 tw-max-w-xs tw-mx-4;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar{@apply tw-flex-1 tw-h-2 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar .progress-fill{@apply tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300 tw-ease-out;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-text{@apply tw-text-xs tw-font-medium tw-text-gray-600 tw-min-w-12 tw-text-right;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text{@apply tw-flex-1 tw-text-sm tw-text-center;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text span{@apply tw-font-medium;}.global-file-uploader .upload-queue .queue-items .upload-item .upload-actions{@apply tw-flex tw-space-x-1 tw-ml-4;}.global-file-uploader .upload-queue .queue-summary{@apply tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-200;}.global-file-uploader .upload-queue .queue-summary .summary-stats{@apply tw-flex tw-flex-wrap tw-gap-4 tw-text-sm tw-text-gray-600;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat{@apply tw-flex tw-items-center tw-space-x-1;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat.error{@apply tw-text-red-600;}@media (max-width: 640px){.global-file-uploader{@apply tw-p-2;}.global-file-uploader .upload-zone{@apply tw-p-6;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-lg;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-xs;}.global-file-uploader .upload-queue .queue-header{@apply tw-p-3 tw-flex-col tw-space-y-2 tw-items-start;}.global-file-uploader .upload-queue .queue-header .queue-actions{@apply tw-w-full tw-justify-end;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-p-3 tw-flex-col tw-space-y-3 tw-items-start;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info{@apply tw-w-full;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container{@apply tw-w-full tw-mx-0;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text{@apply tw-w-full tw-text-left;}.global-file-uploader .upload-queue .queue-items .upload-item .upload-actions{@apply tw-w-full tw-justify-end tw-ml-0;}}@media (prefers-color-scheme: dark){.global-file-uploader .upload-zone{@apply tw-border-gray-600 hover:tw-border-blue-400 hover:tw-bg-gray-800;}.global-file-uploader .upload-zone.drag-over{@apply tw-bg-blue-900;}.global-file-uploader .upload-zone .upload-zone-content .upload-icon{@apply tw-text-gray-500;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-gray-200;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-gray-400;}.global-file-uploader .upload-queue{@apply tw-bg-gray-800 tw-border-gray-700;}.global-file-uploader .upload-queue .queue-header{@apply tw-border-gray-700;}.global-file-uploader .upload-queue .queue-header .queue-title{@apply tw-text-gray-200;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-border-gray-700;}.global-file-uploader .upload-queue .queue-items .upload-item.status-pending{@apply tw-bg-yellow-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-uploading{@apply tw-bg-blue-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-completed{@apply tw-bg-green-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-error{@apply tw-bg-red-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-cancelled{@apply tw-bg-gray-700;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-name{@apply tw-text-gray-200;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-size{@apply tw-text-gray-400;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar{@apply tw-bg-gray-600;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-text{@apply tw-text-gray-300;}.global-file-uploader .upload-queue .queue-summary{@apply tw-bg-gray-700 tw-border-gray-600;}.global-file-uploader .upload-queue .queue-summary .summary-stats{@apply tw-text-gray-300;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat.error{@apply tw-text-red-400;}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { 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: CideEleGlobalFileUploaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cide-ele-global-file-uploader', standalone: true, imports: [
-                        CommonModule,
-                        CideEleButtonComponent,
-                        CideIconComponent
-                    ], template: "<!-- Global File Uploader Component -->\r\n<div class=\"global-file-uploader\">\r\n\r\n  <!-- Hidden file input -->\r\n  <input id=\"global-file-input\" type=\"file\" [multiple]=\"multiple\" [accept]=\"accept\" \r\n         (change)=\"onFileInputChange($event)\" style=\"display: none;\">\r\n\r\n  <!-- Drag and Drop Zone -->\r\n  <div class=\"upload-zone\" [class.drag-over]=\"isDragOver()\" (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\" (click)=\"triggerFileInput()\">\r\n\r\n    <div class=\"upload-zone-content\">\r\n      <cide-ele-icon name=\"cloud_upload\" class=\"upload-icon\" size=\"lg\">\r\n      </cide-ele-icon>\r\n\r\n      <h3 class=\"upload-title\">\r\n        {{ isDragOver() ? 'Drop files here' : 'Upload Files' }}\r\n      </h3>\r\n\r\n      <p class=\"upload-subtitle\">\r\n        {{ isDragOver() ? 'Release to upload' : 'Drag and drop files here or click to browse' }}\r\n      </p>\r\n\r\n      <button cideEleButton cideEleButton variant=\"outline\" size=\"sm\"\r\n        (click)=\"triggerFileInput(); $event.stopPropagation()\">\r\n        <cide-ele-icon name=\"add\" size=\"sm\"></cide-ele-icon>\r\n        Choose Files\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Upload Queue -->\r\n  @if (hasUploads()) {\r\n  <div class=\"upload-queue\">\r\n    <div class=\"queue-header\">\r\n      <h4 class=\"queue-title\">Upload Queue</h4>\r\n      <div class=\"queue-actions\">\r\n        @if (completedUploads().length > 0) {\r\n        <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"clearCompleted()\">\r\n          Clear Completed\r\n        </button>\r\n        }\r\n        <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"clearAll()\">\r\n          Clear All\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"queue-items\">\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=\"sm\">\r\n            {{getStatusIcon(upload.status)}}\r\n          </cide-ele-icon>\r\n\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ upload.fileName }}</div>\r\n            @if (upload.file) {\r\n            <div class=\"file-size\">{{ getFileSizeDisplay(upload.file) }}</div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar -->\r\n        @if (upload.status === 'uploading') {\r\n        <div class=\"progress-container\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\">\r\n            </div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Status Text -->\r\n        @if (upload.status !== 'uploading') {\r\n        <div class=\"status-text\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <span class=\"text-yellow-600\">Waiting...</span>\r\n          }\r\n          @case ('completed') {\r\n          <span class=\"text-green-600\">Uploaded successfully</span>\r\n          }\r\n          @case ('error') {\r\n          <span class=\"text-red-600\">{{ upload.error || 'Upload 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        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (upload.status) {\r\n          @case ('pending') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"cancelUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"cancel\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"cancelUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"cancel\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('completed') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"retryUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"refresh\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('cancelled') {\r\n          <button cideEleButton variant=\"text\" size=\"sm\" (click)=\"removeUpload(upload.fileId)\">\r\n            <cide-ele-icon name=\"close\" size=\"xs\"></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    <!-- Queue Summary -->\r\n    <div class=\"queue-summary\">\r\n      <div class=\"summary-stats\">\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"schedule\" size=\"xs\"></cide-ele-icon>\r\n          {{ pendingUploads().length }} pending\r\n        </span>\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"cloud_upload\" size=\"xs\"></cide-ele-icon>\r\n          {{ activeUploads().length }} uploading\r\n        </span>\r\n        <span class=\"stat\">\r\n          <cide-ele-icon name=\"check_circle\" size=\"xs\"></cide-ele-icon>\r\n          {{ completedUploads().length }} completed\r\n        </span>\r\n        @if (failedUploads().length > 0) {\r\n        <span class=\"stat error\">\r\n          <cide-ele-icon name=\"error\" size=\"xs\"></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</div>\r\n\r\n", styles: [".global-file-uploader{@apply tw-w-full tw-max-w-2xl tw-mx-auto tw-p-4;}.global-file-uploader .upload-zone{@apply tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-8 tw-text-center tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out;@apply hover:tw-border-blue-400 hover:tw-bg-blue-50;}.global-file-uploader .upload-zone.drag-over{@apply tw-border-blue-500 tw-bg-blue-100 tw-scale-105;}.global-file-uploader .upload-zone .upload-zone-content{@apply tw-space-y-4;}.global-file-uploader .upload-zone .upload-zone-content .upload-icon{@apply tw-text-gray-400 tw-mx-auto;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-xl tw-font-semibold tw-text-gray-700 tw-m-0;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-sm tw-text-gray-500 tw-m-0;}.global-file-uploader .upload-queue{@apply tw-mt-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm;}.global-file-uploader .upload-queue .queue-header{@apply tw-flex tw-justify-between tw-items-center tw-p-4 tw-border-b tw-border-gray-200;}.global-file-uploader .upload-queue .queue-header .queue-title{@apply tw-text-lg tw-font-medium tw-text-gray-700 tw-m-0;}.global-file-uploader .upload-queue .queue-header .queue-actions{@apply tw-flex tw-space-x-2;}.global-file-uploader .upload-queue .queue-items{@apply tw-max-h-96 tw-overflow-y-auto;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-flex tw-items-center tw-justify-between tw-p-4 tw-border-b tw-border-gray-100 tw-transition-colors tw-duration-200;}.global-file-uploader .upload-queue .queue-items .upload-item:last-child{@apply tw-border-b-0;}.global-file-uploader .upload-queue .queue-items .upload-item.status-pending{@apply tw-bg-yellow-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-uploading{@apply tw-bg-blue-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-completed{@apply tw-bg-green-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-error{@apply tw-bg-red-50;}.global-file-uploader .upload-queue .queue-items .upload-item.status-cancelled{@apply tw-bg-gray-50;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info{@apply tw-flex tw-items-center tw-flex-1 tw-min-w-0;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .status-icon{@apply tw-mr-3 tw-flex-shrink-0;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details{@apply tw-min-w-0 tw-flex-1;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-name{@apply tw-text-sm tw-font-medium tw-text-gray-700 tw-truncate;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-size{@apply tw-text-xs tw-text-gray-500 tw-mt-1;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container{@apply tw-flex tw-items-center tw-space-x-3 tw-flex-1 tw-max-w-xs tw-mx-4;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar{@apply tw-flex-1 tw-h-2 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar .progress-fill{@apply tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300 tw-ease-out;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-text{@apply tw-text-xs tw-font-medium tw-text-gray-600 tw-min-w-12 tw-text-right;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text{@apply tw-flex-1 tw-text-sm tw-text-center;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text span{@apply tw-font-medium;}.global-file-uploader .upload-queue .queue-items .upload-item .upload-actions{@apply tw-flex tw-space-x-1 tw-ml-4;}.global-file-uploader .upload-queue .queue-summary{@apply tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-200;}.global-file-uploader .upload-queue .queue-summary .summary-stats{@apply tw-flex tw-flex-wrap tw-gap-4 tw-text-sm tw-text-gray-600;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat{@apply tw-flex tw-items-center tw-space-x-1;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat.error{@apply tw-text-red-600;}@media (max-width: 640px){.global-file-uploader{@apply tw-p-2;}.global-file-uploader .upload-zone{@apply tw-p-6;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-lg;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-xs;}.global-file-uploader .upload-queue .queue-header{@apply tw-p-3 tw-flex-col tw-space-y-2 tw-items-start;}.global-file-uploader .upload-queue .queue-header .queue-actions{@apply tw-w-full tw-justify-end;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-p-3 tw-flex-col tw-space-y-3 tw-items-start;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info{@apply tw-w-full;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container{@apply tw-w-full tw-mx-0;}.global-file-uploader .upload-queue .queue-items .upload-item .status-text{@apply tw-w-full tw-text-left;}.global-file-uploader .upload-queue .queue-items .upload-item .upload-actions{@apply tw-w-full tw-justify-end tw-ml-0;}}@media (prefers-color-scheme: dark){.global-file-uploader .upload-zone{@apply tw-border-gray-600 hover:tw-border-blue-400 hover:tw-bg-gray-800;}.global-file-uploader .upload-zone.drag-over{@apply tw-bg-blue-900;}.global-file-uploader .upload-zone .upload-zone-content .upload-icon{@apply tw-text-gray-500;}.global-file-uploader .upload-zone .upload-zone-content .upload-title{@apply tw-text-gray-200;}.global-file-uploader .upload-zone .upload-zone-content .upload-subtitle{@apply tw-text-gray-400;}.global-file-uploader .upload-queue{@apply tw-bg-gray-800 tw-border-gray-700;}.global-file-uploader .upload-queue .queue-header{@apply tw-border-gray-700;}.global-file-uploader .upload-queue .queue-header .queue-title{@apply tw-text-gray-200;}.global-file-uploader .upload-queue .queue-items .upload-item{@apply tw-border-gray-700;}.global-file-uploader .upload-queue .queue-items .upload-item.status-pending{@apply tw-bg-yellow-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-uploading{@apply tw-bg-blue-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-completed{@apply tw-bg-green-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-error{@apply tw-bg-red-900;}.global-file-uploader .upload-queue .queue-items .upload-item.status-cancelled{@apply tw-bg-gray-700;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-name{@apply tw-text-gray-200;}.global-file-uploader .upload-queue .queue-items .upload-item .file-info .file-details .file-size{@apply tw-text-gray-400;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-bar{@apply tw-bg-gray-600;}.global-file-uploader .upload-queue .queue-items .upload-item .progress-container .progress-text{@apply tw-text-gray-300;}.global-file-uploader .upload-queue .queue-summary{@apply tw-bg-gray-700 tw-border-gray-600;}.global-file-uploader .upload-queue .queue-summary .summary-stats{@apply tw-text-gray-300;}.global-file-uploader .upload-queue .queue-summary .summary-stats .stat.error{@apply tw-text-red-400;}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userId: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }], allowedTypes: [{
-                type: Input
-            }], uploadComplete: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }], uploadCancelled: [{
-                type: Output
-            }], allUploadsComplete: [{
-                type: Output
-            }] } });
-
 class CideFloatingUploadTriggerDirective {
     elementRef = inject(ElementRef);
     floatingUploader = inject(CideEleFloatingFileUploaderComponent);
@@ -9484,5 +9277,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingFileUploaderComponent, CideEleGlobalFileUploaderComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFloatingUploadTriggerDirective, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
+export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingFileUploaderComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFloatingUploadTriggerDirective, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map