cloud-ide-element 1.0.81 → 1.0.82

package/fesm2022/cloud-ide-element.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, afterRenderEffect, afterNextRender, effect, Directive, ElementRef, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, effect, afterRenderEffect, afterNextRender, ElementRef, Directive, viewChild } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, takeUntil, distinctUntilChanged, Observable, retry, catchError, finalize, throwError } from 'rxjs';
@@ -3148,1682 +3148,1848 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class CideEleFileInputComponent {
-    fileManagerService = inject(CideEleFileManagerService);
-    notificationService = inject(NotificationService);
-    elementService = inject(CideElementsService);
-    destroyRef = inject(DestroyRef);
-    // private readonly pendingTasks = inject(PendingTasks); // TODO: Fix PendingTasks API usage
-    // Traditional @Input() decorators
-    label = 'Choose file';
-    accept = '';
-    multiple = false;
-    disabled = false;
-    required = false;
-    helperText = '';
-    errorText = '';
-    showPreview = false;
-    previewWidth = '200px';
-    previewHeight = '200px';
-    previewBoxMode = false;
-    showFileName = true;
-    placeholderText = 'Click to select image';
-    placeholderIcon = '📷';
-    autoUpload = false;
-    uploadData = {};
-    // Traditional @Output() decorators
-    fileChange = new EventEmitter();
-    uploadSuccess = new EventEmitter();
-    uploadError = new EventEmitter();
-    uploadProgressChange = new EventEmitter();
-    // Readable signals created from @Input() decorator values
-    labelSignal = signal(this.label, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
-    acceptSignal = signal(this.accept, ...(ngDevMode ? [{ debugName: "acceptSignal" }] : []));
-    multipleSignal = signal(this.multiple, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : []));
-    disabledSignal = signal(this.disabled, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : []));
-    requiredSignal = signal(this.required, ...(ngDevMode ? [{ debugName: "requiredSignal" }] : []));
-    helperTextSignal = signal(this.helperText, ...(ngDevMode ? [{ debugName: "helperTextSignal" }] : []));
-    errorTextSignal = signal(this.errorText, ...(ngDevMode ? [{ debugName: "errorTextSignal" }] : []));
-    showPreviewSignal = signal(this.showPreview, ...(ngDevMode ? [{ debugName: "showPreviewSignal" }] : []));
-    previewWidthSignal = signal(this.previewWidth, ...(ngDevMode ? [{ debugName: "previewWidthSignal" }] : []));
-    previewHeightSignal = signal(this.previewHeight, ...(ngDevMode ? [{ debugName: "previewHeightSignal" }] : []));
-    previewBoxModeSignal = signal(this.previewBoxMode, ...(ngDevMode ? [{ debugName: "previewBoxModeSignal" }] : []));
-    showFileNameSignal = signal(this.showFileName, ...(ngDevMode ? [{ debugName: "showFileNameSignal" }] : []));
-    placeholderTextSignal = signal(this.placeholderText, ...(ngDevMode ? [{ debugName: "placeholderTextSignal" }] : []));
-    placeholderIconSignal = signal(this.placeholderIcon, ...(ngDevMode ? [{ debugName: "placeholderIconSignal" }] : []));
-    autoUploadSignal = signal(this.autoUpload, ...(ngDevMode ? [{ debugName: "autoUploadSignal" }] : []));
-    uploadDataSignal = signal(this.uploadData, ...(ngDevMode ? [{ debugName: "uploadDataSignal" }] : []));
-    // Reactive state with signals
-    id = signal(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
-    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
-    uploadStatus = signal('idle', ...(ngDevMode ? [{ debugName: "uploadStatus" }] : []));
-    files = signal(null, ...(ngDevMode ? [{ debugName: "files" }] : []));
-    fileNames = signal([], ...(ngDevMode ? [{ debugName: "fileNames" }] : []));
-    previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
-    uploadNotificationId = signal(null, ...(ngDevMode ? [{ debugName: "uploadNotificationId" }] : []));
-    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    groupId = signal(null, ...(ngDevMode ? [{ debugName: "groupId" }] : [])); // Group ID for multiple file uploads
-    isMultipleUploadMode = signal(false, ...(ngDevMode ? [{ debugName: "isMultipleUploadMode" }] : [])); // Flag to track if we're in multiple upload mode
-    // Computed signals for better relationships
-    hasFiles = computed(() => this.files() !== null && this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
-    canUpload = computed(() => this.hasFiles() && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canUpload" }] : []));
-    isInErrorState = computed(() => this.uploadStatus() === 'error', ...(ngDevMode ? [{ debugName: "isInErrorState" }] : []));
-    isInSuccessState = computed(() => this.uploadStatus() === 'success', ...(ngDevMode ? [{ debugName: "isInSuccessState" }] : []));
-    // Angular 20: Computed values using new features
-    totalFileSize = computed(() => {
-        if (!this.files())
-            return 0;
-        return Array.from(this.files()).reduce((total, file) => total + file.size, 0);
-    }, ...(ngDevMode ? [{ debugName: "totalFileSize" }] : []));
-    fileSizeInMB = computed(() => {
-        // Angular 20: Using ** operator for exponentiation
-        return (this.totalFileSize() / (1024 ** 2)).toFixed(2);
-    }, ...(ngDevMode ? [{ debugName: "fileSizeInMB" }] : []));
-    uploadProgressPercentage = computed(() => {
-        // Angular 20: Using ** operator for exponentiation
-        return Math.round(this.uploadProgress() ** 1); // Simple power operation
-    }, ...(ngDevMode ? [{ debugName: "uploadProgressPercentage" }] : []));
-    // ControlValueAccessor callbacks
-    onChange = (value) => { };
-    onTouched = () => { };
-    onValidatorChange = () => { };
-    // Computed values
-    hasImages = computed(() => this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "hasImages" }] : []));
-    isPreviewBoxMode = computed(() => this.previewBoxModeSignal() && this.showPreviewSignal(), ...(ngDevMode ? [{ debugName: "isPreviewBoxMode" }] : []));
-    isImagePreviewAvailable = computed(() => this.showPreviewSignal() && this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "isImagePreviewAvailable" }] : []));
-    constructor() {
-        // Angular 20: afterRenderEffect for DOM operations
-        afterRenderEffect(() => {
-            // Update file input element when files change
-            if (this.files()) {
-                const fileInput = document.getElementById('cide-file-input-' + this.id());
-                if (fileInput) {
-                    // Ensure the input reflects the current state
-                    fileInput.files = this.files();
-                }
-            }
-        });
-        // Angular 20: afterNextRender for one-time DOM operations
-        afterNextRender(() => {
-            console.log('🎯 [FileInput] Component rendered and DOM is ready');
-        });
-    }
-    ngOnInit() {
-        // Update signals with initial @Input() values
-        this.labelSignal.set(this.label);
-        this.acceptSignal.set(this.accept);
-        this.multipleSignal.set(this.multiple);
-        this.disabledSignal.set(this.disabled);
-        this.requiredSignal.set(this.required);
-        this.helperTextSignal.set(this.helperText);
-        this.errorTextSignal.set(this.errorText);
-        this.showPreviewSignal.set(this.showPreview);
-        this.previewWidthSignal.set(this.previewWidth);
-        this.previewHeightSignal.set(this.previewHeight);
-        this.previewBoxModeSignal.set(this.previewBoxMode);
-        this.showFileNameSignal.set(this.showFileName);
-        this.placeholderTextSignal.set(this.placeholderText);
-        this.placeholderIconSignal.set(this.placeholderIcon);
-        this.autoUploadSignal.set(this.autoUpload);
-        this.uploadDataSignal.set(this.uploadData);
-    }
-    ngOnChanges(changes) {
-        // Angular 20: Update signals when @Input() values change
-        if (changes['label'])
-            this.labelSignal.set(this.label);
-        if (changes['accept'])
-            this.acceptSignal.set(this.accept);
-        if (changes['multiple'])
-            this.multipleSignal.set(this.multiple);
-        if (changes['disabled'])
-            this.disabledSignal.set(this.disabled);
-        if (changes['required'])
-            this.requiredSignal.set(this.required);
-        if (changes['helperText'])
-            this.helperTextSignal.set(this.helperText);
-        if (changes['errorText'])
-            this.errorTextSignal.set(this.errorText);
-        if (changes['showPreview'])
-            this.showPreviewSignal.set(this.showPreview);
-        if (changes['previewWidth'])
-            this.previewWidthSignal.set(this.previewWidth);
-        if (changes['previewHeight'])
-            this.previewHeightSignal.set(this.previewHeight);
-        if (changes['previewBoxMode'])
-            this.previewBoxModeSignal.set(this.previewBoxMode);
-        if (changes['showFileName'])
-            this.showFileNameSignal.set(this.showFileName);
-        if (changes['placeholderText'])
-            this.placeholderTextSignal.set(this.placeholderText);
-        if (changes['placeholderIcon'])
-            this.placeholderIconSignal.set(this.placeholderIcon);
-        if (changes['autoUpload'])
-            this.autoUploadSignal.set(this.autoUpload);
-        if (changes['uploadData'])
-            this.uploadDataSignal.set(this.uploadData);
-    }
-    writeValue(value) {
-        console.log('📝 [FileInput] writeValue called with:', value);
-        if (typeof value === 'string') {
-            // Value is an uploaded file ID - fetch file details and set preview
-            console.log('📝 [FileInput] Value is uploaded file ID:', value);
-            this.files.set(null);
-            this.fileNames.set([]);
-            this.clearPreviews();
-            // Fetch file details to get base64 and set preview
-            this.loadFileDetailsFromId(value);
-        }
-        else if (value instanceof FileList) {
-            // Value is a FileList
-            console.log('📝 [FileInput] Value is FileList:', Array.from(value).map(f => f.name));
-            this.files.set(value);
-            this.fileNames.set(Array.from(value).map(f => f.name));
-            this.generatePreviews();
-        }
-        else {
-            // Value is null
-            console.log('📝 [FileInput] Value is null');
-            this.files.set(null);
-            this.fileNames.set([]);
-            this.clearPreviews();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
-    }
-    setDisabledState(isDisabled) {
-        // Note: With input signals, disabled state is controlled by the parent component
-        // This method is kept for ControlValueAccessor compatibility but doesn't modify the signal
-        console.log('🔧 [FileInput] setDisabledState called with:', isDisabled, '(controlled by parent component)');
-    }
-    onFileSelected(event) {
-        console.log('🔍 [FileInput] onFileSelected called');
-        const input = event.target;
-        const selectedFiles = input.files;
-        this.files.set(selectedFiles);
-        this.fileNames.set(selectedFiles ? Array.from(selectedFiles).map(f => f.name) : []);
-        console.log('📁 [FileInput] Files selected:', this.fileNames());
-        this.generatePreviews();
-        // Reset upload status when new file is selected
-        this.uploadStatus.set('idle');
-        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
-        this.onChange(selectedFiles);
-        this.fileChange.emit(selectedFiles);
-        this.onTouched();
-        // Auto upload if enabled
-        if (this.autoUploadSignal() && selectedFiles && selectedFiles.length > 0) {
-            if (this.multipleSignal()) {
-                console.log('🚀 [FileInput] Auto upload enabled for multiple files mode:', selectedFiles.length, 'files');
-                this.uploadMultipleFiles(Array.from(selectedFiles));
-            }
-            else {
-                console.log('🚀 [FileInput] Auto upload enabled for single file mode:', selectedFiles[0].name);
-                this.uploadFile(selectedFiles[0]);
-            }
-        }
-        else {
-            console.log('⏸️ [FileInput] Auto upload disabled or no files');
-        }
-    }
-    clearFiles() {
-        console.log('🗑️ [FileInput] clearFiles called');
-        this.files.set(null);
-        this.fileNames.set([]);
-        this.clearPreviews();
-        this.uploadStatus.set('idle');
-        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
-        this.onChange(null);
-        this.fileChange.emit(null);
-    }
-    uploadFile(file) {
-        console.log('📤 [FileInput] uploadFile called for:', file.name, 'Size:', file.size, 'bytes');
-        // Angular 20: Use PendingTasks for better loading state management
-        // const uploadTask = this.pendingTasks.add(); // TODO: Fix PendingTasks API usage
-        // console.log('⏳ [FileInput] Pending task added for upload tracking');
-        // Set upload status to 'start' before starting upload
-        this.uploadStatus.set('start');
-        console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
-        this.isUploading.set(true);
-        this.uploadProgress.set(0);
-        this.uploadProgressChange.emit(0);
-        console.log('📊 [FileInput] Upload progress initialized to 0%');
-        // Make form control invalid during upload - this prevents form submission
-        this.onChange(null);
-        console.log('🚫 [FileInput] Form control value set to null to prevent submission');
-        // Show initial progress notification with spinner (persistent - no auto-dismiss)
-        const notificationId = this.notificationService.showProgress('🔄 Preparing file upload...', 0, { duration: 0 });
-        this.uploadNotificationId.set(notificationId);
-        console.log('🔔 [FileInput] Progress notification started with ID:', notificationId);
-        this.fileManagerService.uploadFile(file, this.uploadDataSignal(), (progress) => {
-            // Real progress callback from file manager service
-            this.uploadProgress.set(progress);
-            this.uploadProgressChange.emit(progress);
-            console.log('📈 [FileInput] Upload progress:', Math.round(progress) + '%');
-            // Set upload status to 'uploading' when progress starts
-            if (this.uploadStatus() === 'start') {
-                this.uploadStatus.set('uploading');
-                console.log('🔄 [FileInput] Upload status changed to:', this.uploadStatus());
-            }
-            // Update progress notification with spinner
-            const notificationId = this.uploadNotificationId();
-            if (notificationId) {
-                let progressMessage = '';
-                if (progress < 10) {
-                    progressMessage = '🔄 Starting upload...';
-                }
-                else if (progress < 25) {
-                    progressMessage = '🔄 Uploading file...';
-                }
-                else if (progress < 50) {
-                    progressMessage = '🔄 Upload in progress...';
-                }
-                else if (progress < 75) {
-                    progressMessage = '🔄 Almost done...';
-                }
-                else if (progress < 95) {
-                    progressMessage = '🔄 Finishing upload...';
-                }
-                else {
-                    progressMessage = '🔄 Finalizing...';
-                }
-                this.notificationService.updateProgress(notificationId, progress, progressMessage);
-            }
-        }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-            next: (response) => {
-                console.log('🎉 [FileInput] Upload SUCCESS - Response received:', response);
-                // Angular 20: Complete the pending task
-                // this.pendingTasks.complete(uploadTask); // TODO: Fix PendingTasks API usage
-                // console.log('✅ [FileInput] Pending task completed for successful upload');
-                // Set upload status to 'success'
-                this.uploadStatus.set('success');
-                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
-                // Complete the progress
-                this.uploadProgress.set(100);
-                this.uploadProgressChange.emit(100);
-                console.log('📊 [FileInput] Upload progress completed: 100%');
-                // Update progress notification to complete
-                const notificationId = this.uploadNotificationId();
-                if (notificationId) {
-                    this.notificationService.remove(notificationId);
-                    console.log('🔔 [FileInput] Progress notification removed');
-                }
-                this.notificationService.success('✅ File uploaded successfully!', { duration: 0 });
-                this.uploadNotificationId.set(null);
-                // Extract ID from CoreFileManagerInsertUpdateResponse
-                const uploadedId = response?.data?.core_file_manager?.[0]?.cyfm_id;
-                if (uploadedId) {
-                    console.log('✅ [FileInput] File uploaded successfully with ID:', uploadedId);
-                    // Set the uploaded ID as the form control value
-                    this.onChange(uploadedId);
-                    console.log('📝 [FileInput] Form control value set to uploaded ID:', uploadedId);
-                    // Only emit individual uploadSuccess if not in multiple upload mode
-                    if (!this.isMultipleUploadMode()) {
-                        this.uploadSuccess.emit(uploadedId);
-                        console.log('📝 [FileInput] Upload success event emitted with file ID:', uploadedId);
-                    }
-                    else {
-                        console.log('📝 [FileInput] Individual upload success suppressed (multiple upload mode) - file ID:', uploadedId);
-                    }
-                }
-                else {
-                    console.error('❌ [FileInput] Upload successful but no ID returned:', response);
-                    this.uploadError.emit('Upload successful but no ID returned');
-                }
-                this.isUploading.set(false);
-                console.log('🔄 [FileInput] isUploading set to false');
-            },
-            error: (error) => {
-                console.error('💥 [FileInput] Upload FAILED:', error);
-                // Angular 20: Complete the pending task even on error
-                // this.pendingTasks.complete(uploadTask); // TODO: Fix PendingTasks API usage
-                // console.log('❌ [FileInput] Pending task completed for failed upload');
-                // Set upload status to 'error' and remove upload validation error
-                this.uploadStatus.set('error');
-                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
-                // Remove progress notification and show error
-                const notificationId = this.uploadNotificationId();
-                if (notificationId) {
-                    this.notificationService.remove(notificationId);
-                    console.log('🔔 [FileInput] Progress notification removed due to error');
-                }
-                this.notificationService.error(`❌ File upload failed: ${error.message || error.error?.message || 'Unknown error occurred'}`, { duration: 0 });
-                this.uploadNotificationId.set(null);
-                this.uploadError.emit(error.message || error.error?.message || 'Upload failed');
-                this.isUploading.set(false);
-                this.uploadProgress.set(0);
-                this.uploadProgressChange.emit(0);
-                console.log('🔄 [FileInput] Upload state reset - isUploading: false, progress: 0%');
-            }
-        });
-    }
-    /**
-     * Upload multiple files with group ID support
-     * FLOW: 1) Generate group ID first, 2) Upload all files with same group ID, 3) Emit group ID on completion
-     */
-    uploadMultipleFiles(files) {
-        console.log('📤 [FileInput] uploadMultipleFiles called for:', files.length, 'files');
-        console.log('🔄 [FileInput] STEP 1: Generate group ID before starting any file uploads');
-        // Set multiple upload mode flag
-        this.isMultipleUploadMode.set(true);
-        // Set upload status to 'start' before starting upload
-        this.uploadStatus.set('start');
-        this.isUploading.set(true);
-        this.uploadProgress.set(0);
-        this.uploadProgressChange.emit(0);
-        // Make form control invalid during upload
-        this.onChange(null);
-        // Show initial progress notification
-        const notificationId = this.notificationService.showProgress('🔄 Preparing multiple file upload...', 0, { duration: 0 });
-        this.uploadNotificationId.set(notificationId);
-        // STEP 1: Generate or get group ID BEFORE starting any file uploads
-        const existingGroupId = this.uploadDataSignal().groupId;
-        if (existingGroupId) {
-            console.log('🆔 [FileInput] STEP 1 COMPLETE: Using existing group ID:', existingGroupId);
-            console.log('🔄 [FileInput] STEP 2: Starting file uploads with group ID:', existingGroupId);
-            this.groupId.set(existingGroupId);
-            this.startMulti(files, existingGroupId);
-        }
-        else {
-            console.log('🆔 [FileInput] No existing group ID, generating new one...');
-            // Generate group ID BEFORE starting any file uploads
-            this.fileManagerService.generateObjectId().subscribe({
-                next: (response) => {
-                    const newGroupId = response.data?.objectId;
-                    console.log('🆔 [FileInput] STEP 1 COMPLETE: Generated new group ID:', newGroupId);
-                    console.log('🔄 [FileInput] STEP 2: Starting file uploads with group ID:', newGroupId);
-                    this.groupId.set(newGroupId);
-                    this.startMulti(files, newGroupId);
-                },
-                error: (error) => {
-                    console.error('❌ [FileInput] Failed to generate group ID:', error);
-                    this.uploadError.emit('Failed to generate group ID');
-                    this.isUploading.set(false);
-                    this.uploadStatus.set('error');
-                    const notificationId = this.uploadNotificationId();
-                    if (notificationId) {
-                        this.notificationService.remove(notificationId);
-                    }
-                    this.notificationService.error('❌ Failed to generate group ID for multiple file upload', { duration: 0 });
-                    this.uploadNotificationId.set(null);
-                }
-            });
-        }
-    }
-    /**
-     * Start uploading multiple files with the provided group ID
-     * All files will be uploaded with the SAME group ID that was generated before this method
-     */
-    startMulti(files, groupId) {
-        console.log('🚀 [FileInput] STEP 2: Starting upload for', files.length, 'files with group ID:', groupId);
-        console.log('📋 [FileInput] All files will use the same group ID:', groupId);
-        let completedUploads = 0;
-        let failedUploads = 0;
-        const totalFiles = files.length;
-        // IMPORTANT: All files use the SAME group ID that was generated before starting uploads
-        const uploadDataWithGroupId = {
-            ...this.uploadDataSignal(),
-            groupId: groupId
-        };
-        files.forEach((file, index) => {
-            console.log(`📤 [FileInput] Uploading file ${index + 1}/${totalFiles}: "${file.name}" with group ID: ${groupId}`);
-            this.fileManagerService.uploadFile(file, uploadDataWithGroupId, (progress) => {
-                // Calculate overall progress
-                const fileProgress = progress / totalFiles;
-                const overallProgress = ((completedUploads * 100) + fileProgress) / totalFiles;
-                this.uploadProgress.set(overallProgress);
-                this.uploadProgressChange.emit(overallProgress);
-                // Update progress notification
-                const notificationId = this.uploadNotificationId();
-                if (notificationId) {
-                    const progressMessage = `🔄 Uploading file ${index + 1} of ${totalFiles}...`;
-                    this.notificationService.updateProgress(notificationId, overallProgress, progressMessage);
-                }
-            }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-                next: (response) => {
-                    completedUploads++;
-                    console.log(`✅ [FileInput] File ${index + 1}/${totalFiles} uploaded successfully`);
-                    // Check if all files are completed
-                    if (completedUploads + failedUploads === totalFiles) {
-                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
-                    }
-                },
-                error: (error) => {
-                    failedUploads++;
-                    console.error(`❌ [FileInput] File ${index + 1}/${totalFiles} upload failed:`, error);
-                    // Check if all files are completed
-                    if (completedUploads + failedUploads === totalFiles) {
-                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
-                    }
-                }
-            });
-        });
-    }
-    /**
-     * Handle completion of multiple file upload
-     */
-    handleMultipleUploadComplete(completed, failed, total, groupId) {
-        console.log(`📊 [FileInput] Multiple upload complete: ${completed}/${total} successful, ${failed} failed`);
-        this.isUploading.set(false);
-        this.uploadProgress.set(100);
-        this.uploadProgressChange.emit(100);
-        // Remove progress notification
-        const notificationId = this.uploadNotificationId();
-        if (notificationId) {
-            this.notificationService.remove(notificationId);
-        }
-        this.uploadNotificationId.set(null);
-        if (failed === 0) {
-            // All files uploaded successfully
-            this.uploadStatus.set('success');
-            this.notificationService.success(`✅ All ${total} files uploaded successfully!`, { duration: 0 });
-            // STEP 3: For multiple file upload, emit the group ID (not individual file IDs)
-            this.onChange(groupId);
-            this.uploadSuccess.emit(groupId);
-            console.log('📝 [FileInput] STEP 3 COMPLETE: Form control value set to group ID:', groupId);
-            console.log('✅ [FileInput] Multiple upload SUCCESS - Group ID emitted:', groupId);
-        }
-        else if (completed > 0) {
-            // Some files uploaded successfully
-            this.uploadStatus.set('error');
-            this.notificationService.warning(`⚠️ ${completed}/${total} files uploaded. ${failed} failed.`, { duration: 0 });
-            this.uploadError.emit(`${failed} out of ${total} files failed to upload`);
-        }
-        else {
-            // All files failed
-            this.uploadStatus.set('error');
-            this.notificationService.error(`❌ All ${total} files failed to upload.`, { duration: 0 });
-            this.uploadError.emit('All files failed to upload');
-        }
-        // Reset multiple upload mode flag
-        this.isMultipleUploadMode.set(false);
-    }
-    generatePreviews() {
-        // Clear existing previews
-        this.clearPreviews();
-        if (!this.showPreviewSignal() || !this.files()) {
-            return;
-        }
-        Array.from(this.files()).forEach(file => {
-            if (this.isImageFile(file)) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    if (e.target?.result) {
-                        this.previewUrls.update(urls => [...urls, e.target.result]);
-                    }
-                };
-                reader.readAsDataURL(file);
-            }
-        });
-    }
-    clearPreviews() {
-        // Revoke object URLs to prevent memory leaks
-        this.previewUrls().forEach(url => {
-            if (url.startsWith('blob:')) {
-                URL.revokeObjectURL(url);
-            }
-        });
-        this.previewUrls.set([]);
-    }
-    isImageFile(file) {
-        return file.type.startsWith('image/');
-    }
-    loadFileDetailsFromId(fileId) {
-        console.log('🔍 [FileInput] Loading file details for ID:', fileId);
-        if (!fileId)
-            return;
-        this.fileManagerService?.getFileDetails({ cyfm_id: fileId })?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-            next: (fileDetails) => {
-                console.log('📋 [FileInput] File details received:', fileDetails);
-                if (fileDetails?.data?.length) {
-                    const fileData = fileDetails.data[0];
-                    console.log('📁 [FileInput] File data:', fileData);
-                    // Set file name from the details
-                    if (fileData.cyfm_name) {
-                        this.fileNames.set([fileData.cyfm_name]);
-                        console.log('📝 [FileInput] File name set:', fileData.cyfm_name);
-                    }
-                    // If it's an image and we have base64 data, set preview
-                    if (this.showPreviewSignal() && fileData.cyfm_file_base64) {
-                        // Check if it's an image file based on file name or type
-                        const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
-                            this.isImageFileFromType(fileData.cyfm_type || '');
-                        if (isImage) {
-                            // Add data URL prefix if not already present
-                            let base64Data = fileData.cyfm_file_base64;
-                            if (!base64Data.startsWith('data:')) {
-                                const mimeType = fileData.cyfm_type || 'image/jpeg';
-                                base64Data = `data:${mimeType};base64,${base64Data}`;
-                            }
-                            this.previewUrls.set([base64Data]);
-                            console.log('🖼️ [FileInput] Preview set from base64 data');
-                        }
-                    }
-                }
-                else {
-                    console.warn('⚠️ [FileInput] No file data found for ID:', fileId);
-                }
-            },
-            error: (error) => {
-                console.error('❌ [FileInput] Error loading file details:', error);
-                this.notificationService.error(`Failed to load file details: ${error.message || 'Unknown error'}`, { duration: 0 });
-            }
-        });
-    }
-    isImageFileFromName(fileName) {
-        if (!fileName)
-            return false;
-        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
-        const lowerFileName = fileName.toLowerCase();
-        return imageExtensions.some(ext => lowerFileName.endsWith(ext));
-    }
-    isImageFileFromType(fileType) {
-        if (!fileType)
-            return false;
-        return fileType.startsWith('image/');
-    }
-    removePreview(index) {
-        const currentFiles = this.files();
-        const currentUrls = this.previewUrls();
-        if (currentFiles && currentFiles.length > index) {
-            // Handle FileList case - remove file from FileList
-            const dt = new DataTransfer();
-            Array.from(currentFiles).forEach((file, i) => {
-                if (i !== index) {
-                    dt.items.add(file);
-                }
-            });
-            const newFiles = dt.files;
-            this.files.set(newFiles);
-            this.fileNames.set(Array.from(newFiles).map(f => f.name));
-            // Remove the preview URL
-            if (currentUrls[index] && currentUrls[index].startsWith('blob:')) {
-                URL.revokeObjectURL(currentUrls[index]);
-            }
-            this.previewUrls.update(urls => urls.filter((_, i) => i !== index));
-            this.onChange(newFiles);
-            this.fileChange.emit(newFiles);
-        }
-        else if (currentUrls.length > index) {
-            // Handle uploaded file ID case - clear the preview and set control value to null
-            console.log('🗑️ [FileInput] Removing preview for uploaded file ID');
-            // Clear preview
-            this.previewUrls.update(urls => urls.filter((_, i) => i !== index));
-            this.fileNames.set([]);
-            // Set control value to null since we're removing the uploaded file
-            this.onChange(null);
-            this.fileChange.emit(null);
-        }
-    }
-    ngOnDestroy() {
-        // Clean up preview URLs to prevent memory leaks
-        this.clearPreviews();
-        // Clean up any active upload notification
-        const notificationId = this.uploadNotificationId();
-        if (notificationId) {
-            this.notificationService.remove(notificationId);
-            this.uploadNotificationId.set(null);
-        }
-    }
-    triggerFileSelect() {
-        const fileInput = document.getElementById('cide-file-input-' + this.id());
-        if (fileInput && !this.disabledSignal()) {
-            fileInput.click();
-        }
-    }
-    // Drag and Drop Event Handlers
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.disabledSignal()) {
-            this.isDragOver.set(true);
-            console.log('🔄 [FileInput] Drag over detected');
-        }
-    }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        console.log('🔄 [FileInput] Drag leave detected');
-    }
-    onDragEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.disabledSignal()) {
-            this.isDragOver.set(true);
-            console.log('🔄 [FileInput] Drag enter detected');
-        }
-    }
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        if (this.disabledSignal()) {
-            console.log('⏸️ [FileInput] Drop ignored - component is disabled');
-            return;
-        }
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            console.log('📁 [FileInput] Files dropped:', Array.from(files).map(f => f.name));
-            // Validate file types if accept is specified
-            if (this.acceptSignal() && !this.validateFileTypes(files)) {
-                console.log('❌ [FileInput] Invalid file types dropped');
-                this.notificationService.error('❌ Invalid file type. Please select files of the correct type.', { duration: 0 });
-                return;
-            }
-            // Handle single vs multiple files
-            if (!this.multipleSignal() && files.length > 1) {
-                console.log('⚠️ [FileInput] Multiple files dropped but multiple is disabled');
-                this.notificationService.warning('⚠️ Only one file is allowed. Using the first file.', { duration: 0 });
-                // Create a new FileList with only the first file
-                const dt = new DataTransfer();
-                dt.items.add(files[0]);
-                this.handleFileSelection(dt.files);
-            }
-            else {
-                this.handleFileSelection(files);
-            }
-        }
-    }
-    validateFileTypes(files) {
-        const acceptTypes = this.acceptSignal().split(',').map(type => type.trim());
-        if (acceptTypes.length === 0 || acceptTypes[0] === '')
-            return true;
-        return Array.from(files).every(file => {
-            return acceptTypes.some(acceptType => {
-                if (acceptType.startsWith('.')) {
-                    // Extension-based validation
-                    return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
-                }
-                else if (acceptType.includes('/')) {
-                    // MIME type validation
-                    return file.type === acceptType || file.type.startsWith(acceptType.replace('*', ''));
-                }
-                return false;
-            });
-        });
-    }
-    handleFileSelection(files) {
-        this.files.set(files);
-        this.fileNames.set(Array.from(files).map(f => f.name));
-        console.log('📁 [FileInput] Files selected via drag & drop:', this.fileNames());
-        this.generatePreviews();
-        // Reset upload status when new file is selected
-        this.uploadStatus.set('idle');
-        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
-        this.onChange(files);
-        this.fileChange.emit(files);
-        this.onTouched();
-        // Auto upload if enabled
-        if (this.autoUploadSignal() && files.length > 0) {
-            if (this.multipleSignal()) {
-                console.log('🚀 [FileInput] Auto upload enabled for multiple files mode (drag & drop):', files.length, 'files');
-                this.uploadMultipleFiles(Array.from(files));
-            }
-            else {
-                console.log('🚀 [FileInput] Auto upload enabled for single file mode (drag & drop):', files[0].name);
-                this.uploadFile(files[0]);
-            }
-        }
-        else {
-            console.log('⏸️ [FileInput] Auto upload disabled or no files');
-        }
-    }
-    isRequired() {
-        return this.requiredSignal();
-    }
-    /**
-     * Angular 20: Utility method to get upload data with proper typing
-     * @returns Properly typed upload data
-     */
-    getUploadData() {
-        return this.uploadDataSignal();
-    }
-    /**
-     * Angular 20: Utility method to update upload data with type safety
-     * @param data Partial upload data to merge with existing data
-     */
-    updateUploadData(data) {
-        const currentData = this.uploadDataSignal();
-        const updatedData = { ...currentData, ...data };
-        // Note: This would require the uploadData to be a writable signal
-        // For now, this method serves as a type-safe way to work with upload data
-        console.log('📝 [FileInput] Upload data updated:', updatedData);
-    }
-    getCurrentState() {
-        return {
-            id: this.id(),
-            label: this.labelSignal(),
-            required: this.requiredSignal(),
-            disabled: this.disabledSignal(),
-            accept: this.acceptSignal(),
-            multiple: this.multipleSignal(),
-            showPreview: this.showPreviewSignal(),
-            autoUpload: this.autoUploadSignal(),
-            uploadStatus: this.uploadStatus(),
-            isUploading: this.isUploading(),
-            uploadProgress: this.uploadProgress(),
-            files: this.files() ? Array.from(this.files()).map(f => ({ name: f.name, size: f.size, type: f.type })) : null,
-            fileNames: this.fileNames(),
-            previewUrls: this.previewUrls().length,
-            helperText: this.helperTextSignal(),
-            errorText: this.errorTextSignal(),
-            placeholderText: this.placeholderTextSignal(),
-            placeholderIcon: this.placeholderIconSignal(),
-            previewWidth: this.previewWidthSignal(),
-            previewHeight: this.previewHeightSignal(),
-            previewBoxMode: this.previewBoxModeSignal(),
-            showFileName: this.showFileNameSignal(),
-            uploadData: this.uploadDataSignal()
-        };
-    }
-    async getControlData() {
-        console.log('🔍 [FileInput] getControlData called');
-        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id() });
-        if (cide_element_data) {
-            console.log('📋 [FileInput] Element data loaded:', cide_element_data);
-            // Note: Since we're using input signals, we can't directly set their values
-            // This method would need to be refactored to work with the new signal-based approach
-            // For now, we'll log the data and trigger validation
-            console.log('✅ [FileInput] Control data received from element service');
-            console.log('⚠️ [FileInput] Note: Input signals cannot be modified after component initialization');
-            // Trigger validation update
-            this.onValidatorChange();
-        }
-        else {
-            console.log('⚠️ [FileInput] No element data found for key:', this.id());
-        }
-    }
-    // Validator implementation
-    validate(control) {
-        console.log('🔍 [FileInput] validate() called - uploadStatus:', this.uploadStatus(), 'required:', this.requiredSignal(), 'files:', !!this.files(), 'control.value:', control.value);
-        // If upload is in progress (start or uploading status), return validation error
-        if (this.uploadStatus() === 'start' || this.uploadStatus() === 'uploading') {
-            console.log('⚠️ [FileInput] Validation ERROR: Upload in progress');
-            return { 'uploadInProgress': { message: 'File upload in progress. Please wait...' } };
-        }
-        // If required and no file is selected and no control value (uploaded file ID), return validation error
-        if (this.requiredSignal() && !this.files() && !control.value) {
-            console.log('⚠️ [FileInput] Validation ERROR: File required');
-            return { 'required': { message: 'Please select a file to upload.' } };
-        }
-        console.log('✅ [FileInput] Validation PASSED: No errors');
-        return null; // No validation errors
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", required: "required", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: CideEleFileInputComponent,
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                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        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\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  @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-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}}\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,
-            args: [{ selector: 'cide-ele-file-input', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: CideEleFileInputComponent,
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            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        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\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  @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-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}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], errorText: [{
-                type: Input
-            }], showPreview: [{
-                type: Input
-            }], previewWidth: [{
-                type: Input
-            }], previewHeight: [{
-                type: Input
-            }], previewBoxMode: [{
-                type: Input
-            }], showFileName: [{
-                type: Input
-            }], placeholderText: [{
-                type: Input
-            }], placeholderIcon: [{
-                type: Input
-            }], autoUpload: [{
-                type: Input
-            }], uploadData: [{
-                type: Input
-            }], fileChange: [{
-                type: Output
-            }], uploadSuccess: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }], uploadProgressChange: [{
-                type: Output
-            }] } });
-
-class CideEleGlobalFileUploaderComponent {
-    // Dependency injection
+class CideEleFloatingFileUploaderComponent {
     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" }] : []));
+    fileManagerService = inject(CideEleFileManagerService);
+    // Signals for reactive state
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
-    // Computed values
+    // Use file manager service's upload queue as the single source of truth
+    uploadQueue = computed(() => this.fileManagerService.uploadQueue(), ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
+    activeUploads = computed(() => this.fileManagerService.activeUploads(), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
+    // Computed values based on file manager service state
     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" }] : []));
+    pendingUploads = computed(() => this.uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "pendingUploads" }] : [])); // All files in queue are pending
+    completedUploads = computed(() => {
+        const active = this.activeUploads();
+        return Array.from(active.values()).filter(upload => upload.stage === 'complete');
+    }, ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => {
+        const active = this.activeUploads();
+        return Array.from(active.values()).filter(upload => upload.stage === 'error');
+    }, ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
+    // Animation states
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
     constructor() {
-        console.log('🚀 [GlobalFileUploader] Component initialized');
+        console.log('🚀 [FloatingFileUploader] Component initialized');
+        // Set up effect to monitor file manager service's upload queue
+        effect(() => {
+            const uploadQueue = this.fileManagerService.uploadQueue();
+            const activeUploads = this.fileManagerService.activeUploads();
+            const hasUploads = uploadQueue.length > 0 || activeUploads.size > 0;
+            console.log('🔄 [FloatingFileUploader] File manager service queue changed:', {
+                queueLength: uploadQueue.length,
+                activeUploadsCount: activeUploads.size,
+                hasUploads,
+                currentVisible: this.isVisible(),
+                queueFiles: uploadQueue
+            });
+            // Show floating uploader when files are added to the file manager service queue
+            // But don't auto-hide when uploads complete - let user manually close
+            if (hasUploads && !this.isVisible()) {
+                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to file manager queue');
+                this.showWithAnimation();
+            }
+            // Note: Removed auto-hide logic - floating uploader stays visible until manually closed
+        });
+    }
+    ngOnInit() {
+        // Set up drag and drop listeners
+        this.setupDragAndDrop();
+        // Set up file input change listeners
+        this.setupFileInputListeners();
+    }
+    ngOnDestroy() {
+        console.log('🧹 [FloatingFileUploader] Component destroyed');
+        this.removeDragAndDropListeners();
+        this.removeFileInputListeners();
+    }
+    /**
+     * Set up drag and drop functionality
+     */
+    setupDragAndDrop() {
+        document.addEventListener('dragover', this.handleDragOver.bind(this));
+        document.addEventListener('dragleave', this.handleDragLeave.bind(this));
+        document.addEventListener('drop', this.handleDrop.bind(this));
+    }
+    /**
+     * Remove drag and drop listeners
+     */
+    removeDragAndDropListeners() {
+        document.removeEventListener('dragover', this.handleDragOver.bind(this));
+        document.removeEventListener('dragleave', this.handleDragLeave.bind(this));
+        document.removeEventListener('drop', this.handleDrop.bind(this));
+    }
+    /**
+     * Set up file input change listeners
+     */
+    setupFileInputListeners() {
+        // Listen for file input change events globally
+        document.addEventListener('change', this.handleFileInputChange.bind(this));
+    }
+    /**
+     * Remove file input listeners
+     */
+    removeFileInputListeners() {
+        document.removeEventListener('change', this.handleFileInputChange.bind(this));
+    }
+    /**
+     * Handle file input change events
+     */
+    handleFileInputChange(event) {
+        const target = event.target;
+        console.log('🔍 [FloatingFileUploader] File input change event detected:', {
+            type: target.type,
+            filesLength: target.files?.length || 0,
+            element: target
+        });
+        // Check if this is a file input with files
+        if (target.type === 'file' && target.files && target.files.length > 0) {
+            console.log('📁 [FloatingFileUploader] File input change detected:', target.files.length, 'files');
+            // Check if the input has a data-user-id attribute for user context
+            const userId = target.getAttribute('data-user-id');
+            if (userId && userId !== this.currentUserId()) {
+                this.setCurrentUserId(userId);
+            }
+            // Handle the files
+            this.handleFiles(Array.from(target.files));
+            // Reset the input to allow selecting the same files again
+            target.value = '';
+        }
     }
     /**
      * Handle drag over event
      */
-    onDragOver(event) {
+    handleDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(true);
+        // Show floating uploader when files are dragged over
+        if (event.dataTransfer?.types.includes('Files')) {
+            this.showWithAnimation();
+        }
     }
     /**
      * Handle drag leave event
      */
-    onDragLeave(event) {
+    handleDragLeave(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        // Only hide if leaving the entire document
+        if (!event.relatedTarget || event.relatedTarget === document.body) {
+            this.updateVisibility();
+        }
     }
     /**
      * Handle drop event
      */
-    onDrop(event) {
+    handleDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
-            this.addFilesToQueue(Array.from(files));
+            this.handleFiles(Array.from(files));
+        }
+    }
+    /**
+     * Handle files from drag and drop or file input
+     */
+    handleFiles(files) {
+        console.log('📁 [FloatingFileUploader] Handling files:', files.length);
+        // Use handleExternalFiles to process the files
+        this.handleExternalFiles(files, this.currentUserId());
+    }
+    /**
+     * Update visibility - simplified for notification only
+     */
+    updateVisibility() {
+        // This is just a notification component now
+        // The actual uploads are handled by the global uploader
+    }
+    /**
+     * Show with animation
+     */
+    showWithAnimation() {
+        console.log('🎬 [FloatingFileUploader] showWithAnimation called - setting isVisible to true');
+        this.isAnimating.set(true);
+        this.isVisible.set(true);
+        // Remove animation class after animation completes
+        setTimeout(() => {
+            this.isAnimating.set(false);
+            console.log('🎬 [FloatingFileUploader] Animation completed, isVisible:', this.isVisible());
+        }, 300);
+    }
+    /**
+     * Hide with animation
+     */
+    hideWithAnimation() {
+        this.isAnimating.set(true);
+        // Wait for animation to complete before hiding
+        setTimeout(() => {
+            this.isVisible.set(false);
+            this.isAnimating.set(false);
+        }, 300);
+    }
+    /**
+     * Toggle minimize state
+     */
+    toggleMinimize() {
+        this.isMinimized.set(!this.isMinimized());
+    }
+    /**
+     * Close the floating uploader
+     */
+    close() {
+        this.hideWithAnimation();
+    }
+    /**
+     * Get upload summary text
+     */
+    getUploadSummary() {
+        const queueLength = this.uploadQueue().length;
+        const activeCount = this.activeUploads().size;
+        const completed = this.completedUploads().length;
+        const failed = this.failedUploads().length;
+        if (activeCount > 0) {
+            return `${activeCount} uploading`;
+        }
+        else if (completed > 0 && failed === 0) {
+            return `${completed} completed`;
+        }
+        else if (failed > 0) {
+            return `${completed} completed, ${failed} failed`;
+        }
+        else if (queueLength > 0) {
+            return `${queueLength} pending`;
+        }
+        return 'No uploads';
+    }
+    /**
+     * Get overall progress percentage
+     */
+    getOverallProgress() {
+        const activeUploads = this.activeUploads();
+        if (activeUploads.size === 0)
+            return 0;
+        const totalProgress = Array.from(activeUploads.values()).reduce((sum, upload) => sum + upload.percentage, 0);
+        return Math.round(totalProgress / activeUploads.size);
+    }
+    /**
+     * Get status icon based on upload stage
+     */
+    getStatusIcon(stage) {
+        switch (stage) {
+            case 'reading': return 'schedule';
+            case 'uploading': return 'cloud_upload';
+            case 'complete': return 'check_circle';
+            case 'error': return 'error';
+            default: return 'help';
+        }
+    }
+    /**
+     * Get status class based on upload stage
+     */
+    getStatusClass(stage) {
+        switch (stage) {
+            case 'reading': return 'status-pending';
+            case 'uploading': return 'status-uploading';
+            case 'complete': return 'status-completed';
+            case 'error': return 'status-error';
+            default: return 'status-unknown';
+        }
+    }
+    /**
+     * Cancel upload
+     */
+    cancelUpload(fileId) {
+        console.log('🚫 [FloatingFileUploader] Cancelling upload:', fileId);
+        this.fileManagerService.cancelUpload(fileId);
+    }
+    /**
+     * Get file name from file ID (extract from the ID format)
+     */
+    getFileNameFromId(fileId) {
+        // Extract filename from the fileId format: filename_size_timestamp
+        const parts = fileId.split('_');
+        if (parts.length >= 3) {
+            // Remove the last two parts (size and timestamp) to get the filename
+            return parts.slice(0, -2).join('_');
+        }
+        return fileId;
+    }
+    /**
+     * Set current user ID
+     */
+    setCurrentUserId(userId) {
+        this.currentUserId.set(userId);
+        this.fileManagerService.setUserId(userId);
+    }
+    /**
+     * Public method to handle files from external sources
+     * This can be called by other components to trigger the floating uploader
+     */
+    handleExternalFiles(files, userId, groupId) {
+        console.log('📁 [FloatingFileUploader] External files received:', files.length, 'files');
+        // Set user ID if provided
+        if (userId && userId !== this.currentUserId()) {
+            this.setCurrentUserId(userId);
+        }
+        // Set group ID if provided
+        if (groupId) {
+            this.currentGroupId.set(groupId);
         }
+        // Upload files using file manager service
+        // The file manager service will handle adding to its queue and the effect will show the floating uploader
+        files.forEach((file, index) => {
+            console.log(`📁 [FloatingFileUploader] Starting upload for file ${index + 1}/${files.length}:`, file.name);
+            this.fileManagerService.uploadFile(file, {
+                userId: this.currentUserId(),
+                groupId: groupId,
+                permissions: ['read', 'write'],
+                tags: []
+            })
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    console.log('✅ [FloatingFileUploader] Upload completed:', response);
+                },
+                error: (error) => {
+                    console.error('❌ [FloatingFileUploader] Upload failed:', error);
+                }
+            });
+        });
     }
     /**
-     * Handle file input change
+     * Manually show the floating uploader
+     * This can be called from file input components or other triggers
      */
-    onFileInputChange(event) {
-        const target = event.target;
-        const files = target.files;
-        if (files && files.length > 0) {
-            this.addFilesToQueue(Array.from(files));
+    showUploader(groupId) {
+        console.log('👁️ [FloatingFileUploader] Manually showing uploader', groupId ? `for group: ${groupId}` : '');
+        if (groupId) {
+            this.currentGroupId.set(groupId);
         }
-        // Reset input value to allow selecting the same file again
-        target.value = '';
+        this.showWithAnimation();
     }
     /**
-     * Add files to upload queue
+     * Check if there are any uploads for the current group
      */
-    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;
+    hasUploadsForCurrentGroup() {
+        const groupId = this.currentGroupId();
+        if (!groupId) {
+            // If no group filter, show all uploads
+            return this.hasUploads();
         }
-        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();
+        // Check if any uploads belong to the current group
+        // Note: This would need to be enhanced based on how group IDs are stored in the file manager service
+        return this.hasUploads();
     }
-    /**
-     * 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;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
+                        CommonModule,
+                        CideIconComponent
+                    ], template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"no-uploads-message\">\r\n      <div class=\"message-content\">\r\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\r\n        <div class=\"message-text\">\r\n          <h4>No active uploads</h4>\r\n          <p>Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CideEleFileInputComponent {
+    fileManagerService = inject(CideEleFileManagerService);
+    notificationService = inject(NotificationService);
+    elementService = inject(CideElementsService);
+    destroyRef = inject(DestroyRef);
+    floatingUploader = inject(CideEleFloatingFileUploaderComponent, { optional: true });
+    // private readonly pendingTasks = inject(PendingTasks); // TODO: Fix PendingTasks API usage
+    // Traditional @Input() decorators
+    label = 'Choose file';
+    accept = '';
+    multiple = false;
+    disabled = false;
+    required = false;
+    helperText = '';
+    errorText = '';
+    showPreview = false;
+    previewWidth = '200px';
+    previewHeight = '200px';
+    previewBoxMode = false;
+    showFileName = true;
+    placeholderText = 'Click to select image';
+    placeholderIcon = '📷';
+    autoUpload = false;
+    uploadData = {};
+    showFloatingUploader = true;
+    floatingUploaderGroupId;
+    // Traditional @Output() decorators
+    fileChange = new EventEmitter();
+    uploadSuccess = new EventEmitter();
+    uploadError = new EventEmitter();
+    uploadProgressChange = new EventEmitter();
+    // Readable signals created from @Input() decorator values
+    labelSignal = signal(this.label, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
+    acceptSignal = signal(this.accept, ...(ngDevMode ? [{ debugName: "acceptSignal" }] : []));
+    multipleSignal = signal(this.multiple, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : []));
+    disabledSignal = signal(this.disabled, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : []));
+    requiredSignal = signal(this.required, ...(ngDevMode ? [{ debugName: "requiredSignal" }] : []));
+    helperTextSignal = signal(this.helperText, ...(ngDevMode ? [{ debugName: "helperTextSignal" }] : []));
+    errorTextSignal = signal(this.errorText, ...(ngDevMode ? [{ debugName: "errorTextSignal" }] : []));
+    showPreviewSignal = signal(this.showPreview, ...(ngDevMode ? [{ debugName: "showPreviewSignal" }] : []));
+    previewWidthSignal = signal(this.previewWidth, ...(ngDevMode ? [{ debugName: "previewWidthSignal" }] : []));
+    previewHeightSignal = signal(this.previewHeight, ...(ngDevMode ? [{ debugName: "previewHeightSignal" }] : []));
+    previewBoxModeSignal = signal(this.previewBoxMode, ...(ngDevMode ? [{ debugName: "previewBoxModeSignal" }] : []));
+    showFileNameSignal = signal(this.showFileName, ...(ngDevMode ? [{ debugName: "showFileNameSignal" }] : []));
+    placeholderTextSignal = signal(this.placeholderText, ...(ngDevMode ? [{ debugName: "placeholderTextSignal" }] : []));
+    placeholderIconSignal = signal(this.placeholderIcon, ...(ngDevMode ? [{ debugName: "placeholderIconSignal" }] : []));
+    autoUploadSignal = signal(this.autoUpload, ...(ngDevMode ? [{ debugName: "autoUploadSignal" }] : []));
+    uploadDataSignal = signal(this.uploadData, ...(ngDevMode ? [{ debugName: "uploadDataSignal" }] : []));
+    showFloatingUploaderSignal = signal(this.showFloatingUploader, ...(ngDevMode ? [{ debugName: "showFloatingUploaderSignal" }] : []));
+    floatingUploaderGroupIdSignal = signal(this.floatingUploaderGroupId, ...(ngDevMode ? [{ debugName: "floatingUploaderGroupIdSignal" }] : []));
+    // Reactive state with signals
+    id = signal(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
+    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    uploadStatus = signal('idle', ...(ngDevMode ? [{ debugName: "uploadStatus" }] : []));
+    files = signal(null, ...(ngDevMode ? [{ debugName: "files" }] : []));
+    fileNames = signal([], ...(ngDevMode ? [{ debugName: "fileNames" }] : []));
+    previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
+    uploadNotificationId = signal(null, ...(ngDevMode ? [{ debugName: "uploadNotificationId" }] : []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    groupId = signal(null, ...(ngDevMode ? [{ debugName: "groupId" }] : [])); // Group ID for multiple file uploads
+    isMultipleUploadMode = signal(false, ...(ngDevMode ? [{ debugName: "isMultipleUploadMode" }] : [])); // Flag to track if we're in multiple upload mode
+    // Computed signals for better relationships
+    hasFiles = computed(() => this.files() !== null && this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
+    canUpload = computed(() => this.hasFiles() && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canUpload" }] : []));
+    isInErrorState = computed(() => this.uploadStatus() === 'error', ...(ngDevMode ? [{ debugName: "isInErrorState" }] : []));
+    isInSuccessState = computed(() => this.uploadStatus() === 'success', ...(ngDevMode ? [{ debugName: "isInSuccessState" }] : []));
+    // Angular 20: Computed values using new features
+    totalFileSize = computed(() => {
+        if (!this.files())
+            return 0;
+        return Array.from(this.files()).reduce((total, file) => total + file.size, 0);
+    }, ...(ngDevMode ? [{ debugName: "totalFileSize" }] : []));
+    fileSizeInMB = computed(() => {
+        // Angular 20: Using ** operator for exponentiation
+        return (this.totalFileSize() / (1024 ** 2)).toFixed(2);
+    }, ...(ngDevMode ? [{ debugName: "fileSizeInMB" }] : []));
+    uploadProgressPercentage = computed(() => {
+        // Angular 20: Using ** operator for exponentiation
+        return Math.round(this.uploadProgress() ** 1); // Simple power operation
+    }, ...(ngDevMode ? [{ debugName: "uploadProgressPercentage" }] : []));
+    // ControlValueAccessor callbacks
+    onChange = (value) => { };
+    onTouched = () => { };
+    onValidatorChange = () => { };
+    // Computed values
+    hasImages = computed(() => this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "hasImages" }] : []));
+    isPreviewBoxMode = computed(() => this.previewBoxModeSignal() && this.showPreviewSignal(), ...(ngDevMode ? [{ debugName: "isPreviewBoxMode" }] : []));
+    isImagePreviewAvailable = computed(() => this.showPreviewSignal() && this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "isImagePreviewAvailable" }] : []));
+    constructor() {
+        // Angular 20: afterRenderEffect for DOM operations
+        afterRenderEffect(() => {
+            // Update file input element when files change
+            if (this.files()) {
+                const fileInput = document.getElementById('cide-file-input-' + this.id());
+                if (fileInput) {
+                    // Ensure the input reflects the current state
+                    fileInput.files = this.files();
+                }
+            }
+        });
+        // Angular 20: afterNextRender for one-time DOM operations
+        afterNextRender(() => {
+            console.log('🎯 [FileInput] Component rendered and DOM is ready');
+        });
+    }
+    ngOnInit() {
+        // Update signals with initial @Input() values
+        this.labelSignal.set(this.label);
+        this.acceptSignal.set(this.accept);
+        this.multipleSignal.set(this.multiple);
+        this.disabledSignal.set(this.disabled);
+        this.requiredSignal.set(this.required);
+        this.helperTextSignal.set(this.helperText);
+        this.errorTextSignal.set(this.errorText);
+        this.showPreviewSignal.set(this.showPreview);
+        this.previewWidthSignal.set(this.previewWidth);
+        this.previewHeightSignal.set(this.previewHeight);
+        this.previewBoxModeSignal.set(this.previewBoxMode);
+        this.showFileNameSignal.set(this.showFileName);
+        this.placeholderTextSignal.set(this.placeholderText);
+        this.placeholderIconSignal.set(this.placeholderIcon);
+        this.autoUploadSignal.set(this.autoUpload);
+        this.uploadDataSignal.set(this.uploadData);
+    }
+    ngOnChanges(changes) {
+        // Angular 20: Update signals when @Input() values change
+        if (changes['label'])
+            this.labelSignal.set(this.label);
+        if (changes['accept'])
+            this.acceptSignal.set(this.accept);
+        if (changes['multiple'])
+            this.multipleSignal.set(this.multiple);
+        if (changes['disabled'])
+            this.disabledSignal.set(this.disabled);
+        if (changes['required'])
+            this.requiredSignal.set(this.required);
+        if (changes['helperText'])
+            this.helperTextSignal.set(this.helperText);
+        if (changes['errorText'])
+            this.errorTextSignal.set(this.errorText);
+        if (changes['showPreview'])
+            this.showPreviewSignal.set(this.showPreview);
+        if (changes['previewWidth'])
+            this.previewWidthSignal.set(this.previewWidth);
+        if (changes['previewHeight'])
+            this.previewHeightSignal.set(this.previewHeight);
+        if (changes['previewBoxMode'])
+            this.previewBoxModeSignal.set(this.previewBoxMode);
+        if (changes['showFileName'])
+            this.showFileNameSignal.set(this.showFileName);
+        if (changes['placeholderText'])
+            this.placeholderTextSignal.set(this.placeholderText);
+        if (changes['placeholderIcon'])
+            this.placeholderIconSignal.set(this.placeholderIcon);
+        if (changes['autoUpload'])
+            this.autoUploadSignal.set(this.autoUpload);
+        if (changes['uploadData'])
+            this.uploadDataSignal.set(this.uploadData);
+    }
+    writeValue(value) {
+        console.log('📝 [FileInput] writeValue called with:', value);
+        if (typeof value === 'string') {
+            // Value is an uploaded file ID - fetch file details and set preview
+            console.log('📝 [FileInput] Value is uploaded file ID:', value);
+            this.files.set(null);
+            this.fileNames.set([]);
+            this.clearPreviews();
+            // Fetch file details to get base64 and set preview
+            this.loadFileDetailsFromId(value);
         }
-        // Check file type
-        if (this.allowedTypes.length > 0 && !this.allowedTypes.includes(file.type)) {
-            console.warn(`⚠️ [GlobalFileUploader] File type ${file.type} not allowed`);
-            return false;
+        else if (value instanceof FileList) {
+            // Value is a FileList
+            console.log('📝 [FileInput] Value is FileList:', Array.from(value).map(f => f.name));
+            this.files.set(value);
+            this.fileNames.set(Array.from(value).map(f => f.name));
+            this.generatePreviews();
         }
-        return true;
+        else {
+            // Value is null
+            console.log('📝 [FileInput] Value is null');
+            this.files.set(null);
+            this.fileNames.set([]);
+            this.clearPreviews();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
     }
-    /**
-     * 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);
+    setDisabledState(isDisabled) {
+        // Note: With input signals, disabled state is controlled by the parent component
+        // This method is kept for ControlValueAccessor compatibility but doesn't modify the signal
+        console.log('🔧 [FileInput] setDisabledState called with:', isDisabled, '(controlled by parent component)');
+    }
+    onFileSelected(event) {
+        console.log('🔍 [FileInput] onFileSelected called');
+        const input = event.target;
+        const selectedFiles = input.files;
+        this.files.set(selectedFiles);
+        this.fileNames.set(selectedFiles ? Array.from(selectedFiles).map(f => f.name) : []);
+        console.log('📁 [FileInput] Files selected:', this.fileNames());
+        this.generatePreviews();
+        // Reset upload status when new file is selected
+        this.uploadStatus.set('idle');
+        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
+        this.onChange(selectedFiles);
+        this.fileChange.emit(selectedFiles);
+        this.onTouched();
+        // Show floating uploader if enabled and files are selected
+        if (this.showFloatingUploaderSignal() && selectedFiles && selectedFiles.length > 0 && this.floatingUploader) {
+            console.log('👁️ [FileInput] Showing floating uploader for', selectedFiles.length, 'files');
+            this.floatingUploader.showUploader(this.floatingUploaderGroupIdSignal());
+        }
+        // Auto upload if enabled
+        if (this.autoUploadSignal() && selectedFiles && selectedFiles.length > 0) {
+            if (this.multipleSignal()) {
+                console.log('🚀 [FileInput] Auto upload enabled for multiple files mode:', selectedFiles.length, 'files');
+                this.uploadMultipleFiles(Array.from(selectedFiles));
             }
             else {
-                // Single file upload
-                this.uploadNextFile();
+                console.log('🚀 [FileInput] Auto upload enabled for single file mode:', selectedFiles[0].name);
+                this.uploadFile(selectedFiles[0]);
             }
         }
+        else {
+            console.log('⏸️ [FileInput] Auto upload disabled or no files');
+        }
     }
-    /**
-     * 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({
+    clearFiles() {
+        console.log('🗑️ [FileInput] clearFiles called');
+        this.files.set(null);
+        this.fileNames.set([]);
+        this.clearPreviews();
+        this.uploadStatus.set('idle');
+        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
+        this.onChange(null);
+        this.fileChange.emit(null);
+    }
+    uploadFile(file) {
+        console.log('📤 [FileInput] uploadFile called for:', file.name, 'Size:', file.size, 'bytes');
+        // Angular 20: Use PendingTasks for better loading state management
+        // const uploadTask = this.pendingTasks.add(); // TODO: Fix PendingTasks API usage
+        // console.log('⏳ [FileInput] Pending task added for upload tracking');
+        // Set upload status to 'start' before starting upload
+        this.uploadStatus.set('start');
+        console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
+        this.isUploading.set(true);
+        this.uploadProgress.set(0);
+        this.uploadProgressChange.emit(0);
+        console.log('📊 [FileInput] Upload progress initialized to 0%');
+        // Make form control invalid during upload - this prevents form submission
+        this.onChange(null);
+        console.log('🚫 [FileInput] Form control value set to null to prevent submission');
+        // Show initial progress notification with spinner (persistent - no auto-dismiss)
+        const notificationId = this.notificationService.showProgress('🔄 Preparing file upload...', 0, { duration: 0 });
+        this.uploadNotificationId.set(notificationId);
+        console.log('🔔 [FileInput] Progress notification started with ID:', notificationId);
+        this.fileManagerService.uploadFile(file, this.uploadDataSignal(), (progress) => {
+            // Real progress callback from file manager service
+            this.uploadProgress.set(progress);
+            this.uploadProgressChange.emit(progress);
+            console.log('📈 [FileInput] Upload progress:', Math.round(progress) + '%');
+            // Set upload status to 'uploading' when progress starts
+            if (this.uploadStatus() === 'start') {
+                this.uploadStatus.set('uploading');
+                console.log('🔄 [FileInput] Upload status changed to:', this.uploadStatus());
+            }
+            // Update progress notification with spinner
+            const notificationId = this.uploadNotificationId();
+            if (notificationId) {
+                let progressMessage = '';
+                if (progress < 10) {
+                    progressMessage = '🔄 Starting upload...';
+                }
+                else if (progress < 25) {
+                    progressMessage = '🔄 Uploading file...';
+                }
+                else if (progress < 50) {
+                    progressMessage = '🔄 Upload in progress...';
+                }
+                else if (progress < 75) {
+                    progressMessage = '🔄 Almost done...';
+                }
+                else if (progress < 95) {
+                    progressMessage = '🔄 Finishing upload...';
+                }
+                else {
+                    progressMessage = '🔄 Finalizing...';
+                }
+                this.notificationService.updateProgress(notificationId, progress, progressMessage);
+            }
+        }).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);
+                console.log('🎉 [FileInput] Upload SUCCESS - Response received:', response);
+                // Angular 20: Complete the pending task
+                // this.pendingTasks.complete(uploadTask); // TODO: Fix PendingTasks API usage
+                // console.log('✅ [FileInput] Pending task completed for successful upload');
+                // Set upload status to 'success'
+                this.uploadStatus.set('success');
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
+                // Complete the progress
+                this.uploadProgress.set(100);
+                this.uploadProgressChange.emit(100);
+                console.log('📊 [FileInput] Upload progress completed: 100%');
+                // Update progress notification to complete
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    this.notificationService.remove(notificationId);
+                    console.log('🔔 [FileInput] Progress notification removed');
+                }
+                // Success notification removed for cleaner UX
+                this.uploadNotificationId.set(null);
+                // Extract ID from CoreFileManagerInsertUpdateResponse
+                const uploadedId = response?.data?.core_file_manager?.[0]?.cyfm_id;
+                if (uploadedId) {
+                    console.log('✅ [FileInput] File uploaded successfully with ID:', uploadedId);
+                    // Set the uploaded ID as the form control value
+                    this.onChange(uploadedId);
+                    console.log('📝 [FileInput] Form control value set to uploaded ID:', uploadedId);
+                    // Only emit individual uploadSuccess if not in multiple upload mode
+                    if (!this.isMultipleUploadMode()) {
+                        this.uploadSuccess.emit(uploadedId);
+                        console.log('📝 [FileInput] Upload success event emitted with file ID:', uploadedId);
+                    }
+                    else {
+                        console.log('📝 [FileInput] Individual upload success suppressed (multiple upload mode) - file ID:', uploadedId);
+                    }
                 }
                 else {
-                    console.error('❌ [GlobalFileUploader] No group ID received');
-                    this.handleUploadError('Failed to generate group ID', uploads[0]?.fileId);
+                    console.error('❌ [FileInput] Upload successful but no ID returned:', response);
+                    this.uploadError.emit('Upload successful but no ID returned');
                 }
+                this.isUploading.set(false);
+                console.log('🔄 [FileInput] isUploading set to false');
             },
             error: (error) => {
-                console.error('❌ [GlobalFileUploader] Failed to generate group ID:', error);
-                this.handleUploadError('Failed to generate group ID', uploads[0]?.fileId);
+                console.error('💥 [FileInput] Upload FAILED:', error);
+                // Angular 20: Complete the pending task even on error
+                // this.pendingTasks.complete(uploadTask); // TODO: Fix PendingTasks API usage
+                // console.log('❌ [FileInput] Pending task completed for failed upload');
+                // Set upload status to 'error' and remove upload validation error
+                this.uploadStatus.set('error');
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
+                // Remove progress notification and show error
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    this.notificationService.remove(notificationId);
+                    console.log('🔔 [FileInput] Progress notification removed due to error');
+                }
+                this.notificationService.error(`❌ File upload failed: ${error.message || error.error?.message || 'Unknown error occurred'}`, { duration: 0 });
+                this.uploadNotificationId.set(null);
+                this.uploadError.emit(error.message || error.error?.message || 'Upload failed');
+                this.isUploading.set(false);
+                this.uploadProgress.set(0);
+                this.uploadProgressChange.emit(0);
+                console.log('🔄 [FileInput] Upload state reset - isUploading: false, progress: 0%');
             }
         });
     }
     /**
-     * Upload files with group ID
+     * Upload multiple files with group ID support
+     * FLOW: 1) Generate group ID first, 2) Upload all files with same group ID, 3) Emit group ID on completion
      */
-    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);
+    uploadMultipleFiles(files) {
+        console.log('📤 [FileInput] uploadMultipleFiles called for:', files.length, 'files');
+        console.log('🔄 [FileInput] STEP 1: Generate group ID before starting any file uploads');
+        // Set multiple upload mode flag
+        this.isMultipleUploadMode.set(true);
+        // Set upload status to 'start' before starting upload
+        this.uploadStatus.set('start');
+        this.isUploading.set(true);
+        this.uploadProgress.set(0);
+        this.uploadProgressChange.emit(0);
+        // Make form control invalid during upload
+        this.onChange(null);
+        // Show initial progress notification
+        const notificationId = this.notificationService.showProgress('🔄 Preparing multiple file upload...', 0, { duration: 0 });
+        this.uploadNotificationId.set(notificationId);
+        // STEP 1: Generate or get group ID BEFORE starting any file uploads
+        const existingGroupId = this.uploadDataSignal().groupId;
+        if (existingGroupId) {
+            console.log('🆔 [FileInput] STEP 1 COMPLETE: Using existing group ID:', existingGroupId);
+            console.log('🔄 [FileInput] STEP 2: Starting file uploads with group ID:', existingGroupId);
+            this.groupId.set(existingGroupId);
+            this.startMulti(files, existingGroupId);
+        }
+        else {
+            console.log('🆔 [FileInput] No existing group ID, generating new one...');
+            // Generate group ID BEFORE starting any file uploads
+            this.fileManagerService.generateObjectId().subscribe({
+                next: (response) => {
+                    const newGroupId = response.data?.objectId;
+                    console.log('🆔 [FileInput] STEP 1 COMPLETE: Generated new group ID:', newGroupId);
+                    console.log('🔄 [FileInput] STEP 2: Starting file uploads with group ID:', newGroupId);
+                    this.groupId.set(newGroupId);
+                    this.startMulti(files, newGroupId);
+                },
+                error: (error) => {
+                    console.error('❌ [FileInput] Failed to generate group ID:', error);
+                    this.uploadError.emit('Failed to generate group ID');
+                    this.isUploading.set(false);
+                    this.uploadStatus.set('error');
+                    const notificationId = this.uploadNotificationId();
+                    if (notificationId) {
+                        this.notificationService.remove(notificationId);
                     }
-                    console.log('🔍 [GlobalFileUploader] Upload response received:', response);
-                    console.log('🔍 [GlobalFileUploader] Response data structure:', response?.data);
+                    this.notificationService.error('❌ Failed to generate group ID for multiple file upload', { duration: 0 });
+                    this.uploadNotificationId.set(null);
+                }
+            });
+        }
+    }
+    /**
+     * Start uploading multiple files with the provided group ID
+     * All files will be uploaded with the SAME group ID that was generated before this method
+     */
+    startMulti(files, groupId) {
+        console.log('🚀 [FileInput] STEP 2: Starting upload for', files.length, 'files with group ID:', groupId);
+        console.log('📋 [FileInput] All files will use the same group ID:', groupId);
+        let completedUploads = 0;
+        let failedUploads = 0;
+        const totalFiles = files.length;
+        // IMPORTANT: All files use the SAME group ID that was generated before starting uploads
+        const uploadDataWithGroupId = {
+            ...this.uploadDataSignal(),
+            groupId: groupId
+        };
+        files.forEach((file, index) => {
+            console.log(`📤 [FileInput] Uploading file ${index + 1}/${totalFiles}: "${file.name}" with group ID: ${groupId}`);
+            this.fileManagerService.uploadFile(file, uploadDataWithGroupId, (progress) => {
+                // Calculate overall progress
+                const fileProgress = progress / totalFiles;
+                const overallProgress = ((completedUploads * 100) + fileProgress) / totalFiles;
+                this.uploadProgress.set(overallProgress);
+                this.uploadProgressChange.emit(overallProgress);
+                // Update progress notification
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    const progressMessage = `🔄 Uploading file ${index + 1} of ${totalFiles}...`;
+                    this.notificationService.updateProgress(notificationId, overallProgress, progressMessage);
+                }
+            }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                next: (response) => {
+                    completedUploads++;
+                    console.log(`✅ [FileInput] File ${index + 1}/${totalFiles} uploaded`);
                     // Check if all files are completed
-                    if (completedCount + failedCount === totalFiles) {
-                        this.handleMultipleUploadComplete(completedCount, failedCount, groupId, uploadedFiles);
+                    if (completedUploads + failedUploads === totalFiles) {
+                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
                     }
                 },
                 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'
-                    });
+                    failedUploads++;
+                    console.error(`❌ [FileInput] File ${index + 1}/${totalFiles} upload failed:`, error);
                     // Check if all files are completed
-                    if (completedCount + failedCount === totalFiles) {
-                        this.handleMultipleUploadComplete(completedCount, failedCount, groupId, uploadedFiles);
+                    if (completedUploads + failedUploads === totalFiles) {
+                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
                     }
                 }
             });
         });
     }
     /**
-     * Handle multiple upload completion
+     * Handle completion of multiple file upload
      */
-    handleMultipleUploadComplete(completed, failed, groupId, uploadedFiles) {
-        console.log(`📊 [GlobalFileUploader] Multiple upload complete: ${completed}/${completed + failed} successful`);
+    handleMultipleUploadComplete(completed, failed, total, groupId) {
+        console.log(`📊 [FileInput] Multiple upload complete: ${completed}/${total} successful, ${failed} failed`);
         this.isUploading.set(false);
-        if (completed > 0) {
-            this.allUploadsComplete.emit({
-                groupId: groupId,
-                uploadedFiles: uploadedFiles
-            });
+        this.uploadProgress.set(100);
+        this.uploadProgressChange.emit(100);
+        // Remove progress notification
+        const notificationId = this.uploadNotificationId();
+        if (notificationId) {
+            this.notificationService.remove(notificationId);
+        }
+        this.uploadNotificationId.set(null);
+        if (failed === 0) {
+            // All files uploaded successfully
+            this.uploadStatus.set('success');
+            // Success notification removed for cleaner UX
+            // STEP 3: For multiple file upload, emit the group ID (not individual file IDs)
+            this.onChange(groupId);
+            this.uploadSuccess.emit(groupId);
+            console.log('📝 [FileInput] Multiple upload completed with group ID:', groupId);
+        }
+        else if (completed > 0) {
+            // Some files uploaded successfully
+            this.uploadStatus.set('error');
+            this.notificationService.warning(`⚠️ ${completed}/${total} files uploaded. ${failed} failed.`, { duration: 0 });
+            this.uploadError.emit(`${failed} out of ${total} files failed to upload`);
+        }
+        else {
+            // All files failed
+            this.uploadStatus.set('error');
+            this.notificationService.error(`❌ All ${total} files failed to upload.`, { duration: 0 });
+            this.uploadError.emit('All files failed to upload');
         }
+        // Reset multiple upload mode flag
+        this.isMultipleUploadMode.set(false);
     }
-    /**
-     * Upload next file in queue (single file mode)
-     */
-    uploadNextFile() {
-        const pendingUpload = this.uploadQueue().find(upload => upload.status === 'pending');
-        if (!pendingUpload) {
-            this.isUploading.set(false);
+    generatePreviews() {
+        // Clear existing previews
+        this.clearPreviews();
+        if (!this.showPreviewSignal() || !this.files()) {
             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);
+        Array.from(this.files()).forEach(file => {
+            if (this.isImageFile(file)) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    if (e.target?.result) {
+                        this.previewUrls.update(urls => [...urls, e.target.result]);
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    }
+    clearPreviews() {
+        // Revoke object URLs to prevent memory leaks
+        this.previewUrls().forEach(url => {
+            if (url.startsWith('blob:')) {
+                URL.revokeObjectURL(url);
+            }
+        });
+        this.previewUrls.set([]);
+    }
+    isImageFile(file) {
+        return file.type.startsWith('image/');
+    }
+    loadFileDetailsFromId(fileId) {
+        console.log('🔍 [FileInput] Loading file details for ID:', fileId);
+        if (!fileId)
+            return;
+        this.fileManagerService?.getFileDetails({ cyfm_id: fileId })?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: (fileDetails) => {
+                console.log('📋 [FileInput] File details received:', fileDetails);
+                if (fileDetails?.data?.length) {
+                    const fileData = fileDetails.data[0];
+                    console.log('📁 [FileInput] File data:', fileData);
+                    // Set file name from the details
+                    if (fileData.cyfm_name) {
+                        this.fileNames.set([fileData.cyfm_name]);
+                        console.log('📝 [FileInput] File name set:', fileData.cyfm_name);
+                    }
+                    // If it's an image and we have base64 data, set preview
+                    if (this.showPreviewSignal() && fileData.cyfm_file_base64) {
+                        // Check if it's an image file based on file name or type
+                        const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
+                            this.isImageFileFromType(fileData.cyfm_type || '');
+                        if (isImage) {
+                            // Add data URL prefix if not already present
+                            let base64Data = fileData.cyfm_file_base64;
+                            if (!base64Data.startsWith('data:')) {
+                                const mimeType = fileData.cyfm_type || 'image/jpeg';
+                                base64Data = `data:${mimeType};base64,${base64Data}`;
+                            }
+                            this.previewUrls.set([base64Data]);
+                            console.log('🖼️ [FileInput] Preview set from base64 data');
+                        }
+                    }
                 }
                 else {
-                    // Fallback to original fileId
-                    this.updateUploadStatus(pendingUpload.fileId, 'completed', 100, undefined, response);
+                    console.warn('⚠️ [FileInput] No file data found for ID:', fileId);
                 }
-                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);
+                console.error('❌ [FileInput] Error loading file details:', error);
+                this.notificationService.error(`Failed to load file details: ${error.message || 'Unknown error'}`, { duration: 0 });
             }
         });
     }
-    /**
-     * Update upload progress
-     */
-    updateUploadProgress(fileId, progress) {
-        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
-            ? { ...upload, progress }
-            : upload));
+    isImageFileFromName(fileName) {
+        if (!fileName)
+            return false;
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
+        const lowerFileName = fileName.toLowerCase();
+        return imageExtensions.some(ext => lowerFileName.endsWith(ext));
     }
-    /**
-     * 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;
-        });
+    isImageFileFromType(fileType) {
+        if (!fileType)
+            return false;
+        return fileType.startsWith('image/');
     }
-    /**
-     * 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 };
+    removePreview(index) {
+        const currentFiles = this.files();
+        const currentUrls = this.previewUrls();
+        if (currentFiles && currentFiles.length > index) {
+            // Handle FileList case - remove file from FileList
+            const dt = new DataTransfer();
+            Array.from(currentFiles).forEach((file, i) => {
+                if (i !== index) {
+                    dt.items.add(file);
                 }
-                return upload;
             });
-            console.log('🔄 [GlobalFileUploader] Updated queue by tempId:', updatedQueue.map(u => ({ fileName: u.fileName, status: u.status, fileId: u.fileId })));
-            return updatedQueue;
-        });
+            const newFiles = dt.files;
+            this.files.set(newFiles);
+            this.fileNames.set(Array.from(newFiles).map(f => f.name));
+            // Remove the preview URL
+            if (currentUrls[index] && currentUrls[index].startsWith('blob:')) {
+                URL.revokeObjectURL(currentUrls[index]);
+            }
+            this.previewUrls.update(urls => urls.filter((_, i) => i !== index));
+            this.onChange(newFiles);
+            this.fileChange.emit(newFiles);
+        }
+        else if (currentUrls.length > index) {
+            // Handle uploaded file ID case - clear the preview and set control value to null
+            console.log('🗑️ [FileInput] Removing preview for uploaded file ID');
+            // Clear preview
+            this.previewUrls.update(urls => urls.filter((_, i) => i !== index));
+            this.fileNames.set([]);
+            // Set control value to null since we're removing the uploaded file
+            this.onChange(null);
+            this.fileChange.emit(null);
+        }
     }
-    /**
-     * Handle upload error
-     */
-    handleUploadError(error, fileId) {
-        if (fileId) {
-            this.updateUploadStatus(fileId, 'error', 0, error);
-            this.uploadError.emit({ fileId, error });
+    ngOnDestroy() {
+        // Clean up preview URLs to prevent memory leaks
+        this.clearPreviews();
+        // Clean up any active upload notification
+        const notificationId = this.uploadNotificationId();
+        if (notificationId) {
+            this.notificationService.remove(notificationId);
+            this.uploadNotificationId.set(null);
         }
-        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);
+    triggerFileSelect() {
+        const fileInput = document.getElementById('cide-file-input-' + this.id());
+        if (fileInput && !this.disabledSignal()) {
+            fileInput.click();
+        }
     }
     /**
-     * Retry upload
+     * Show floating uploader manually
+     * This can be called to show the floating uploader even when no files are selected
      */
-    retryUpload(fileId) {
-        this.updateUploadStatus(fileId, 'pending', 0);
-        this.processUploadQueue();
+    showUploader() {
+        if (this.floatingUploader && this.showFloatingUploaderSignal()) {
+            console.log('👁️ [FileInput] Manually showing floating uploader');
+            this.floatingUploader.showUploader(this.floatingUploaderGroupIdSignal());
+        }
     }
-    /**
-     * Remove upload from queue
-     */
-    removeUpload(fileId) {
-        this.uploadQueue.update(queue => queue.filter(upload => upload.fileId !== fileId));
+    // Drag and Drop Event Handlers
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabledSignal()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag over detected');
+        }
     }
-    /**
-     * Clear completed uploads
-     */
-    clearCompleted() {
-        this.uploadQueue.update(queue => queue.filter(upload => upload.status !== 'completed'));
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        console.log('🔄 [FileInput] Drag leave detected');
     }
-    /**
-     * Clear all uploads
-     */
-    clearAll() {
-        this.uploadQueue.set([]);
-        this.currentGroupId.set(null);
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabledSignal()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag enter detected');
+        }
     }
-    /**
-     * 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';
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        if (this.disabledSignal()) {
+            console.log('⏸️ [FileInput] Drop ignored - component is disabled');
+            return;
+        }
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            console.log('📁 [FileInput] Files dropped:', Array.from(files).map(f => f.name));
+            // Validate file types if accept is specified
+            if (this.acceptSignal() && !this.validateFileTypes(files)) {
+                console.log('❌ [FileInput] Invalid file types dropped');
+                this.notificationService.error('❌ Invalid file type. Please select files of the correct type.', { duration: 0 });
+                return;
+            }
+            // Handle single vs multiple files
+            if (!this.multipleSignal() && files.length > 1) {
+                console.log('⚠️ [FileInput] Multiple files dropped but multiple is disabled');
+                this.notificationService.warning('⚠️ Only one file is allowed. Using the first file.', { duration: 0 });
+                // Create a new FileList with only the first file
+                const dt = new DataTransfer();
+                dt.items.add(files[0]);
+                this.handleFileSelection(dt.files);
+            }
+            else {
+                this.handleFileSelection(files);
+            }
         }
     }
-    /**
-     * 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';
+    validateFileTypes(files) {
+        const acceptTypes = this.acceptSignal().split(',').map(type => type.trim());
+        if (acceptTypes.length === 0 || acceptTypes[0] === '')
+            return true;
+        return Array.from(files).every(file => {
+            return acceptTypes.some(acceptType => {
+                if (acceptType.startsWith('.')) {
+                    // Extension-based validation
+                    return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+                }
+                else if (acceptType.includes('/')) {
+                    // MIME type validation
+                    return file.type === acceptType || file.type.startsWith(acceptType.replace('*', ''));
+                }
+                return false;
+            });
+        });
+    }
+    handleFileSelection(files) {
+        this.files.set(files);
+        this.fileNames.set(Array.from(files).map(f => f.name));
+        console.log('📁 [FileInput] Files selected via drag & drop:', this.fileNames());
+        this.generatePreviews();
+        // Reset upload status when new file is selected
+        this.uploadStatus.set('idle');
+        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
+        this.onChange(files);
+        this.fileChange.emit(files);
+        this.onTouched();
+        // Show floating uploader if enabled and files are selected
+        if (this.showFloatingUploaderSignal() && files.length > 0 && this.floatingUploader) {
+            console.log('👁️ [FileInput] Showing floating uploader for dropped files:', files.length, 'files');
+            this.floatingUploader.showUploader(this.floatingUploaderGroupIdSignal());
+        }
+        // Auto upload if enabled
+        if (this.autoUploadSignal() && files.length > 0) {
+            if (this.multipleSignal()) {
+                console.log('🚀 [FileInput] Auto upload enabled for multiple files mode (drag & drop):', files.length, 'files');
+                this.uploadMultipleFiles(Array.from(files));
+            }
+            else {
+                console.log('🚀 [FileInput] Auto upload enabled for single file mode (drag & drop):', files[0].name);
+                this.uploadFile(files[0]);
+            }
+        }
+        else {
+            console.log('⏸️ [FileInput] Auto upload disabled or no files');
         }
     }
-    /**
-     * 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];
+    isRequired() {
+        return this.requiredSignal();
     }
     /**
-     * Generate unique file ID - this should match the service's generateFileId method
-     * The service uses: ${file.name}_${file.size}_${Date.now()}
+     * Angular 20: Utility method to get upload data with proper typing
+     * @returns Properly typed upload data
      */
-    generateFileId(file) {
-        return `${file.name}_${file.size}_${Date.now()}`;
+    getUploadData() {
+        return this.uploadDataSignal();
     }
     /**
-     * Convert IFileUploadRequest to FileUploadOptions
+     * Angular 20: Utility method to update upload data with type safety
+     * @param data Partial upload data to merge with existing data
      */
-    convertToFileUploadOptions(request) {
+    updateUploadData(data) {
+        const currentData = this.uploadDataSignal();
+        const updatedData = { ...currentData, ...data };
+        // Note: This would require the uploadData to be a writable signal
+        // For now, this method serves as a type-safe way to work with upload data
+        console.log('📝 [FileInput] Upload data updated:', updatedData);
+    }
+    getCurrentState() {
         return {
-            altText: request.altText,
-            userId: request.userId,
-            permissions: request.permissions,
-            tags: request.tags,
-            groupId: request.groupId
+            id: this.id(),
+            label: this.labelSignal(),
+            required: this.requiredSignal(),
+            disabled: this.disabledSignal(),
+            accept: this.acceptSignal(),
+            multiple: this.multipleSignal(),
+            showPreview: this.showPreviewSignal(),
+            autoUpload: this.autoUploadSignal(),
+            uploadStatus: this.uploadStatus(),
+            isUploading: this.isUploading(),
+            uploadProgress: this.uploadProgress(),
+            files: this.files() ? Array.from(this.files()).map(f => ({ name: f.name, size: f.size, type: f.type })) : null,
+            fileNames: this.fileNames(),
+            previewUrls: this.previewUrls().length,
+            helperText: this.helperTextSignal(),
+            errorText: this.errorTextSignal(),
+            placeholderText: this.placeholderTextSignal(),
+            placeholderIcon: this.placeholderIconSignal(),
+            previewWidth: this.previewWidthSignal(),
+            previewHeight: this.previewHeightSignal(),
+            previewBoxMode: this.previewBoxModeSignal(),
+            showFileName: this.showFileNameSignal(),
+            uploadData: this.uploadDataSignal()
         };
     }
-    /**
-     * Trigger file input click
-     */
-    triggerFileInput() {
-        const fileInput = document.getElementById('global-file-input');
-        if (fileInput) {
-            fileInput.click();
+    async getControlData() {
+        console.log('🔍 [FileInput] getControlData called');
+        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id() });
+        if (cide_element_data) {
+            console.log('📋 [FileInput] Element data loaded:', cide_element_data);
+            // Note: Since we're using input signals, we can't directly set their values
+            // This method would need to be refactored to work with the new signal-based approach
+            // For now, we'll log the data and trigger validation
+            console.log('✅ [FileInput] Control data received from element service');
+            console.log('⚠️ [FileInput] Note: Input signals cannot be modified after component initialization');
+            // Trigger validation update
+            this.onValidatorChange();
+        }
+        else {
+            console.log('⚠️ [FileInput] No element data found for key:', this.id());
         }
     }
-    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"] }] });
+    // Validator implementation
+    validate(control) {
+        console.log('🔍 [FileInput] validate() called - uploadStatus:', this.uploadStatus(), 'required:', this.requiredSignal(), 'files:', !!this.files(), 'control.value:', control.value);
+        // If upload is in progress (start or uploading status), return validation error
+        if (this.uploadStatus() === 'start' || this.uploadStatus() === 'uploading') {
+            console.log('⚠️ [FileInput] Validation ERROR: Upload in progress');
+            return { 'uploadInProgress': { message: 'File upload in progress. Please wait...' } };
+        }
+        // If required and no file is selected and no control value (uploaded file ID), return validation error
+        if (this.requiredSignal() && !this.files() && !control.value) {
+            console.log('⚠️ [FileInput] Validation ERROR: File required');
+            return { 'required': { message: 'Please select a file to upload.' } };
+        }
+        console.log('✅ [FileInput] Validation PASSED: No errors');
+        return null; // No validation errors
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", required: "required", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData", showFloatingUploader: "showFloatingUploader", floatingUploaderGroupId: "floatingUploaderGroupId" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: CideEleFileInputComponent,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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  @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}}\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: CideEleGlobalFileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, 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: [{
+            args: [{ selector: 'cide-ele-file-input', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: CideEleFileInputComponent,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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  @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}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
+                type: Input
+            }], accept: [{
                 type: Input
             }], multiple: [{
                 type: Input
-            }], accept: [{
+            }], disabled: [{
                 type: Input
-            }], maxFileSize: [{
+            }], required: [{
                 type: Input
-            }], allowedTypes: [{
+            }], helperText: [{
                 type: Input
-            }], uploadComplete: [{
+            }], errorText: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], previewWidth: [{
+                type: Input
+            }], previewHeight: [{
+                type: Input
+            }], previewBoxMode: [{
+                type: Input
+            }], showFileName: [{
+                type: Input
+            }], placeholderText: [{
+                type: Input
+            }], placeholderIcon: [{
+                type: Input
+            }], autoUpload: [{
+                type: Input
+            }], uploadData: [{
+                type: Input
+            }], showFloatingUploader: [{
+                type: Input
+            }], floatingUploaderGroupId: [{
+                type: Input
+            }], fileChange: [{
                 type: Output
-            }], uploadError: [{
+            }], uploadSuccess: [{
                 type: Output
-            }], uploadCancelled: [{
+            }], uploadError: [{
                 type: Output
-            }], allUploadsComplete: [{
+            }], uploadProgressChange: [{
                 type: Output
             }] } });
 
-class CideEleFloatingFileUploaderComponent {
+class CideEleGlobalFileUploaderComponent {
+    // Dependency injection
     destroyRef = inject(DestroyRef);
-    fileManagerService = inject(CideEleFileManagerService);
-    // Signals for reactive state
-    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
-    isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
-    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
-    // Use file manager service's upload queue as the single source of truth
-    uploadQueue = computed(() => this.fileManagerService.uploadQueue(), ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
-    activeUploads = computed(() => this.fileManagerService.activeUploads(), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
-    // Computed values based on file manager service state
+    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().length > 0, ...(ngDevMode ? [{ debugName: "pendingUploads" }] : [])); // All files in queue are pending
-    completedUploads = computed(() => {
-        const active = this.activeUploads();
-        return Array.from(active.values()).filter(upload => upload.stage === 'complete');
-    }, ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
-    failedUploads = computed(() => {
-        const active = this.activeUploads();
-        return Array.from(active.values()).filter(upload => upload.stage === 'error');
-    }, ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
-    // Animation states
-    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    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('🚀 [FloatingFileUploader] Component initialized');
-        // Set up effect to monitor file manager service's upload queue
-        effect(() => {
-            const uploadQueue = this.fileManagerService.uploadQueue();
-            const hasUploads = uploadQueue.length > 0;
-            console.log('🔄 [FloatingFileUploader] File manager service queue changed:', {
-                queueLength: uploadQueue.length,
-                hasUploads,
-                currentVisible: this.isVisible(),
-                queueFiles: uploadQueue
-            });
-            // Show floating uploader when files are added to the file manager service queue
-            if (hasUploads && !this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to file manager queue');
-                this.showWithAnimation();
-            }
-            else if (!hasUploads && this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Hiding floating uploader - no files in file manager queue');
-                this.hideWithAnimation();
-            }
-        });
+        console.log('🚀 [GlobalFileUploader] Component initialized');
     }
-    ngOnInit() {
-        // Set up drag and drop listeners
-        this.setupDragAndDrop();
-        // Set up file input change listeners
-        this.setupFileInputListeners();
+    /**
+     * Handle drag over event
+     */
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
     }
-    ngOnDestroy() {
-        console.log('🧹 [FloatingFileUploader] Component destroyed');
-        this.removeDragAndDropListeners();
-        this.removeFileInputListeners();
+    /**
+     * Handle drag leave event
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
     }
     /**
-     * Set up drag and drop functionality
+     * Handle drop event
      */
-    setupDragAndDrop() {
-        document.addEventListener('dragover', this.handleDragOver.bind(this));
-        document.addEventListener('dragleave', this.handleDragLeave.bind(this));
-        document.addEventListener('drop', this.handleDrop.bind(this));
+    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();
     }
     /**
-     * Remove drag and drop listeners
+     * Validate file
      */
-    removeDragAndDropListeners() {
-        document.removeEventListener('dragover', this.handleDragOver.bind(this));
-        document.removeEventListener('dragleave', this.handleDragLeave.bind(this));
-        document.removeEventListener('drop', this.handleDrop.bind(this));
+    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;
     }
     /**
-     * Set up file input change listeners
+     * Process upload queue
      */
-    setupFileInputListeners() {
-        // Listen for file input change events globally
-        document.addEventListener('change', this.handleFileInputChange.bind(this));
+    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();
+            }
+        }
     }
     /**
-     * Remove file input listeners
+     * Upload multiple files with group ID
      */
-    removeFileInputListeners() {
-        document.removeEventListener('change', this.handleFileInputChange.bind(this));
+    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);
+            }
+        });
     }
     /**
-     * Handle file input change events
+     * Upload files with group ID
      */
-    handleFileInputChange(event) {
-        const target = event.target;
-        console.log('🔍 [FloatingFileUploader] File input change event detected:', {
-            type: target.type,
-            filesLength: target.files?.length || 0,
-            element: target
+    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);
+                    }
+                }
+            });
         });
-        // Check if this is a file input with files
-        if (target.type === 'file' && target.files && target.files.length > 0) {
-            console.log('📁 [FloatingFileUploader] File input change detected:', target.files.length, 'files');
-            // Check if the input has a data-user-id attribute for user context
-            const userId = target.getAttribute('data-user-id');
-            if (userId && userId !== this.currentUserId()) {
-                this.setCurrentUserId(userId);
-            }
-            // Handle the files
-            this.handleFiles(Array.from(target.files));
-            // Reset the input to allow selecting the same files again
-            target.value = '';
-        }
     }
     /**
-     * Handle drag over event
+     * Handle multiple upload completion
      */
-    handleDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Show floating uploader when files are dragged over
-        if (event.dataTransfer?.types.includes('Files')) {
-            this.showWithAnimation();
+    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
+            });
         }
     }
     /**
-     * Handle drag leave event
+     * Upload next file in queue (single file mode)
      */
-    handleDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Only hide if leaving the entire document
-        if (!event.relatedTarget || event.relatedTarget === document.body) {
-            this.updateVisibility();
+    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);
+            }
+        });
     }
     /**
-     * Handle drop event
+     * Update upload progress
      */
-    handleDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.handleFiles(Array.from(files));
-        }
+    updateUploadProgress(fileId, progress) {
+        this.uploadQueue.update(queue => queue.map(upload => upload.fileId === fileId
+            ? { ...upload, progress }
+            : upload));
     }
     /**
-     * Handle files from drag and drop or file input
+     * Update upload status
      */
-    handleFiles(files) {
-        console.log('📁 [FloatingFileUploader] Handling files:', files.length);
-        // Use handleExternalFiles to process the files
-        this.handleExternalFiles(files, this.currentUserId());
+    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 visibility - simplified for notification only
+     * Update upload status by cyfm_temp_unique_id
      */
-    updateVisibility() {
-        // This is just a notification component now
-        // The actual uploads are handled by the global uploader
+    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;
+        });
     }
     /**
-     * Show with animation
+     * Handle upload error
      */
-    showWithAnimation() {
-        console.log('🎬 [FloatingFileUploader] showWithAnimation called - setting isVisible to true');
-        this.isAnimating.set(true);
-        this.isVisible.set(true);
-        // Remove animation class after animation completes
-        setTimeout(() => {
-            this.isAnimating.set(false);
-            console.log('🎬 [FloatingFileUploader] Animation completed, isVisible:', this.isVisible());
-        }, 300);
+    handleUploadError(error, fileId) {
+        if (fileId) {
+            this.updateUploadStatus(fileId, 'error', 0, error);
+            this.uploadError.emit({ fileId, error });
+        }
+        this.isUploading.set(false);
     }
     /**
-     * Hide with animation
+     * Cancel upload
      */
-    hideWithAnimation() {
-        this.isAnimating.set(true);
-        // Wait for animation to complete before hiding
+    cancelUpload(fileId) {
+        this.updateUploadStatus(fileId, 'cancelled', 0);
+        this.uploadCancelled.emit(fileId);
+        // Remove from queue after a delay
         setTimeout(() => {
-            this.isVisible.set(false);
-            this.isAnimating.set(false);
-        }, 300);
+            this.uploadQueue.update(queue => queue.filter(upload => upload.fileId !== fileId));
+        }, 1000);
     }
     /**
-     * Toggle minimize state
+     * Retry upload
      */
-    toggleMinimize() {
-        this.isMinimized.set(!this.isMinimized());
+    retryUpload(fileId) {
+        this.updateUploadStatus(fileId, 'pending', 0);
+        this.processUploadQueue();
     }
     /**
-     * Close the floating uploader
+     * Remove upload from queue
      */
-    close() {
-        this.hideWithAnimation();
+    removeUpload(fileId) {
+        this.uploadQueue.update(queue => queue.filter(upload => upload.fileId !== fileId));
     }
     /**
-     * Get upload summary text
+     * Clear completed uploads
      */
-    getUploadSummary() {
-        const queueLength = this.uploadQueue().length;
-        const activeCount = this.activeUploads().size;
-        const completed = this.completedUploads().length;
-        const failed = this.failedUploads().length;
-        if (activeCount > 0) {
-            return `${activeCount} uploading`;
-        }
-        else if (completed > 0 && failed === 0) {
-            return `${completed} completed`;
-        }
-        else if (failed > 0) {
-            return `${completed} completed, ${failed} failed`;
-        }
-        else if (queueLength > 0) {
-            return `${queueLength} pending`;
-        }
-        return 'No uploads';
+    clearCompleted() {
+        this.uploadQueue.update(queue => queue.filter(upload => upload.status !== 'completed'));
     }
     /**
-     * Get overall progress percentage
+     * Clear all uploads
      */
-    getOverallProgress() {
-        const activeUploads = this.activeUploads();
-        if (activeUploads.size === 0)
-            return 0;
-        const totalProgress = Array.from(activeUploads.values()).reduce((sum, upload) => sum + upload.percentage, 0);
-        return Math.round(totalProgress / activeUploads.size);
+    clearAll() {
+        this.uploadQueue.set([]);
+        this.currentGroupId.set(null);
     }
     /**
-     * Get status icon based on upload stage
+     * Get status icon
      */
-    getStatusIcon(stage) {
-        switch (stage) {
-            case 'reading': return 'schedule';
+    getStatusIcon(status) {
+        switch (status) {
+            case 'pending': return 'schedule';
             case 'uploading': return 'cloud_upload';
-            case 'complete': return 'check_circle';
+            case 'completed': return 'check_circle';
             case 'error': return 'error';
+            case 'cancelled': return 'cancel';
             default: return 'help';
         }
     }
     /**
-     * Get status class based on upload stage
+     * Get status class
      */
-    getStatusClass(stage) {
-        switch (stage) {
-            case 'reading': return 'status-pending';
+    getStatusClass(status) {
+        switch (status) {
+            case 'pending': return 'status-pending';
             case 'uploading': return 'status-uploading';
-            case 'complete': return 'status-completed';
+            case 'completed': return 'status-completed';
             case 'error': return 'status-error';
+            case 'cancelled': return 'status-cancelled';
             default: return 'status-unknown';
         }
     }
     /**
-     * Cancel upload
+     * Get file size display
      */
-    cancelUpload(fileId) {
-        console.log('🚫 [FloatingFileUploader] Cancelling upload:', fileId);
-        this.fileManagerService.cancelUpload(fileId);
+    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];
     }
     /**
-     * Get file name from file ID (extract from the ID format)
+     * Generate unique file ID - this should match the service's generateFileId method
+     * The service uses: ${file.name}_${file.size}_${Date.now()}
      */
-    getFileNameFromId(fileId) {
-        // Extract filename from the fileId format: filename_size_timestamp
-        const parts = fileId.split('_');
-        if (parts.length >= 3) {
-            // Remove the last two parts (size and timestamp) to get the filename
-            return parts.slice(0, -2).join('_');
-        }
-        return fileId;
+    generateFileId(file) {
+        return `${file.name}_${file.size}_${Date.now()}`;
     }
     /**
-     * Set current user ID
+     * Convert IFileUploadRequest to FileUploadOptions
      */
-    setCurrentUserId(userId) {
-        this.currentUserId.set(userId);
-        this.fileManagerService.setUserId(userId);
+    convertToFileUploadOptions(request) {
+        return {
+            altText: request.altText,
+            userId: request.userId,
+            permissions: request.permissions,
+            tags: request.tags,
+            groupId: request.groupId
+        };
     }
     /**
-     * Public method to handle files from external sources
-     * This can be called by other components to trigger the floating uploader
+     * Trigger file input click
      */
-    handleExternalFiles(files, userId) {
-        console.log('📁 [FloatingFileUploader] External files received:', files.length, 'files');
-        // Set user ID if provided
-        if (userId && userId !== this.currentUserId()) {
-            this.setCurrentUserId(userId);
+    triggerFileInput() {
+        const fileInput = document.getElementById('global-file-input');
+        if (fileInput) {
+            fileInput.click();
         }
-        // Upload files using file manager service
-        // The file manager service will handle adding to its queue and the effect will show the floating uploader
-        files.forEach((file, index) => {
-            console.log(`📁 [FloatingFileUploader] Starting upload for file ${index + 1}/${files.length}:`, file.name);
-            this.fileManagerService.uploadFile(file, {
-                userId: this.currentUserId(),
-                permissions: ['read', 'write'],
-                tags: []
-            })
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    console.log('✅ [FloatingFileUploader] Upload completed:', response);
-                },
-                error: (error) => {
-                    console.error('❌ [FloatingFileUploader] Upload failed:', error);
-                }
-            });
-        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    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: CideEleFloatingFileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleGlobalFileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
+            args: [{ selector: 'cide-ele-global-file-uploader', standalone: true, imports: [
                         CommonModule,
+                        CideEleButtonComponent,
                         CideIconComponent
-                    ], template: "<!-- Floating File Uploader Container -->\r\n@if (isVisible()) {\r\n<div class=\"floating-uploader\" \r\n     [class.minimized]=\"isMinimized()\" \r\n     [class.animating]=\"isAnimating()\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"uploader-header\">\r\n    <div class=\"header-left\">\r\n      <div class=\"upload-icon\">\r\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\r\n      </div>\r\n      <div class=\"upload-info\">\r\n        <div class=\"upload-title\">File Upload</div>\r\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\r\n      </div>\r\n    </div>\r\n    \r\n    <div class=\"header-actions\">\r\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\r\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\r\n      </button>\r\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\r\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Content (hidden when minimized) -->\r\n  @if (!isMinimized()) {\r\n  <div class=\"uploader-content\">\r\n    \r\n    <!-- Overall Progress Bar -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"overall-progress\">\r\n      <div class=\"progress-bar\">\r\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\r\n      </div>\r\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\r\n    </div>\r\n    }\r\n\r\n    <!-- Upload Queue - Show files from file manager service -->\r\n    @if (uploadQueue().length > 0 || activeUploads().size > 0) {\r\n    <div class=\"upload-queue\">\r\n      <!-- Show files in queue (pending) -->\r\n      @for (fileId of uploadQueue(); track fileId) {\r\n      <div class=\"upload-item status-pending\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">schedule</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(fileId) }}</div>\r\n            <div class=\"file-status\">\r\n              <span class=\"text-yellow-600\">Waiting...</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"upload-actions\">\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      }\r\n      \r\n      <!-- Show active uploads -->\r\n      @for (entry of activeUploads() | keyvalue; track entry.key) {\r\n      <div class=\"upload-item\" [class]=\"getStatusClass(entry.value.stage)\">\r\n        <div class=\"file-info\">\r\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(entry.value.stage) }}</cide-ele-icon>\r\n          <div class=\"file-details\">\r\n            <div class=\"file-name\">{{ getFileNameFromId(entry.key) }}</div>\r\n            <div class=\"file-status\">\r\n              @switch (entry.value.stage) {\r\n              @case ('reading') {\r\n              <span class=\"text-yellow-600\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"text-blue-600\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"text-green-600\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"text-red-600\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (for uploading files) -->\r\n        @if (entry.value.stage === 'uploading') {\r\n        <div class=\"file-progress\">\r\n          <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width.%]=\"entry.value.percentage\"></div>\r\n          </div>\r\n          <span class=\"progress-text\">{{ entry.value.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"upload-actions\">\r\n          @switch (entry.value.stage) {\r\n          @case ('reading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(entry.key)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"action-btn success-btn\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], 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);
+    groupId;
+    userId;
+    showIcon = true;
+    filesSelected = new EventEmitter();
+    triggerIcon;
+    ngOnInit() {
+        this.setupTrigger();
+    }
+    ngOnDestroy() {
+        this.removeTrigger();
+    }
+    setupTrigger() {
+        const element = this.elementRef.nativeElement;
+        if (element.type !== 'file') {
+            console.warn('⚠️ [FloatingUploadTrigger] Directive should only be used on file input elements');
+            return;
+        }
+        // Add change event listener
+        element.addEventListener('change', this.onFileChange.bind(this));
+        // Add floating uploader trigger icon if enabled
+        if (this.showIcon) {
+            this.addTriggerIcon();
+        }
+    }
+    removeTrigger() {
+        const element = this.elementRef.nativeElement;
+        element.removeEventListener('change', this.onFileChange.bind(this));
+        if (this.triggerIcon) {
+            this.triggerIcon.remove();
+        }
+    }
+    onFileChange(event) {
+        const target = event.target;
+        const files = target.files;
+        if (files && files.length > 0) {
+            console.log('📁 [FloatingUploadTrigger] Files selected:', files.length);
+            // Show floating uploader
+            this.floatingUploader.showUploader(this.groupId);
+            // Handle files through floating uploader
+            this.floatingUploader.handleExternalFiles(Array.from(files), this.userId, this.groupId);
+            // Emit files selected event
+            this.filesSelected.emit(Array.from(files));
+        }
+    }
+    addTriggerIcon() {
+        const element = this.elementRef.nativeElement;
+        const container = element.parentElement;
+        if (!container)
+            return;
+        // Create trigger icon
+        this.triggerIcon = document.createElement('button');
+        this.triggerIcon.type = 'button';
+        this.triggerIcon.className = 'floating-upload-trigger-icon';
+        this.triggerIcon.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+      </svg>
+    `;
+        this.triggerIcon.title = 'View upload progress';
+        this.triggerIcon.style.cssText = `
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      padding: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+    `;
+        // Make container relative positioned
+        container.style.position = 'relative';
+        // Add click handler to show floating uploader
+        this.triggerIcon.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.floatingUploader.showUploader(this.groupId);
+        });
+        // Insert icon after the input
+        element.parentNode?.insertBefore(this.triggerIcon, element.nextSibling);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFloatingUploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideFloatingUploadTriggerDirective, isStandalone: true, selector: "[cideFloatingUploadTrigger]", inputs: { groupId: "groupId", userId: "userId", showIcon: "showIcon" }, outputs: { filesSelected: "filesSelected" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFloatingUploadTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cideFloatingUploadTrigger]',
+                    standalone: true
+                }]
+        }], propDecorators: { groupId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], filesSelected: [{
+                type: Output
+            }] } });
 
 class CideTextareaComponent {
     label = '';
@@ -9063,5 +9229,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, 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, 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 };
 //# sourceMappingURL=cloud-ide-element.mjs.map