cloud-ide-element 1.0.107 → 1.0.110

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, effect, afterRenderEffect, afterNextRender, ElementRef, Directive, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, effect, Directive, ElementRef, viewChild } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, takeUntil, distinctUntilChanged, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
@@ -2633,6 +2633,7 @@ class CideEleFileManagerService {
     _uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "_uploadQueue" }] : []));
     _activeUploads = signal(new Map(), ...(ngDevMode ? [{ debugName: "_activeUploads" }] : []));
     _fetchedFiles = signal(new Map(), ...(ngDevMode ? [{ debugName: "_fetchedFiles" }] : [])); // Group ID -> Files mapping
+    _fileIdMapping = signal(new Map(), ...(ngDevMode ? [{ debugName: "_fileIdMapping" }] : [])); // Temp ID -> Actual ID mapping
     _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
     // Angular 20: Computed values
     baseUrl = this._baseUrl.asReadonly();
@@ -2650,6 +2651,21 @@ class CideEleFileManagerService {
         this._fetchedFiles().forEach(files => total += files.length);
         return total;
     }, ...(ngDevMode ? [{ debugName: "totalFetchedFiles" }] : []));
+    // Optimized computed properties for file counting by group
+    getFileCountByGroup = computed(() => {
+        const countMap = new Map();
+        // Count active uploads by group
+        this._activeUploads().forEach((upload, fileId) => {
+            if (upload.groupId) {
+                countMap.set(upload.groupId, (countMap.get(upload.groupId) || 0) + 1);
+            }
+        });
+        // Add fetched files by group
+        this._fetchedFiles().forEach((files, groupId) => {
+            countMap.set(groupId, (countMap.get(groupId) || 0) + files.length);
+        });
+        return countMap;
+    }, ...(ngDevMode ? [{ debugName: "getFileCountByGroup" }] : []));
     serviceState = computed(() => ({
         isUploading: this._isUploading(),
         uploadQueue: this._uploadQueue(),
@@ -2658,7 +2674,7 @@ class CideEleFileManagerService {
         error: this._error()
     }), ...(ngDevMode ? [{ debugName: "serviceState" }] : []));
     constructor() {
-        console.log('🚀 [FileManagerService] Angular 20 service initialized');
+        // Service initialized
     }
     /**
      * Upload a file with base64 encoding and progress tracking
@@ -2675,9 +2691,7 @@ class CideEleFileManagerService {
         this._isUploading.set(true);
         this._error.set(null);
         this.addToUploadQueue(fileId);
-        console.log('📤 [FileManagerService] Starting upload for:', file.name, 'Size:', file.size, 'bytes');
-        console.log('📤 [FileManagerService] Upload options:', uploadOptions);
-        console.log('📤 [FileManagerService] File ID:', fileId, 'Group ID:', uploadOptions?.groupId);
+        // Upload started for file: ${file.name}
         return new Observable(observer => {
             const reader = new FileReader();
             // Angular 20: Enhanced progress tracking with signals
@@ -2767,13 +2781,18 @@ class CideEleFileManagerService {
                                     percentage: 100,
                                     stage: 'complete'
                                 }, uploadOptions?.groupId);
-                                console.log('✅ [FileManagerService] Upload successful:', event.body);
                                 // Handle the CoreFileManagerInsertUpdateResponse
                                 const response = event.body;
-                                console.log('🔍 [FileManagerService] Upload response received:', response);
-                                console.log('🔍 [FileManagerService] Response success:', response.success);
-                                console.log('🔍 [FileManagerService] Response data:', response.data);
                                 if (response.success) {
+                                    // Map temp file ID to actual file ID from response
+                                    const fileData = response.data?.core_file_manager?.[0];
+                                    const actualFileId = fileData?.cyfm_id;
+                                    if (actualFileId && actualFileId !== fileId) {
+                                        // Store the mapping
+                                        const currentMapping = new Map(this._fileIdMapping());
+                                        currentMapping.set(fileId, actualFileId);
+                                        this._fileIdMapping.set(currentMapping);
+                                    }
                                     observer.next(response);
                                     observer.complete();
                                 }
@@ -2870,21 +2889,8 @@ class CideEleFileManagerService {
     updateUploadProgress(fileId, progress, groupId) {
         const currentUploads = new Map(this._activeUploads());
         const progressWithGroupId = { ...progress, groupId };
-        console.log('📊 [FileManagerService] Updating upload progress:', {
-            fileId,
-            stage: progress.stage,
-            percentage: progress.percentage,
-            groupId: groupId,
-            progressWithGroupId
-        });
         currentUploads.set(fileId, progressWithGroupId);
         this._activeUploads.set(currentUploads);
-        // Debug: Show current active uploads with their group IDs
-        console.log('📊 [FileManagerService] Current active uploads:', Array.from(currentUploads.entries()).map(([id, upload]) => ({
-            fileId: id,
-            stage: upload.stage,
-            groupId: upload.groupId
-        })));
     }
     removeActiveUpload(fileId) {
         const currentUploads = new Map(this._activeUploads());
@@ -2981,16 +2987,21 @@ class CideEleFileManagerService {
      * Signal to trigger floating uploader visibility
      */
     _showFloatingUploader = signal(false, ...(ngDevMode ? [{ debugName: "_showFloatingUploader" }] : []));
+    _triggerGroupId = signal(null, ...(ngDevMode ? [{ debugName: "_triggerGroupId" }] : []));
     showFloatingUploader = this._showFloatingUploader.asReadonly();
+    getTriggerGroupId = this._triggerGroupId.asReadonly();
     /**
-     * Trigger floating uploader to show
+     * Trigger floating uploader to show with group ID
+     * This is the ONLY way to pass group ID to floating uploader
      */
-    triggerFloatingUploaderShow() {
-        console.log('🎬 [FileManagerService] Triggering floating uploader to show groupId');
+    triggerFloatingUploaderShow(groupId) {
+        console.log('🎬 [FileManagerService] Triggering floating uploader to show with groupId:', groupId);
+        this._triggerGroupId.set(groupId || null);
         this._showFloatingUploader.set(true);
         // Reset after a short delay to allow components to react
         setTimeout(() => {
             this._showFloatingUploader.set(false);
+            this._triggerGroupId.set(null);
         }, 100);
     }
     /**
@@ -3000,39 +3011,46 @@ class CideEleFileManagerService {
      */
     getAllFilesForGroup(groupId) {
         const files = [];
-        const fileIds = new Set(); // Track file IDs to prevent duplicates
+        const processedIds = new Set(); // Track all processed IDs (temp and actual)
+        const fileNames = new Set(); // Track file names to prevent duplicates by name
+        const fileIdMapping = this._fileIdMapping();
         // Add active uploads for this group
-        this._activeUploads().forEach((upload, fileId) => {
-            if (upload.groupId === groupId && !fileIds.has(fileId)) {
-                fileIds.add(fileId);
-                files.push({
-                    fileId,
-                    fileName: this.getFileNameFromId(fileId),
-                    stage: upload.stage,
-                    percentage: upload.percentage
-                });
+        this._activeUploads().forEach((upload, tempFileId) => {
+            if (upload.groupId === groupId) {
+                const fileName = this.getFileNameFromId(tempFileId);
+                const actualFileId = fileIdMapping.get(tempFileId) || tempFileId;
+                // Check if we've already processed this file (by actual ID or name)
+                if (!processedIds.has(actualFileId) && !fileNames.has(fileName)) {
+                    processedIds.add(tempFileId); // Track temp ID
+                    processedIds.add(actualFileId); // Track actual ID
+                    fileNames.add(fileName);
+                    files.push({
+                        fileId: tempFileId, // Keep temp ID for UI consistency
+                        fileName,
+                        stage: upload.stage,
+                        percentage: upload.percentage
+                    });
+                }
             }
         });
-        // Add fetched files for this group (only if not already in active uploads)
+        // Add fetched files for this group (only if not already processed)
         const fetchedFiles = this.getFetchedFilesByGroupId(groupId);
         fetchedFiles.forEach(file => {
             const fetchedFileId = file._id;
-            if (!fileIds.has(fetchedFileId)) {
-                fileIds.add(fetchedFileId);
+            const fetchedFileName = file.cyfm_name || 'Unknown file';
+            // Check if this file was already processed (either as temp or actual ID)
+            const isAlreadyProcessed = processedIds.has(fetchedFileId) || fileNames.has(fetchedFileName);
+            if (!isAlreadyProcessed) {
+                processedIds.add(fetchedFileId);
+                fileNames.add(fetchedFileName);
                 files.push({
                     fileId: fetchedFileId,
-                    fileName: file.cyfm_name || 'Unknown file',
+                    fileName: fetchedFileName,
                     stage: 'complete' // Fetched files are already completed
                 });
             }
         });
-        console.log('📊 [FileManagerService] getAllFilesForGroup result:', {
-            groupId,
-            totalFiles: files.length,
-            activeUploads: Array.from(this._activeUploads().entries()).filter(([_, upload]) => upload.groupId === groupId).length,
-            fetchedFiles: fetchedFiles.length,
-            uniqueFileIds: Array.from(fileIds)
-        });
+        // Smart deduplication completed for group: ${groupId}
         return files;
     }
     /**
@@ -3070,14 +3088,47 @@ class CideEleFileManagerService {
             if (upload.stage === 'complete') {
                 currentUploads.delete(fileId);
                 hasChanges = true;
-                console.log('🧹 [FileManagerService] Clearing completed upload:', fileId);
+                // Cleared completed upload
             }
         });
         if (hasChanges) {
             this._activeUploads.set(currentUploads);
-            console.log('🧹 [FileManagerService] Cleared all completed uploads');
+            // Cleared all completed uploads
+        }
+    }
+    /**
+     * Remove a specific completed upload from active uploads
+     */
+    removeCompletedUpload(fileId) {
+        const currentUploads = new Map(this._activeUploads());
+        const upload = currentUploads.get(fileId);
+        if (upload && upload.stage === 'complete') {
+            currentUploads.delete(fileId);
+            this._activeUploads.set(currentUploads);
+            // Also clean up the file ID mapping for this temp ID
+            const currentMapping = new Map(this._fileIdMapping());
+            if (currentMapping.has(fileId)) {
+                currentMapping.delete(fileId);
+                this._fileIdMapping.set(currentMapping);
+                // Cleaned up mapping
+            }
+            // Removed completed upload
         }
     }
+    /**
+     * Optimized method to get file count for a specific group
+     * Uses computed property for better performance
+     */
+    getFileCountForGroup(groupId) {
+        return this.getFileCountByGroup().get(groupId) || 0;
+    }
+    /**
+     * Optimized method to check if group has active uploads
+     */
+    hasActiveUploadsForGroup(groupId) {
+        return Array.from(this._activeUploads().values())
+            .some(upload => upload.groupId === groupId && upload.stage !== 'complete');
+    }
     /**
      * Angular 20: File validation utility
      */
@@ -3322,1877 +3373,1620 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class CideEleFloatingFileUploaderComponent {
-    destroyRef = inject(DestroyRef);
+class CideEleFileInputComponent {
     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" }] : []));
-    // Use file manager service as the single source of truth
-    uploadQueue = computed(() => this.fileManagerService.uploadQueue(), ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
-    activeUploads = computed(() => this.fileManagerService.activeUploads(), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
-    // Computed values based on service state
-    hasUploads = computed(() => this.uploadQueue().length > 0 || this.activeUploads().size > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
-    hasActiveUploads = computed(() => this.uploadQueue().length > 0 || Array.from(this.activeUploads().values()).some(upload => upload.stage !== 'complete'), ...(ngDevMode ? [{ debugName: "hasActiveUploads" }] : []));
-    pendingUploads = computed(() => this.uploadQueue().filter(fileId => !this.activeUploads().has(fileId)), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
-    activeUploadsLocal = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'reading' || upload.stage === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploadsLocal" }] : []));
-    completedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'complete'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
-    failedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
-    // Get all files for the current group (computed property for reactivity)
-    allFilesForGroup = computed(() => {
-        const groupId = this.currentGroupId();
-        if (!groupId) {
-            console.log('🔍 [FloatingFileUploader] No group ID set, returning empty array');
-            return [];
-        }
-        console.log("groupId groupId", groupId);
-        const files = this.fileManagerService.getAllFilesForGroup(groupId);
-        const fetchedFiles = this.fileManagerService.getFetchedFilesByGroupId(groupId);
-        console.log("fetchedFiles fetchedFiles", fetchedFiles);
-        const activeUploads = Array.from(this.fileManagerService.activeUploads().entries()).filter(([_, upload]) => upload.groupId === groupId);
-        console.log('🔍 [FloatingFileUploader] allFilesForGroup computed - DETAILED:', {
-            groupId,
-            filesCount: files.length,
-            fetchedFilesCount: fetchedFiles.length,
-            activeUploadsCount: activeUploads.length,
-            files: files.map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage })),
-            fetchedFiles: fetchedFiles.map(f => ({ id: f._id, name: f.cyfm_name })),
-            activeUploads: activeUploads.map(([id, upload]) => ({ id, stage: upload.stage, groupId: upload.groupId }))
-        });
-        return files;
-    }, ...(ngDevMode ? [{ debugName: "allFilesForGroup" }] : []));
-    // Check if there are any files to display (active uploads OR fetched files for current group)
-    hasFilesToShow = computed(() => {
-        const hasActiveUploads = this.hasActiveUploads();
-        const allFiles = this.allFilesForGroup();
-        const hasFiles = allFiles.length > 0;
-        const currentGroupId = this.currentGroupId();
-        console.log('🔍 [FloatingFileUploader] hasFilesToShow check:', {
-            hasActiveUploads,
-            allFilesCount: allFiles.length,
-            hasFiles,
-            currentGroupId,
-            result: hasActiveUploads || hasFiles
-        });
-        return hasActiveUploads || hasFiles;
-    }, ...(ngDevMode ? [{ debugName: "hasFilesToShow" }] : []));
-    // Animation states
-    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
-    // Drag functionality
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
-    dragOffset = { x: 0, y: 0 };
-    // File drag and drop functionality
+    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 = {};
+    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" }] : []));
-    // Window resize handler reference for cleanup
-    windowResizeHandler;
-    // Cached dimensions for performance
-    cachedDimensions = { width: 320, height: 200 };
-    lastDimensionUpdate = 0;
+    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
+    hasEverUploaded = signal(false, ...(ngDevMode ? [{ debugName: "hasEverUploaded" }] : [])); // Track if this component has ever uploaded files
+    // 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" }] : []));
+    // Optimized computed values - only calculate when needed
+    totalFileSize = computed(() => {
+        const files = this.files();
+        return files ? Array.from(files).reduce((total, file) => total + file.size, 0) : 0;
+    }, ...(ngDevMode ? [{ debugName: "totalFileSize" }] : []));
+    fileSizeInMB = computed(() => (this.totalFileSize() / 1048576).toFixed(2), ...(ngDevMode ? [{ debugName: "fileSizeInMB" }] : [])); // 1024^2 = 1048576
+    // 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() {
-        console.log('🚀 [FloatingFileUploader] Component initialized');
-        // Initialize default position
-        this.initializePosition();
-        // Set up effect to show/hide floating uploader based on service state
-        effect(() => {
-            const hasActiveUploads = this.hasActiveUploads();
-            const hasUploads = this.hasUploads();
-            const hasFilesToShow = this.hasFilesToShow();
-            console.log('🔄 [FloatingFileUploader] Service state changed:', {
-                hasActiveUploads,
-                hasUploads,
-                hasFilesToShow,
-                queueLength: this.uploadQueue().length,
-                activeUploadsCount: this.activeUploads().size,
-                activeUploads: Array.from(this.activeUploads().entries())
-            });
-            // Show floating uploader when there are active uploads OR files to show
-            if (hasActiveUploads && !this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to active uploads');
-                this.showWithAnimation();
-            }
-        });
-        // Set up effect to listen for manual show trigger from service
-        effect(() => {
-            const shouldShow = this.fileManagerService.showFloatingUploader();
-            const hasFilesToShow = this.hasFilesToShow();
-            if (shouldShow && !this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to service trigger');
-                this.showWithAnimation();
-            }
-            else if (shouldShow && hasFilesToShow && !this.isVisible()) {
-                console.log('👁️ [FloatingFileUploader] Showing floating uploader due to files available');
-                this.showWithAnimation();
-            }
-        });
+        // Minimal DOM operations - only when necessary
     }
     ngOnInit() {
-        // Set up drag and drop listeners
-        this.setupDragAndDrop();
-        // Set up file input change listeners
-        this.setupFileInputListeners();
-        // Set up window resize listener
-        this.setupWindowResize();
-    }
-    ngOnDestroy() {
-        console.log('🧹 [FloatingFileUploader] Component destroyed');
-        this.removeDragAndDropListeners();
-        this.removeFileInputListeners();
-        // Clean up window resize listener
-        if (this.windowResizeHandler) {
-            window.removeEventListener('resize', this.windowResizeHandler);
-        }
-    }
-    /**
-     * Set up drag and drop functionality
-     */
-    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));
+        // 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);
     }
-    /**
-     * Remove file input listeners
-     */
-    removeFileInputListeners() {
-        document.removeEventListener('change', this.handleFileInputChange.bind(this));
+    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);
     }
-    /**
-     * 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);
+    writeValue(value) {
+        console.log('📝 [FileInput] writeValue called with:', value);
+        if (typeof value === 'string') {
+            // Check if this is a group ID for multiple files or single file ID
+            if (this.isMultipleFileMode()) {
+                // Multiple file mode - value is group ID
+                console.log('📁 [FileInput] Value is group ID for multiple files:', value);
+                this.groupId.set(value);
+                this.loadFilesFromGroupId(value);
+            }
+            else {
+                // Single file mode - value is file ID
+                console.log('📝 [FileInput] Value is single file ID:', value);
+                this.files.set(null);
+                this.fileNames.set([]);
+                this.clearPreviews();
+                // Fetch file details to get base64 and set preview
+                this.loadFileDetailsFromId(value);
             }
-            // 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
-     */
-    handleDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Show floating uploader when files are dragged over
-        if (event.dataTransfer?.types.includes('Files')) {
-            this.showWithAnimation();
         }
-    }
-    /**
-     * Handle drag leave event
-     */
-    handleDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Only hide if leaving the entire document
-        if (!event.relatedTarget || event.relatedTarget === document.body) {
-            this.updateVisibility();
+        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();
+            // For multiple files, use group ID API to fetch files
+            if (value.length > 1) {
+                const groupId = this.groupId();
+                if (groupId) {
+                    console.log('📁 [FileInput] Multiple files detected, fetching files for group:', groupId);
+                    this.loadFilesFromGroupId(groupId);
+                }
+            }
         }
-    }
-    /**
-     * Handle drop event
-     */
-    handleDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.handleFiles(Array.from(files));
+        else {
+            // Value is null
+            console.log('📝 [FileInput] Value is null');
+            this.files.set(null);
+            this.fileNames.set([]);
+            this.clearPreviews();
         }
     }
-    /**
-     * 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());
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    /**
-     * Close the floating uploader
-     */
-    close() {
-        // Don't clear files from service - just hide the uploader
-        // Files will be fetched from API when "Show Files" is clicked
-        this.hideWithAnimation();
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    /**
-     * Get upload summary text
-     */
-    getUploadSummary() {
-        const pending = this.pendingUploads();
-        const active = this.activeUploadsLocal();
-        const completed = this.completedUploads();
-        const failed = this.failedUploads();
-        if (active.length > 0) {
-            return `${active.length} uploading`;
-        }
-        else if (pending.length > 0) {
-            return `${pending.length} pending`;
-        }
-        else if (completed.length > 0 && failed.length === 0) {
-            return `${completed.length} completed`;
-        }
-        else if (failed.length > 0) {
-            return `${completed.length} completed, ${failed.length} failed`;
-        }
-        return 'No uploads';
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
     }
-    /**
-     * Get overall progress percentage
-     */
-    getOverallProgress() {
-        const allUploads = Array.from(this.activeUploads().values());
-        if (allUploads.length === 0)
-            return 0;
-        const totalProgress = allUploads.reduce((sum, upload) => sum + (upload.percentage || 0), 0);
-        return Math.round(totalProgress / allUploads.length);
+    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)');
     }
-    /**
-     * 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';
+    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();
+        // Note: Floating uploader is now triggered via service in upload methods
+        // 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]);
+            }
         }
-    }
-    /**
-     * 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';
+        else {
+            console.log('⏸️ [FileInput] Auto upload disabled or no files');
         }
     }
-    /**
-     * 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;
+    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);
     }
-    /**
-     * Get all files from service state (pending + active uploads + fetched files)
-     * This method now uses the computed property for consistency
-     */
-    getAllFiles() {
-        return this.allFilesForGroup();
+    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);
+            // Upload progress updated
+            // 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');
+                }
+                // 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('❌ [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%');
+            }
+        });
     }
     /**
-     * Set current user 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
      */
-    setCurrentUserId(userId) {
-        this.currentUserId.set(userId);
-        this.fileManagerService.setUserId(userId);
+    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);
+                }
+            });
+        }
     }
     /**
-     * Public method to handle files from external sources
-     * This can be called by other components to trigger the floating uploader
+     * 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
      */
-    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
+    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);
+        // Mark that this component has ever uploaded files
+        this.hasEverUploaded.set(true);
+        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,
+            isMultiple: true
+        };
         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({
+            const componentId = this.id();
+            console.log(`📤 [FileInput-${componentId}] Uploading file ${index + 1}/${totalFiles}: "${file.name}" with group ID: ${groupId}`);
+            console.log(`📤 [FileInput-${componentId}] Upload data:`, uploadDataWithGroupId);
+            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) => {
-                    console.log('✅ [FloatingFileUploader] Upload completed:', response);
+                    completedUploads++;
+                    console.log(`✅ [FileInput] File ${index + 1}/${totalFiles} uploaded`);
+                    // Check if all files are completed
+                    if (completedUploads + failedUploads === totalFiles) {
+                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
+                    }
                 },
                 error: (error) => {
-                    console.error('❌ [FloatingFileUploader] Upload failed:', 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);
+                    }
                 }
             });
         });
     }
     /**
-     * Manually show the floating uploader
-     * This should always be called with a group ID from the file input component
+     * Handle completion of multiple file upload
      */
-    showUploader(groupId) {
-        console.log('👁️ [FloatingFileUploader] Manually showing uploader', groupId ? `for group: ${groupId}` : 'without group ID');
-        if (!groupId) {
-            console.error('❌ [FloatingFileUploader] No group ID provided. Floating uploader should always be opened with a group ID from the file input component.');
-            return;
+    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.currentGroupId.set(groupId);
-        console.log('🆔 [FloatingFileUploader] Set group ID:', groupId);
-        // Check if we already have files for this group
-        const existingFiles = this.fileManagerService.getAllFilesForGroup(groupId);
-        console.log('🔍 [FloatingFileUploader] Existing files for group:', {
-            groupId,
-            existingFilesCount: existingFiles.length,
-            files: existingFiles.map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage }))
-        });
-        // Always fetch fresh data from API to ensure we have the latest files
+        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);
+    }
+    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 });
+            }
+        });
+    }
+    /**
+     * Check if the component is in multiple file mode
+     */
+    isMultipleFileMode() {
+        // Check if multiple attribute is set or if we have a group ID
+        return this.multiple || this.groupId() !== null;
+    }
+    /**
+     * Load files from group ID using the group API
+     */
+    loadFilesFromGroupId(groupId) {
+        console.log('🔍 [FileInput] Loading files for group ID:', groupId);
+        if (!groupId)
+            return;
         this.fileManagerService.fetchAndStoreFilesByGroupId(groupId)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (files) => {
-                console.log('✅ [FloatingFileUploader] Files fetched and stored:', files.length);
-                // Force show the uploader after files are loaded
-                this.showWithAnimation();
-                // Debug: Check what files are available now using computed property
-                setTimeout(() => {
-                    const allFiles = this.allFilesForGroup();
-                    console.log('🔍 [FloatingFileUploader] Files available after fetch (computed):', {
-                        allFilesCount: allFiles.length,
-                        files: allFiles.map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage })),
-                        hasFilesToShow: this.hasFilesToShow()
-                    });
-                }, 100);
+                console.log('📋 [FileInput] Files loaded for group:', files.length);
+                // Set file names to show count in input
+                if (files && files.length > 0) {
+                    const fileNames = files.map(file => file.file_name || file.name || 'Unknown file');
+                    this.fileNames.set(fileNames);
+                    console.log('📝 [FileInput] File names set for display:', fileNames);
+                }
+                else {
+                    this.fileNames.set([]);
+                }
+                // Files are now stored in service state and will be displayed by floating uploader
             },
             error: (error) => {
-                console.error('❌ [FloatingFileUploader] Failed to fetch files:', error);
-                // Still show the uploader even if fetch fails
-                this.showWithAnimation();
-                // Debug existing files even on error
-                setTimeout(() => {
-                    const allFiles = this.allFilesForGroup();
-                    console.log('🔍 [FloatingFileUploader] Files available after error (computed):', {
-                        allFilesCount: allFiles.length,
-                        files: allFiles.map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage })),
-                        hasFilesToShow: this.hasFilesToShow()
-                    });
-                }, 100);
+                console.error('❌ [FileInput] Failed to load files for group:', error);
+                this.fileNames.set([]);
             }
         });
     }
-    /**
-     * Check if there are any uploads for the current group
-     */
-    hasUploadsForCurrentGroup() {
-        const groupId = this.currentGroupId();
-        if (!groupId) {
-            // If no group filter, show all uploads
-            return this.hasUploads();
+    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();
         }
-        // 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();
     }
     /**
-     * Handle drag over event for file drop
+     * Show floating uploader manually
+     * This can be called to show the floating uploader even when no files are selected
      */
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(true);
+    showUploader() {
+        console.log('👁️ [FileInput] Manually showing floating uploader');
+        if (!this.showFloatingUploaderSignal()) {
+            console.log('⚠️ [FileInput] Floating uploader is disabled');
+            return;
+        }
+        const groupId = this.groupId();
+        if (groupId) {
+            console.log("groupId groupId", groupId);
+            // Fetch files for the group and trigger floating uploader to show
+            this.fileManagerService.fetchAndStoreFilesByGroupId(groupId)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (files) => {
+                    console.log('✅ [FileInput] Files fetched for floating uploader: groupId', files.length);
+                    // Trigger the floating uploader to show via service with group ID
+                    this.fileManagerService.triggerFloatingUploaderShow(groupId);
+                },
+                error: (error) => {
+                    console.error('❌ [FileInput] Failed to fetch files for floating uploader:', error);
+                    // Still trigger show even if fetch fails, with group ID
+                    this.fileManagerService.triggerFloatingUploaderShow(groupId);
+                }
+            });
+        }
+        else {
+            // No group ID, just trigger show
+            this.fileManagerService.triggerFloatingUploaderShow();
+        }
     }
     /**
-     * Handle drag leave event for file drop
+     * Get total upload count from file manager service for this component's group ID
+     * Uses optimized service method for better performance
      */
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
+    getUploadCount() {
+        const groupId = this.groupId();
+        if (!groupId)
+            return this.fileManagerService.activeUploads().size;
+        return this.fileManagerService.getFileCountForGroup(groupId);
     }
     /**
-     * Handle drop event for file drop
+     * Check if there are active uploads for this component's group ID
+     * Uses optimized service method for better performance
      */
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this.handleFileSelection(Array.from(files));
+    hasActiveUploads() {
+        const groupId = this.groupId();
+        if (!groupId) {
+            return Array.from(this.fileManagerService.activeUploads().values()).some(upload => upload.stage !== 'complete');
         }
+        return this.fileManagerService.hasActiveUploadsForGroup(groupId);
     }
     /**
-     * Trigger file input click
+     * Get count of active (non-completed) uploads for this component's group ID
      */
-    triggerFileInput() {
-        const fileInput = document.querySelector('input[type="file"]');
-        if (fileInput) {
-            fileInput.click();
+    getActiveUploadCount() {
+        const groupId = this.groupId();
+        if (!groupId) {
+            return Array.from(this.fileManagerService.activeUploads().values())
+                .filter(upload => upload.stage !== 'complete').length;
         }
+        return this.fileManagerService.getAllFilesForGroup(groupId)
+            .filter(file => file.stage !== 'complete').length;
     }
     /**
-     * Handle file input change
+     * Show floating uploader (alias for showUploader for template)
      */
-    onFileInputChange(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            this.handleFileSelection(Array.from(input.files));
-            input.value = ''; // Reset input
-        }
+    showFloatingUploaderDialog() {
+        this.showUploader();
     }
     /**
-     * Handle file selection from drag/drop or file input
+     * Get dynamic classes for drag and drop zone
      */
-    handleFileSelection(files) {
-        console.log('📁 [FloatingFileUploader] Files selected:', files.map(f => f.name));
-        const groupId = this.currentGroupId();
-        // Group ID must be provided by the file input component
-        if (!groupId) {
-            console.error('❌ [FloatingFileUploader] No group ID available. Files cannot be uploaded without a group ID from the file input component.');
-            return;
+    getDragDropZoneClasses() {
+        const classes = [];
+        if (this.isDragOver()) {
+            classes.push('!tw-border-blue-500', '!tw-bg-blue-100', 'dark:!tw-bg-blue-900/30', 'tw-scale-[1.01]');
         }
-        console.log('🆔 [FloatingFileUploader] Using group ID from file input:', groupId);
-        // Upload files using the file manager service
-        files.forEach((file, index) => {
-            console.log(`📤 [FloatingFileUploader] Uploading file ${index + 1}/${files.length}: ${file.name} to group: ${groupId}`);
-            this.fileManagerService.uploadFile(file, {
-                groupId: groupId,
-                isMultiple: true,
-                userId: this.currentUserId()
-            });
-        });
+        if (this.disabledSignal()) {
+            classes.push('tw-opacity-50', 'tw-cursor-not-allowed', '!hover:tw-border-gray-300', '!hover:tw-bg-gray-50', 'dark:!hover:tw-bg-gray-800');
+        }
+        if (this.hasFiles()) {
+            classes.push('!tw-border-emerald-500', '!tw-bg-emerald-50', 'dark:!tw-bg-emerald-900/20', 'hover:!tw-border-emerald-600', 'hover:!tw-bg-emerald-100', 'dark:hover:!tw-bg-emerald-900/30');
+        }
+        return classes.join(' ');
     }
     /**
-     * Update cached dimensions (throttled for performance)
+     * Get dynamic classes for icon
      */
-    updateCachedDimensions() {
-        const now = Date.now();
-        // Only update dimensions every 100ms to avoid excessive DOM queries
-        if (now - this.lastDimensionUpdate < 100) {
-            return;
+    getIconClasses() {
+        const classes = ['tw-text-gray-500', 'dark:tw-text-gray-400'];
+        if (this.isDragOver()) {
+            classes.push('!tw-text-blue-500', 'dark:!tw-text-blue-400');
         }
-        const uploaderElement = document.querySelector('.floating-uploader');
-        if (uploaderElement) {
-            this.cachedDimensions = {
-                width: uploaderElement.offsetWidth,
-                height: uploaderElement.offsetHeight
-            };
-            this.lastDimensionUpdate = now;
+        else if (this.hasFiles()) {
+            classes.push('!tw-text-emerald-500', 'dark:!tw-text-emerald-400');
         }
+        return classes.join(' ');
     }
     /**
-     * Start dragging the uploader
+     * Get dynamic classes for preview box
      */
-    startDrag(event) {
+    getPreviewBoxClasses() {
+        const classes = [];
+        if (this.isDragOver()) {
+            classes.push('!tw-border-blue-500', '!tw-bg-blue-100', 'dark:!tw-bg-blue-900/30');
+        }
+        if (this.disabledSignal()) {
+            classes.push('tw-opacity-50', 'tw-cursor-not-allowed', '!hover:tw-border-gray-300', '!hover:tw-bg-gray-50', 'dark:!hover:tw-bg-gray-800');
+        }
+        if (this.hasImages()) {
+            classes.push('!tw-border-emerald-500', '!tw-bg-emerald-50', 'dark:!tw-bg-emerald-900/20');
+        }
+        return classes.join(' ');
+    }
+    // Drag and Drop Event Handlers
+    onDragOver(event) {
         event.preventDefault();
-        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        const currentPos = this.position();
-        this.dragOffset = {
-            x: clientX - currentPos.x,
-            y: clientY - currentPos.y
-        };
-        this.isDragging.set(true);
-        // Update cached dimensions at the start of drag for better performance
-        this.updateCachedDimensions();
-        // Add event listeners for drag and end
-        const moveHandler = (e) => this.onDrag(e);
-        const endHandler = () => this.endDrag(moveHandler, endHandler);
-        document.addEventListener('mousemove', moveHandler, { passive: false });
-        document.addEventListener('mouseup', endHandler);
-        document.addEventListener('touchmove', moveHandler, { passive: false });
-        document.addEventListener('touchend', endHandler);
-        // Prevent text selection during drag
-        document.body.style.userSelect = 'none';
+        event.stopPropagation();
+        if (!this.disabledSignal()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag over detected');
+        }
     }
-    /**
-     * Handle dragging movement
-     */
-    onDrag(event) {
-        if (!this.isDragging())
-            return;
+    onDragLeave(event) {
         event.preventDefault();
-        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        const newX = clientX - this.dragOffset.x;
-        const newY = clientY - this.dragOffset.y;
-        // Constrain to viewport bounds using cached dimensions for performance
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Use cached dimensions instead of DOM queries for better performance
-        const uploaderWidth = this.cachedDimensions.width;
-        const uploaderHeight = this.cachedDimensions.height;
-        // Ensure uploader stays within viewport bounds
-        const constrainedX = Math.max(0, Math.min(newX, viewportWidth - uploaderWidth));
-        const constrainedY = Math.max(0, Math.min(newY, viewportHeight - uploaderHeight));
-        this.position.set({ x: constrainedX, y: constrainedY });
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        console.log('🔄 [FileInput] Drag leave detected');
     }
-    /**
-     * End dragging
-     */
-    endDrag(moveHandler, endHandler) {
-        this.isDragging.set(false);
-        // Remove event listeners
-        document.removeEventListener('mousemove', moveHandler);
-        document.removeEventListener('mouseup', endHandler);
-        document.removeEventListener('touchmove', moveHandler);
-        document.removeEventListener('touchend', endHandler);
-        // Restore text selection
-        document.body.style.userSelect = '';
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabledSignal()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag enter detected');
+        }
     }
-    /**
-     * Set up window resize listener to keep uploader within bounds
-     */
-    setupWindowResize() {
-        const handleResize = () => {
-            const currentPos = this.position();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            // Update cached dimensions on resize
-            this.updateCachedDimensions();
-            // Use cached dimensions for performance
-            const uploaderWidth = this.cachedDimensions.width;
-            const uploaderHeight = this.cachedDimensions.height;
-            // Constrain position to new viewport bounds
-            const constrainedX = Math.max(0, Math.min(currentPos.x, viewportWidth - uploaderWidth));
-            const constrainedY = Math.max(0, Math.min(currentPos.y, viewportHeight - uploaderHeight));
-            // Update position if it changed
-            if (constrainedX !== currentPos.x || constrainedY !== currentPos.y) {
-                this.position.set({ x: constrainedX, y: constrainedY });
-                console.log('📐 [FloatingFileUploader] Position adjusted for window resize:', { x: constrainedX, y: constrainedY });
+    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;
             }
-        };
-        window.addEventListener('resize', handleResize);
-        // Store reference for cleanup
-        this.windowResizeHandler = handleResize;
+            // 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);
+            }
+        }
     }
-    /**
-     * Initialize default position
-     */
-    initializePosition() {
-        // Set initial position to bottom-right corner
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Initialize cached dimensions with defaults
-        this.cachedDimensions = { width: 320, height: 300 };
-        // Use cached dimensions for initial positioning
-        const uploaderWidth = this.cachedDimensions.width;
-        const uploaderHeight = this.cachedDimensions.height;
-        // Ensure initial position is within bounds
-        const initialX = Math.max(20, viewportWidth - uploaderWidth - 20);
-        const initialY = Math.max(20, viewportHeight - uploaderHeight - 20);
-        this.position.set({
-            x: initialX,
-            y: initialY
+    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;
+            });
         });
-        // Update dimensions after a short delay to get actual rendered size
-        setTimeout(() => {
-            this.updateCachedDimensions();
-        }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n  {{currentGroupId()}}\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [".floating-uploader{position:fixed;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
-                        CommonModule,
-                        CideIconComponent
-                    ], template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n  {{currentGroupId()}}\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [".floating-uploader{position:fixed;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
-        }], ctorParameters: () => [] });
-
-class CideEleFileInputComponent {
-    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
-    hasEverUploaded = signal(false, ...(ngDevMode ? [{ debugName: "hasEverUploaded" }] : [])); // Track if this component has ever uploaded files
-    // 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') {
-            // Check if this is a group ID for multiple files or single file ID
-            if (this.isMultipleFileMode()) {
-                // Multiple file mode - value is group ID
-                console.log('📁 [FileInput] Value is group ID for multiple files:', value);
-                this.groupId.set(value);
-                this.loadFilesFromGroupId(value);
-            }
-            else {
-                // Single file mode - value is file ID
-                console.log('📝 [FileInput] Value is single 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();
-            // For multiple files, use group ID API to fetch files
-            if (value.length > 1) {
-                const groupId = this.groupId();
-                if (groupId) {
-                    console.log('📁 [FileInput] Multiple files detected, fetching files for group:', groupId);
-                    this.loadFilesFromGroupId(groupId);
-                }
-            }
-        }
-        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());
+    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(selectedFiles);
-        this.fileChange.emit(selectedFiles);
+        this.onChange(files);
+        this.fileChange.emit(files);
         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());
-        }
+        // Note: Floating uploader is now triggered via service in upload methods
         // Auto upload if enabled
-        if (this.autoUploadSignal() && selectedFiles && selectedFiles.length > 0) {
+        if (this.autoUploadSignal() && files.length > 0) {
             if (this.multipleSignal()) {
-                console.log('🚀 [FileInput] Auto upload enabled for multiple files mode:', selectedFiles.length, 'files');
-                this.uploadMultipleFiles(Array.from(selectedFiles));
+                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:', selectedFiles[0].name);
-                this.uploadFile(selectedFiles[0]);
+                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');
         }
     }
-    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);
+    isRequired() {
+        return this.requiredSignal();
     }
-    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);
+    /**
+     * 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", 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
             }
-        }).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');
-                }
-                // 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);
-                    }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\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=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\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=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\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=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\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=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\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=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [""], 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=\"tw-flex tw-flex-col tw-gap-2\">\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=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\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=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\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=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\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=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\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=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> " }]
+        }], 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
+            }], showFloatingUploader: [{
+                type: Input
+            }], floatingUploaderGroupId: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], uploadSuccess: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], uploadProgressChange: [{
+                type: Output
+            }] } });
+
+class CideEleFloatingFileUploaderComponent {
+    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" }] : []));
+    currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
+    // Use file manager service as the single source of truth
+    uploadQueue = computed(() => this.fileManagerService.uploadQueue(), ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
+    activeUploads = computed(() => this.fileManagerService.activeUploads(), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
+    // Computed values based on service state
+    hasUploads = computed(() => this.uploadQueue().length > 0 || this.activeUploads().size > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    hasActiveUploads = computed(() => this.uploadQueue().length > 0 || Array.from(this.activeUploads().values()).some(upload => upload.stage !== 'complete'), ...(ngDevMode ? [{ debugName: "hasActiveUploads" }] : []));
+    pendingUploads = computed(() => this.uploadQueue().filter(fileId => !this.activeUploads().has(fileId)), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    activeUploadsLocal = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'reading' || upload.stage === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploadsLocal" }] : []));
+    completedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'complete'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => Array.from(this.activeUploads().values()).filter(upload => upload.stage === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
+    // Get all files for the current group (computed property for reactivity)
+    allFilesForGroup = computed(() => {
+        const groupId = this.currentGroupId();
+        if (!groupId)
+            return [];
+        return this.fileManagerService.getAllFilesForGroup(groupId);
+    }, ...(ngDevMode ? [{ debugName: "allFilesForGroup" }] : []));
+    // Check if there are any files to display (active uploads OR fetched files for current group)
+    hasFilesToShow = computed(() => {
+        return this.hasActiveUploads() || this.allFilesForGroup().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasFilesToShow" }] : []));
+    // Animation states
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    // Drag functionality
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    dragOffset = { x: 0, y: 0 };
+    // File drag and drop functionality
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    // Window resize handler reference for cleanup
+    windowResizeHandler;
+    // Cached dimensions for performance
+    cachedDimensions = { width: 320, height: 200 };
+    lastDimensionUpdate = 0;
+    constructor() {
+        console.log('🚀 [FloatingFileUploader] Component initialized');
+        // Initialize default position
+        this.initializePosition();
+        // Consolidated effect for all visibility logic - SINGLE SOURCE OF TRUTH
+        effect(() => {
+            const hasActiveUploads = this.hasActiveUploads();
+            const shouldShow = this.fileManagerService.showFloatingUploader();
+            const triggerGroupId = this.fileManagerService.getTriggerGroupId();
+            const isCurrentlyVisible = this.isVisible();
+            // Show due to active uploads
+            if (hasActiveUploads && !isCurrentlyVisible) {
+                this.showWithAnimation();
+                return;
+            }
+            // Show due to manual trigger
+            if (shouldShow && !isCurrentlyVisible) {
+                if (triggerGroupId) {
+                    this.currentGroupId.set(triggerGroupId);
+                    // Fetch files for this group
+                    this.fileManagerService.fetchAndStoreFilesByGroupId(triggerGroupId)
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe({
+                        next: () => this.showWithAnimation(),
+                        error: () => this.showWithAnimation() // Show anyway
+                    });
                 }
                 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.showWithAnimation();
                 }
-                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%');
             }
         });
     }
+    ngOnInit() {
+        // Set up drag and drop listeners
+        this.setupDragAndDrop();
+        // Set up file input change listeners
+        this.setupFileInputListeners();
+        // Set up window resize listener
+        this.setupWindowResize();
+    }
+    ngOnDestroy() {
+        console.log('🧹 [FloatingFileUploader] Component destroyed');
+        this.removeDragAndDropListeners();
+        this.removeFileInputListeners();
+        // Clean up window resize listener
+        if (this.windowResizeHandler) {
+            window.removeEventListener('resize', this.windowResizeHandler);
+        }
+    }
     /**
-     * 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
+     * Set up drag and drop functionality
      */
-    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);
-                }
-            });
-        }
+    setupDragAndDrop() {
+        document.addEventListener('dragover', this.handleDragOver.bind(this));
+        document.addEventListener('dragleave', this.handleDragLeave.bind(this));
+        document.addEventListener('drop', this.handleDrop.bind(this));
     }
     /**
-     * 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
+     * Remove drag and drop listeners
      */
-    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);
-        // Mark that this component has ever uploaded files
-        this.hasEverUploaded.set(true);
-        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,
-            isMultiple: true
-        };
-        files.forEach((file, index) => {
-            const componentId = this.id();
-            console.log(`📤 [FileInput-${componentId}] Uploading file ${index + 1}/${totalFiles}: "${file.name}" with group ID: ${groupId}`);
-            console.log(`📤 [FileInput-${componentId}] Upload data:`, uploadDataWithGroupId);
-            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 (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);
-                    }
-                }
-            });
-        });
+    removeDragAndDropListeners() {
+        document.removeEventListener('dragover', this.handleDragOver.bind(this));
+        document.removeEventListener('dragleave', this.handleDragLeave.bind(this));
+        document.removeEventListener('drop', this.handleDrop.bind(this));
     }
     /**
-     * Handle completion of multiple file upload
+     * Set up file input change listeners
      */
-    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');
-            // 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);
+    setupFileInputListeners() {
+        // Listen for file input change events globally
+        document.addEventListener('change', this.handleFileInputChange.bind(this));
     }
-    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);
-            }
-        });
+    /**
+     * Remove file input listeners
+     */
+    removeFileInputListeners() {
+        document.removeEventListener('change', this.handleFileInputChange.bind(this));
     }
-    clearPreviews() {
-        // Revoke object URLs to prevent memory leaks
-        this.previewUrls().forEach(url => {
-            if (url.startsWith('blob:')) {
-                URL.revokeObjectURL(url);
-            }
+    /**
+     * 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
         });
-        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 });
+        // 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 = '';
+        }
     }
     /**
-     * Check if the component is in multiple file mode
+     * Handle drag over event
      */
-    isMultipleFileMode() {
-        // Check if multiple attribute is set or if we have a group ID
-        return this.multiple || this.groupId() !== null;
+    handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Show floating uploader when files are dragged over
+        if (event.dataTransfer?.types.includes('Files')) {
+            this.showWithAnimation();
+        }
     }
     /**
-     * Load files from group ID using the group API
+     * Handle drag leave event
      */
-    loadFilesFromGroupId(groupId) {
-        console.log('🔍 [FileInput] Loading files for group ID:', groupId);
-        if (!groupId)
-            return;
-        this.fileManagerService.fetchAndStoreFilesByGroupId(groupId)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (files) => {
-                console.log('📋 [FileInput] Files loaded for group:', files.length);
-                // Set file names to show count in input
-                if (files && files.length > 0) {
-                    const fileNames = files.map(file => file.file_name || file.name || 'Unknown file');
-                    this.fileNames.set(fileNames);
-                    console.log('📝 [FileInput] File names set for display:', fileNames);
-                }
-                else {
-                    this.fileNames.set([]);
-                }
-                // Files are now stored in service state and will be displayed by floating uploader
-            },
-            error: (error) => {
-                console.error('❌ [FileInput] Failed to load files for group:', error);
-                this.fileNames.set([]);
-            }
-        });
+    handleDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Only hide if leaving the entire document
+        if (!event.relatedTarget || event.relatedTarget === document.body) {
+            this.updateVisibility();
+        }
     }
-    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));
+    /**
+     * Handle drop event
+     */
+    handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.handleFiles(Array.from(files));
+        }
     }
-    isImageFileFromType(fileType) {
-        if (!fileType)
-            return false;
-        return fileType.startsWith('image/');
+    /**
+     * 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());
     }
-    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);
-        }
+    /**
+     * Update visibility - simplified for notification only
+     */
+    updateVisibility() {
+        // This is just a notification component now
+        // The actual uploads are handled by the global uploader
     }
-    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);
-        }
+    /**
+     * 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);
     }
-    triggerFileSelect() {
-        const fileInput = document.getElementById('cide-file-input-' + this.id());
-        if (fileInput && !this.disabledSignal()) {
-            fileInput.click();
-        }
+    /**
+     * 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);
     }
     /**
-     * Show floating uploader manually
-     * This can be called to show the floating uploader even when no files are selected
+     * Toggle minimize state
      */
-    showUploader() {
-        console.log('👁️ [FileInput] Manually showing floating uploader');
-        if (!this.showFloatingUploaderSignal()) {
-            console.log('⚠️ [FileInput] Floating uploader is disabled');
-            return;
+    toggleMinimize() {
+        this.isMinimized.set(!this.isMinimized());
+    }
+    /**
+     * Close the floating uploader
+     */
+    close() {
+        // Don't clear files from service - just hide the uploader
+        // Files will be fetched from API when "Show Files" is clicked
+        this.hideWithAnimation();
+    }
+    /**
+     * Get upload summary text
+     */
+    getUploadSummary() {
+        const pending = this.pendingUploads();
+        const active = this.activeUploadsLocal();
+        const completed = this.completedUploads();
+        const failed = this.failedUploads();
+        if (active.length > 0) {
+            return `${active.length} uploading`;
         }
-        const groupId = this.groupId();
-        if (groupId) {
-            console.log("groupId groupId", groupId);
-            // Fetch files for the group and trigger floating uploader to show
-            this.fileManagerService.fetchAndStoreFilesByGroupId(groupId)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (files) => {
-                    console.log('✅ [FileInput] Files fetched for floating uploader: groupId', files.length);
-                    // Trigger the floating uploader to show via service
-                    this.fileManagerService.triggerFloatingUploaderShow();
-                },
-                error: (error) => {
-                    console.error('❌ [FileInput] Failed to fetch files for floating uploader:', error);
-                    // Still trigger show even if fetch fails
-                    this.fileManagerService.triggerFloatingUploaderShow();
-                }
-            });
+        else if (pending.length > 0) {
+            return `${pending.length} pending`;
         }
-        else {
-            // No group ID, just trigger show
-            this.fileManagerService.triggerFloatingUploaderShow();
+        else if (completed.length > 0 && failed.length === 0) {
+            return `${completed.length} completed`;
         }
-        // Fallback to direct component access if available
-        if (this.floatingUploader) {
-            console.log('👁️ [FileInput] Using direct component access as fallback');
-            this.floatingUploader.showUploader(groupId || undefined);
+        else if (failed.length > 0) {
+            return `${completed.length} completed, ${failed.length} failed`;
         }
+        return 'No uploads';
     }
     /**
-     * Get total upload count from file manager service for this component's group ID
+     * Get overall progress percentage
      */
-    getUploadCount() {
-        const groupId = this.groupId();
-        const componentId = this.id();
-        if (!groupId) {
-            console.log(`📊 [FileInput-${componentId}] No group ID, returning all uploads count:`, this.fileManagerService.activeUploads().size);
-            // If no group ID, return all uploads
-            return this.fileManagerService.activeUploads().size;
+    getOverallProgress() {
+        const allUploads = Array.from(this.activeUploads().values());
+        if (allUploads.length === 0)
+            return 0;
+        const totalProgress = allUploads.reduce((sum, upload) => sum + (upload.percentage || 0), 0);
+        return Math.round(totalProgress / allUploads.length);
+    }
+    /**
+     * 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';
         }
-        // Use service method to get all files for this group
-        const allFiles = this.fileManagerService.getAllFilesForGroup(groupId);
-        console.log(`📊 [FileInput-${componentId}] Upload count for group ${groupId}:`, {
-            count: allFiles.length,
-            files: allFiles.map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage }))
-        });
-        return allFiles.length;
     }
     /**
-     * Check if there are active uploads for this component's group ID
+     * Get status class based on upload stage
      */
-    hasActiveUploads() {
-        const groupId = this.groupId();
-        const componentId = this.id();
-        if (!groupId) {
-            const hasActive = Array.from(this.fileManagerService.activeUploads().values()).some(upload => upload.stage !== 'complete');
-            console.log(`📊 [FileInput-${componentId}] No group ID, checking all active uploads:`, hasActive);
-            return hasActive;
-        }
-        // Use service method to get all files and check for active ones
-        const allFiles = this.fileManagerService.getAllFilesForGroup(groupId);
-        const hasActive = allFiles.some(file => file.stage !== 'complete');
-        console.log(`📊 [FileInput-${componentId}] Active uploads for group ${groupId}:`, {
-            hasActive,
-            activeFiles: allFiles.filter(f => f.stage !== 'complete').map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage }))
-        });
-        return hasActive;
+    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;
     }
     /**
-     * Get count of active (non-completed) uploads for this component's group ID
+     * Get all files from service state (pending + active uploads + fetched files)
+     * This method now uses the computed property for consistency
      */
-    getActiveUploadCount() {
-        const groupId = this.groupId();
-        const componentId = this.id();
-        if (!groupId) {
-            const count = Array.from(this.fileManagerService.activeUploads().values()).filter(upload => upload.stage !== 'complete').length;
-            console.log(`📊 [FileInput-${componentId}] No group ID, active upload count:`, count);
-            return count;
-        }
-        // Use service method to get all files and filter active ones
-        const allFiles = this.fileManagerService.getAllFilesForGroup(groupId);
-        const activeCount = allFiles.filter(file => file.stage !== 'complete').length;
-        console.log(`📊 [FileInput-${componentId}] Active upload count for group ${groupId}:`, {
-            count: activeCount,
-            activeFiles: allFiles.filter(f => f.stage !== 'complete').map(f => ({ id: f.fileId, name: f.fileName, stage: f.stage }))
-        });
-        return activeCount;
+    getAllFiles() {
+        return this.allFilesForGroup();
     }
     /**
-     * Show floating uploader (alias for showUploader for template)
+     * Set current user ID
      */
-    showFloatingUploaderDialog() {
-        this.showUploader();
+    setCurrentUserId(userId) {
+        this.currentUserId.set(userId);
+        this.fileManagerService.setUserId(userId);
     }
     /**
-     * Get dynamic classes for drag and drop zone
+     * Public method to handle files from external sources
+     * This can be called by other components to trigger the floating uploader
      */
-    getDragDropZoneClasses() {
-        const classes = [];
-        if (this.isDragOver()) {
-            classes.push('!tw-border-blue-500', '!tw-bg-blue-100', 'dark:!tw-bg-blue-900/30', 'tw-scale-[1.01]');
-        }
-        if (this.disabledSignal()) {
-            classes.push('tw-opacity-50', 'tw-cursor-not-allowed', '!hover:tw-border-gray-300', '!hover:tw-bg-gray-50', 'dark:!hover:tw-bg-gray-800');
+    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);
         }
-        if (this.hasFiles()) {
-            classes.push('!tw-border-emerald-500', '!tw-bg-emerald-50', 'dark:!tw-bg-emerald-900/20', 'hover:!tw-border-emerald-600', 'hover:!tw-bg-emerald-100', 'dark:hover:!tw-bg-emerald-900/30');
+        // Set group ID if provided
+        if (groupId) {
+            this.currentGroupId.set(groupId);
         }
-        return classes.join(' ');
+        // 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);
+                }
+            });
+        });
     }
     /**
-     * Get dynamic classes for icon
+     * Check if there are any uploads for the current group
      */
-    getIconClasses() {
-        const classes = ['tw-text-gray-500', 'dark:tw-text-gray-400'];
-        if (this.isDragOver()) {
-            classes.push('!tw-text-blue-500', 'dark:!tw-text-blue-400');
-        }
-        else if (this.hasFiles()) {
-            classes.push('!tw-text-emerald-500', 'dark:!tw-text-emerald-400');
+    hasUploadsForCurrentGroup() {
+        const groupId = this.currentGroupId();
+        if (!groupId) {
+            // If no group filter, show all uploads
+            return this.hasUploads();
         }
-        return classes.join(' ');
+        // 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();
     }
     /**
-     * Get dynamic classes for preview box
+     * Handle drag over event for file drop
      */
-    getPreviewBoxClasses() {
-        const classes = [];
-        if (this.isDragOver()) {
-            classes.push('!tw-border-blue-500', '!tw-bg-blue-100', 'dark:!tw-bg-blue-900/30');
-        }
-        if (this.disabledSignal()) {
-            classes.push('tw-opacity-50', 'tw-cursor-not-allowed', '!hover:tw-border-gray-300', '!hover:tw-bg-gray-50', 'dark:!hover:tw-bg-gray-800');
-        }
-        if (this.hasImages()) {
-            classes.push('!tw-border-emerald-500', '!tw-bg-emerald-50', 'dark:!tw-bg-emerald-900/20');
-        }
-        return classes.join(' ');
-    }
-    // Drag and Drop Event Handlers
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.disabledSignal()) {
-            this.isDragOver.set(true);
-            console.log('🔄 [FileInput] Drag over detected');
-        }
+        this.isDragOver.set(true);
     }
+    /**
+     * Handle drag leave event for file drop
+     */
     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');
-        }
     }
+    /**
+     * Handle drop event for file drop
+     */
     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();
-        // 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');
-        }
-    }
-    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...' } };
+            this.handleFileSelection(Array.from(files));
         }
-        // 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.' } };
+    }
+    /**
+     * Trigger file input click
+     */
+    triggerFileInput() {
+        const fileInput = document.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.click();
         }
-        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=\"tw-flex tw-flex-col tw-gap-2\">\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=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\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=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\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=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\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=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\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=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [""], 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=\"tw-flex tw-flex-col tw-gap-2\">\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=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\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=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\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=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\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=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\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=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> " }]
-        }], 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
-            }], showFloatingUploader: [{
-                type: Input
-            }], floatingUploaderGroupId: [{
-                type: Input
-            }], fileChange: [{
-                type: Output
-            }], uploadSuccess: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }], uploadProgressChange: [{
-                type: Output
-            }] } });
-
-class CideFloatingUploadTriggerDirective {
-    elementRef = inject(ElementRef);
-    floatingUploader = inject(CideEleFloatingFileUploaderComponent);
-    groupId;
-    userId;
-    showIcon = true;
-    filesSelected = new EventEmitter();
-    triggerIcon;
-    ngOnInit() {
-        this.setupTrigger();
+    /**
+     * Handle file input change
+     */
+    onFileInputChange(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.handleFileSelection(Array.from(input.files));
+            input.value = ''; // Reset input
+        }
     }
-    ngOnDestroy() {
-        this.removeTrigger();
+    /**
+     * Handle file selection from drag/drop or file input
+     */
+    handleFileSelection(files) {
+        const groupId = this.currentGroupId();
+        // Group ID must be provided by the file input component
+        if (!groupId) {
+            console.error('❌ [FloatingFileUploader] No group ID available. Files cannot be uploaded without a group ID from the file input component.');
+            return;
+        }
+        // Upload files using the file manager service
+        files.forEach((file) => {
+            this.fileManagerService.uploadFile(file, {
+                groupId: groupId,
+                isMultiple: true,
+                userId: this.currentUserId()
+            });
+        });
     }
-    setupTrigger() {
-        const element = this.elementRef.nativeElement;
-        if (element.type !== 'file') {
-            console.warn('⚠️ [FloatingUploadTrigger] Directive should only be used on file input elements');
+    /**
+     * Update cached dimensions (throttled for performance)
+     */
+    updateCachedDimensions() {
+        const now = Date.now();
+        // Only update dimensions every 100ms to avoid excessive DOM queries
+        if (now - this.lastDimensionUpdate < 100) {
             return;
         }
-        // Add change event listener
-        element.addEventListener('change', this.onFileChange.bind(this));
-        // Add floating uploader trigger icon if enabled
-        if (this.showIcon) {
-            this.addTriggerIcon();
+        const uploaderElement = document.querySelector('.floating-uploader');
+        if (uploaderElement) {
+            this.cachedDimensions = {
+                width: uploaderElement.offsetWidth,
+                height: uploaderElement.offsetHeight
+            };
+            this.lastDimensionUpdate = now;
         }
     }
-    removeTrigger() {
-        const element = this.elementRef.nativeElement;
-        element.removeEventListener('change', this.onFileChange.bind(this));
-        if (this.triggerIcon) {
-            this.triggerIcon.remove();
-        }
+    /**
+     * Start dragging the uploader
+     */
+    startDrag(event) {
+        event.preventDefault();
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const currentPos = this.position();
+        this.dragOffset = {
+            x: clientX - currentPos.x,
+            y: clientY - currentPos.y
+        };
+        this.isDragging.set(true);
+        // Update cached dimensions at the start of drag for better performance
+        this.updateCachedDimensions();
+        // Add event listeners for drag and end
+        const moveHandler = (e) => this.onDrag(e);
+        const endHandler = () => this.endDrag(moveHandler, endHandler);
+        document.addEventListener('mousemove', moveHandler, { passive: false });
+        document.addEventListener('mouseup', endHandler);
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
+        // Prevent text selection during drag
+        document.body.style.userSelect = 'none';
     }
-    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)
+    /**
+     * Handle dragging movement
+     */
+    onDrag(event) {
+        if (!this.isDragging())
             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);
+        event.preventDefault();
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const newX = clientX - this.dragOffset.x;
+        const newY = clientY - this.dragOffset.y;
+        // Constrain to viewport bounds using cached dimensions for performance
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Use cached dimensions instead of DOM queries for better performance
+        const uploaderWidth = this.cachedDimensions.width;
+        const uploaderHeight = this.cachedDimensions.height;
+        // Ensure uploader stays within viewport bounds
+        const constrainedX = Math.max(0, Math.min(newX, viewportWidth - uploaderWidth));
+        const constrainedY = Math.max(0, Math.min(newY, viewportHeight - uploaderHeight));
+        this.position.set({ x: constrainedX, y: constrainedY });
+    }
+    /**
+     * End dragging
+     */
+    endDrag(moveHandler, endHandler) {
+        this.isDragging.set(false);
+        // Remove event listeners
+        document.removeEventListener('mousemove', moveHandler);
+        document.removeEventListener('mouseup', endHandler);
+        document.removeEventListener('touchmove', moveHandler);
+        document.removeEventListener('touchend', endHandler);
+        // Restore text selection
+        document.body.style.userSelect = '';
+    }
+    /**
+     * Set up window resize listener to keep uploader within bounds
+     */
+    setupWindowResize() {
+        const handleResize = () => {
+            const currentPos = this.position();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Update cached dimensions on resize
+            this.updateCachedDimensions();
+            // Use cached dimensions for performance
+            const uploaderWidth = this.cachedDimensions.width;
+            const uploaderHeight = this.cachedDimensions.height;
+            // Constrain position to new viewport bounds
+            const constrainedX = Math.max(0, Math.min(currentPos.x, viewportWidth - uploaderWidth));
+            const constrainedY = Math.max(0, Math.min(currentPos.y, viewportHeight - uploaderHeight));
+            // Update position if it changed
+            if (constrainedX !== currentPos.x || constrainedY !== currentPos.y) {
+                this.position.set({ x: constrainedX, y: constrainedY });
+                console.log('📐 [FloatingFileUploader] Position adjusted for window resize:', { x: constrainedX, y: constrainedY });
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        // Store reference for cleanup
+        this.windowResizeHandler = handleResize;
+    }
+    /**
+     * Initialize default position
+     */
+    initializePosition() {
+        // Set initial position to bottom-right corner
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Initialize cached dimensions with defaults
+        this.cachedDimensions = { width: 320, height: 300 };
+        // Use cached dimensions for initial positioning
+        const uploaderWidth = this.cachedDimensions.width;
+        const uploaderHeight = this.cachedDimensions.height;
+        // Ensure initial position is within bounds
+        const initialX = Math.max(20, viewportWidth - uploaderWidth - 20);
+        const initialY = Math.max(20, viewportHeight - uploaderHeight - 20);
+        this.position.set({
+            x: initialX,
+            y: initialY
         });
-        // Insert icon after the input
-        element.parentNode?.insertBefore(this.triggerIcon, element.nextSibling);
+        // Update dimensions after a short delay to get actual rendered size
+        setTimeout(() => {
+            this.updateCachedDimensions();
+        }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [".floating-uploader{position:fixed;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFloatingUploadTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cideFloatingUploadTrigger]',
-                    standalone: true
-                }]
-        }], propDecorators: { groupId: [{
-                type: Input
-            }], userId: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], filesSelected: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
+                        CommonModule,
+                        CideIconComponent
+                    ], template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [".floating-uploader{position:fixed;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CideTextareaComponent {
     label = '';
@@ -9432,5 +9226,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, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFloatingUploadTriggerDirective, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
+export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingFileUploaderComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map