cloud-ide-element 1.0.56 → 1.0.58

package/fesm2022/cloud-ide-element.mjs

@@ -1,12 +1,12 @@
 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, computed, DestroyRef, input, output, Directive, viewChild, effect } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, input, output, linkedSignal, afterRenderEffect, afterNextRender, Directive, viewChild, effect } 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 } from 'rxjs';
+import { BehaviorSubject, Subject, debounceTime, takeUntil, distinctUntilChanged, Observable, retry, catchError, finalize, throwError } from 'rxjs';
 import * as i2$1 from '@angular/router';
-import * as i1$1 from '@angular/common/http';
+import { HttpClient, HttpEventType } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class CapitalizePipe {
@@ -2564,88 +2564,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
+class ICoreCyfm {
+    _id;
+    cyfm_name;
+    cyfm_alt_text;
+    cyfm_path;
+    cyfm_size_in_byte;
+    cyfm_type;
+    cyfm_creation_dt;
+    cyfm_id_user;
+    cyfm_permissions;
+    cyfm_tags;
+    cyfm_version;
+    cyfm_file_status_sygmt;
+    cyfm_isactive;
+}
+/* INTERFACE END */
+/* MODEL START */
+class MFileManager {
+    cyfm_id = "";
+    constructor(init) {
+        Object.assign(this, init);
+    }
+    Validate() {
+        let errorLogger = {};
+        // Log errors here
+        if (!this.cyfm_id) {
+            errorLogger.cyfm_id = "File ID is Required!";
+        }
+        return errorLogger;
+    }
+}
+class ICoreCyfmSave extends ICoreCyfm {
+    cyfm_file_base64 = "";
+    cyfm_temp_unique_id = "";
+    constructor(init) {
+        super();
+        Object.assign(this, init);
+    }
+}
+class CoreFileManagerInsertUpdatePayload {
+    core_file_manager_new = [];
+    core_file_manager_update = [];
+    core_file_manager_delete = [];
+    constructor(init) {
+        Object.assign(this, init);
+    }
+    Validate() {
+        let errorLogger = {};
+        // Log errors here
+        return errorLogger;
+    }
+}
+
 class CideEleFileManagerService {
-    http;
-    baseUrl = '/api'; // This will be configured by the consuming application
-    constructor(http) {
-        this.http = http;
+    // Angular 20: Modern dependency injection
+    http = inject(HttpClient);
+    destroyRef = inject(DestroyRef);
+    // Angular 20: Signal-based state management
+    _baseUrl = signal('/api', ...(ngDevMode ? [{ debugName: "_baseUrl" }] : []));
+    _isUploading = signal(false, ...(ngDevMode ? [{ debugName: "_isUploading" }] : []));
+    _uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "_uploadQueue" }] : []));
+    _activeUploads = signal(new Map(), ...(ngDevMode ? [{ debugName: "_activeUploads" }] : []));
+    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
+    // Angular 20: Computed values
+    baseUrl = this._baseUrl.asReadonly();
+    isUploading = this._isUploading.asReadonly();
+    uploadQueue = this._uploadQueue.asReadonly();
+    activeUploads = this._activeUploads.asReadonly();
+    error = this._error.asReadonly();
+    hasActiveUploads = computed(() => this._activeUploads().size > 0, ...(ngDevMode ? [{ debugName: "hasActiveUploads" }] : []));
+    queueLength = computed(() => this._uploadQueue().length, ...(ngDevMode ? [{ debugName: "queueLength" }] : []));
+    serviceState = computed(() => ({
+        isUploading: this._isUploading(),
+        uploadQueue: this._uploadQueue(),
+        activeUploads: this._activeUploads(),
+        error: this._error()
+    }), ...(ngDevMode ? [{ debugName: "serviceState" }] : []));
+    constructor() {
+        console.log('🚀 [FileManagerService] Angular 20 service initialized');
     }
     /**
      * Upload a file with base64 encoding and progress tracking
+     * Angular 20: Enhanced with better error handling, retry logic, and signal-based state
      * @param file The file to upload
-     * @param additionalData Additional data to include in the payload
+     * @param options Upload options and additional data
      * @param progressCallback Optional callback for progress updates
      * @returns Observable with the upload response
      */
-    uploadFile(file, additionalData, progressCallback) {
-        // Convert file to base64 with progress tracking
+    uploadFile(file, options, progressCallback) {
+        const fileId = this.generateFileId(file);
+        const uploadOptions = { retryAttempts: 3, timeout: 30000, ...options };
+        // Angular 20: Update service state
+        this._isUploading.set(true);
+        this._error.set(null);
+        this.addToUploadQueue(fileId);
+        console.log('📤 [FileManagerService] Starting upload for:', file.name, 'Size:', file.size, 'bytes');
         return new Observable(observer => {
             const reader = new FileReader();
-            // Track file reading progress
+            // Angular 20: Enhanced progress tracking with signals
             reader.onprogress = (event) => {
                 if (event.lengthComputable && progressCallback) {
                     const progress = (event.loaded / event.total) * 50; // File reading is 50% of total progress
                     progressCallback(progress);
+                    this.updateUploadProgress(fileId, {
+                        loaded: event.loaded,
+                        total: event.total,
+                        percentage: progress,
+                        stage: 'reading'
+                    });
                 }
             };
             reader.onload = () => {
-                const base64String = reader.result;
-                const base64Data = base64String.split(',')[1]; // Remove data:image/jpeg;base64, prefix
-                // Update progress to 50% (file reading complete)
-                if (progressCallback) {
-                    progressCallback(50);
-                }
-                const payload = {
-                    cyfm_name: file.name,
-                    cyfm_alt_text: additionalData?.altText || file.name,
-                    cyfm_path: '', // Will be set by backend
-                    cyfm_size_in_byte: file.size,
-                    cyfm_type: file.type,
-                    cyfm_creation_dt: new Date().toISOString(),
-                    cyfm_id_user: additionalData?.userId || '',
-                    cyfm_permissions: additionalData?.permissions || [],
-                    cyfm_tags: additionalData?.tags || [],
-                    cyfm_version: 1,
-                    cyfm_file_status_sygmt: additionalData?.fileStatus || 'active',
-                    cyfm_isactive: true,
-                    fileData: base64Data, // Base64 file data
-                    ...additionalData
-                };
-                // Make the HTTP request with progress tracking
-                this.http.post(`${this.baseUrl}`, payload, {
-                    reportProgress: true,
-                    observe: 'events'
-                }).subscribe({
-                    next: (event) => {
-                        if (event.type === 1 && progressCallback) { // HttpEventType.UploadProgress
-                            const uploadProgress = (event.loaded / event.total) * 50; // Upload is remaining 50%
-                            const totalProgress = 50 + uploadProgress; // Total progress (50% file reading + upload progress)
-                            progressCallback(totalProgress);
+                try {
+                    const base64String = reader.result;
+                    const base64Data = base64String.split(',')[1]; // Remove data:image/jpeg;base64, prefix
+                    // Update progress to 50% (file reading complete)
+                    if (progressCallback) {
+                        progressCallback(50);
+                    }
+                    this.updateUploadProgress(fileId, {
+                        loaded: 50,
+                        total: 100,
+                        percentage: 50,
+                        stage: 'uploading'
+                    });
+                    // Create the file data object with proper typing
+                    const fileData = {
+                        cyfm_name: file.name,
+                        cyfm_alt_text: uploadOptions?.altText || file.name,
+                        cyfm_path: '', // Will be set by backend
+                        cyfm_size_in_byte: file.size,
+                        cyfm_type: file.type,
+                        cyfm_creation_dt: new Date().toISOString(),
+                        cyfm_id_user: uploadOptions?.userId || '',
+                        cyfm_permissions: [], // Match the interface type
+                        cyfm_tags: uploadOptions?.tags || [],
+                        cyfm_version: 1,
+                        cyfm_file_status_sygmt: uploadOptions?.fileStatus || 'file_manager_file_status_active',
+                        cyfm_isactive: true,
+                        cyfm_file_base64: base64Data,
+                        cyfm_temp_unique_id: fileId
+                    };
+                    // Create the payload with proper typing
+                    const payload = new CoreFileManagerInsertUpdatePayload({
+                        core_file_manager_new: [fileData],
+                        core_file_manager_update: [],
+                        core_file_manager_delete: []
+                    });
+                    // Angular 20: Enhanced HTTP request with retry logic and better error handling
+                    // Use proper API endpoint from cloud-ide-lms-model
+                    this.http.post(`${this._baseUrl()}`, payload, {
+                        reportProgress: true,
+                        observe: 'events'
+                    }).pipe(retry(uploadOptions.retryAttempts || 3), catchError(this.handleError.bind(this)), finalize(() => {
+                        this.removeFromUploadQueue(fileId);
+                        this.removeActiveUpload(fileId);
+                        if (this._uploadQueue().length === 0) {
+                            this._isUploading.set(false);
                         }
-                        else if (event.type === 4) { // HttpEventType.Response
-                            if (progressCallback) {
-                                progressCallback(100);
+                    }), takeUntilDestroyed(this.destroyRef)).subscribe({
+                        next: (event) => {
+                            if (event.type === HttpEventType.UploadProgress && progressCallback) {
+                                const uploadProgress = (event.loaded / event.total) * 50; // Upload is remaining 50%
+                                const totalProgress = 50 + uploadProgress; // Total progress (50% file reading + upload progress)
+                                progressCallback(totalProgress);
+                                this.updateUploadProgress(fileId, {
+                                    loaded: event.loaded,
+                                    total: event.total,
+                                    percentage: totalProgress,
+                                    stage: 'uploading'
+                                });
+                            }
+                            else if (event.type === HttpEventType.Response) {
+                                if (progressCallback) {
+                                    progressCallback(100);
+                                }
+                                this.updateUploadProgress(fileId, {
+                                    loaded: 100,
+                                    total: 100,
+                                    percentage: 100,
+                                    stage: 'complete'
+                                });
+                                console.log('✅ [FileManagerService] Upload successful:', event.body);
+                                // Handle the CoreFileManagerInsertUpdateResponse
+                                const response = event.body;
+                                if (response.success) {
+                                    observer.next(response);
+                                    observer.complete();
+                                }
+                                else {
+                                    observer.error(new Error(response.message || 'Upload failed'));
+                                }
                             }
-                            observer.next(event.body);
+                        },
+                        error: (error) => {
+                            console.error('❌ [FileManagerService] Upload failed:', error);
+                            this._error.set(error.message || 'Upload failed');
+                            this.updateUploadProgress(fileId, {
+                                loaded: 0,
+                                total: 100,
+                                percentage: 0,
+                                stage: 'error'
+                            });
+                            observer.error(error);
                         }
-                    },
-                    error: (error) => observer.error(error)
-                });
+                    });
+                }
+                catch (error) {
+                    console.error('❌ [FileManagerService] File processing error:', error);
+                    this._error.set('Failed to process file');
+                    observer.error(error);
+                }
+            };
+            reader.onerror = () => {
+                console.error('❌ [FileManagerService] File reading failed');
+                this._error.set('Failed to read file');
+                observer.error(new Error('Failed to read file'));
             };
-            reader.onerror = () => observer.error('Failed to read file');
             reader.readAsDataURL(file);
         });
     }
     /**
      * Set the base URL for API calls
-     * This should be called by the consuming application during initialization
+     * Angular 20: Using signal-based state management
      * @param url The base URL for the API
      */
     setBaseUrl(url) {
         console.log('🔍 [FileManagerService] Setting base URL:', url);
-        this.baseUrl = url;
+        this._baseUrl.set(url);
+    }
+    /**
+     * Angular 20: Helper methods for state management
+     */
+    generateFileId(file) {
+        return `${file.name}_${file.size}_${Date.now()}`;
+    }
+    addToUploadQueue(fileId) {
+        const currentQueue = this._uploadQueue();
+        this._uploadQueue.set([...currentQueue, fileId]);
+    }
+    removeFromUploadQueue(fileId) {
+        const currentQueue = this._uploadQueue();
+        this._uploadQueue.set(currentQueue.filter(id => id !== fileId));
+    }
+    updateUploadProgress(fileId, progress) {
+        const currentUploads = new Map(this._activeUploads());
+        currentUploads.set(fileId, progress);
+        this._activeUploads.set(currentUploads);
+    }
+    removeActiveUpload(fileId) {
+        const currentUploads = new Map(this._activeUploads());
+        currentUploads.delete(fileId);
+        this._activeUploads.set(currentUploads);
+    }
+    /**
+     * Angular 20: Enhanced error handling
+     */
+    handleError(error) {
+        let errorMessage = 'An unknown error occurred';
+        if (error.error instanceof ErrorEvent) {
+            // Client-side error
+            errorMessage = `Client Error: ${error.error.message}`;
+        }
+        else {
+            // Server-side error
+            errorMessage = `Server Error: ${error.status} - ${error.message}`;
+        }
+        console.error('❌ [FileManagerService] HTTP Error:', errorMessage);
+        this._error.set(errorMessage);
+        return throwError(() => new Error(errorMessage));
+    }
+    /**
+     * Angular 20: Service utility methods
+     */
+    clearError() {
+        this._error.set(null);
+    }
+    getUploadProgress(fileId) {
+        return this._activeUploads().get(fileId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    cancelUpload(fileId) {
+        this.removeFromUploadQueue(fileId);
+        this.removeActiveUpload(fileId);
+        console.log('🚫 [FileManagerService] Upload cancelled for:', fileId);
+    }
+    /**
+     * Angular 20: File validation utility
+     */
+    validateFile(file, maxSizeMB = 10, allowedTypes = []) {
+        // Check file size
+        const maxSizeBytes = maxSizeMB * 1024 * 1024; // Convert MB to bytes
+        if (file.size > maxSizeBytes) {
+            return { valid: false, error: `File size exceeds ${maxSizeMB}MB limit` };
+        }
+        // Check file type
+        if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
+            return { valid: false, error: `File type ${file.type} is not allowed` };
+        }
+        return { valid: true };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, decorators: [{
@@ -2653,7 +2872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [] });
 
 class NotificationService {
     notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
@@ -2879,6 +3098,7 @@ class CideEleFileInputComponent {
     notificationService = inject(NotificationService);
     elementService = inject(CideElementsService);
     destroyRef = inject(DestroyRef);
+    // private readonly pendingTasks = inject(PendingTasks); // TODO: Fix PendingTasks API usage
     // Modern input signals
     label = input('Choose file', ...(ngDevMode ? [{ debugName: "label" }] : []));
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -2910,19 +3130,74 @@ class CideEleFileInputComponent {
     fileNames = signal([], ...(ngDevMode ? [{ debugName: "fileNames" }] : []));
     previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
     uploadNotificationId = signal(null, ...(ngDevMode ? [{ debugName: "uploadNotificationId" }] : []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    // Angular 20: Linked signals for better relationships
+    hasFiles = linkedSignal(() => this.files() !== null && this.files().length > 0);
+    canUpload = linkedSignal(() => this.hasFiles() && !this.isUploading() && !this.disabled());
+    isInErrorState = linkedSignal(() => this.uploadStatus() === 'error');
+    isInSuccessState = linkedSignal(() => this.uploadStatus() === 'success');
+    // 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 = (files) => { };
+    onChange = (value) => { };
     onTouched = () => { };
     onValidatorChange = () => { };
     // Computed values
     hasImages = computed(() => this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "hasImages" }] : []));
     isPreviewBoxMode = computed(() => this.previewBoxMode() && this.showPreview(), ...(ngDevMode ? [{ debugName: "isPreviewBoxMode" }] : []));
     isImagePreviewAvailable = computed(() => this.showPreview() && this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "isImagePreviewAvailable" }] : []));
-    writeValue(files) {
-        console.log('📝 [FileInput] writeValue called with:', files ? Array.from(files).map(f => f.name) : 'null');
-        this.files.set(files);
-        this.fileNames.set(files ? Array.from(files).map(f => f.name) : []);
-        this.generatePreviews();
+    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');
+        });
+    }
+    writeValue(value) {
+        console.log('📝 [FileInput] writeValue called with:', value);
+        if (typeof value === 'string') {
+            // Value is an uploaded file ID
+            console.log('📝 [FileInput] Value is uploaded file ID:', value);
+            this.files.set(null);
+            this.fileNames.set([]);
+            this.clearPreviews();
+        }
+        else if (value instanceof FileList) {
+            // Value is a FileList
+            console.log('📝 [FileInput] Value is FileList:', Array.from(value).map(f => f.name));
+            this.files.set(value);
+            this.fileNames.set(Array.from(value).map(f => f.name));
+            this.generatePreviews();
+        }
+        else {
+            // Value is null
+            console.log('📝 [FileInput] Value is null');
+            this.files.set(null);
+            this.fileNames.set([]);
+            this.clearPreviews();
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2952,7 +3227,6 @@ class CideEleFileInputComponent {
         this.onChange(selectedFiles);
         this.fileChange.emit(selectedFiles);
         this.onTouched();
-        this.onValidatorChange();
         // Auto upload if enabled
         if (this.autoUpload() && selectedFiles && selectedFiles.length > 0) {
             console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', selectedFiles[0].name);
@@ -2971,16 +3245,15 @@ class CideEleFileInputComponent {
         console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
         this.onChange(null);
         this.fileChange.emit(null);
-        this.onValidatorChange();
     }
     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());
-        // Trigger validation update to show upload in progress error
-        this.onValidatorChange();
-        console.log('✅ [FileInput] Validation triggered - should show upload in progress error');
         this.isUploading.set(true);
         this.uploadProgress.set(0);
         this.uploadProgressChange.emit(0);
@@ -3001,8 +3274,6 @@ class CideEleFileInputComponent {
             if (this.uploadStatus() === 'start') {
                 this.uploadStatus.set('uploading');
                 console.log('🔄 [FileInput] Upload status changed to:', this.uploadStatus());
-                this.onValidatorChange();
-                console.log('✅ [FileInput] Validation triggered after status change to uploading');
             }
             // Update progress notification with spinner
             const notificationId = this.uploadNotificationId();
@@ -3031,6 +3302,9 @@ class CideEleFileInputComponent {
         }).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());
@@ -3046,14 +3320,15 @@ class CideEleFileInputComponent {
                 }
                 this.notificationService.success('✅ File uploaded successfully!', { duration: 0 });
                 this.uploadNotificationId.set(null);
-                // Extract ID from response - the file manager returns the _id of the created record
-                const uploadedId = response?._id || response?.data?._id || response?.id || response?.fileId;
+                // 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);
-                    this.uploadSuccess.emit(uploadedId);
-                    // Update the form control value with the uploaded file ID
+                    // Set the uploaded ID as the form control value
                     this.onChange(uploadedId);
-                    console.log('📝 [FileInput] Form control value updated with uploaded file ID');
+                    console.log('📝 [FileInput] Form control value set to uploaded ID:', uploadedId);
+                    this.uploadSuccess.emit(uploadedId);
+                    console.log('📝 [FileInput] Upload success event emitted with file ID:', uploadedId);
                 }
                 else {
                     console.error('❌ [FileInput] Upload successful but no ID returned:', response);
@@ -3061,12 +3336,12 @@ class CideEleFileInputComponent {
                 }
                 this.isUploading.set(false);
                 console.log('🔄 [FileInput] isUploading set to false');
-                // Trigger validation update to clear upload in progress error
-                this.onValidatorChange();
-                console.log('✅ [FileInput] Validation triggered - should clear upload in progress error');
             },
             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());
@@ -3083,9 +3358,6 @@ class CideEleFileInputComponent {
                 this.uploadProgress.set(0);
                 this.uploadProgressChange.emit(0);
                 console.log('🔄 [FileInput] Upload state reset - isUploading: false, progress: 0%');
-                // Trigger validation update to clear upload in progress error
-                this.onValidatorChange();
-                console.log('✅ [FileInput] Validation triggered - should clear upload in progress error');
             }
         });
     }
@@ -3158,9 +3430,119 @@ class CideEleFileInputComponent {
             fileInput.click();
         }
     }
+    // Drag and Drop Event Handlers
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag over detected');
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        console.log('🔄 [FileInput] Drag leave detected');
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.isDragOver.set(true);
+            console.log('🔄 [FileInput] Drag enter detected');
+        }
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        if (this.disabled()) {
+            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.accept() && !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.multiple() && 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.accept().split(',').map(type => type.trim());
+        if (acceptTypes.length === 0 || acceptTypes[0] === '')
+            return true;
+        return Array.from(files).every(file => {
+            return acceptTypes.some(acceptType => {
+                if (acceptType.startsWith('.')) {
+                    // Extension-based validation
+                    return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+                }
+                else if (acceptType.includes('/')) {
+                    // MIME type validation
+                    return file.type === acceptType || file.type.startsWith(acceptType.replace('*', ''));
+                }
+                return false;
+            });
+        });
+    }
+    handleFileSelection(files) {
+        this.files.set(files);
+        this.fileNames.set(Array.from(files).map(f => f.name));
+        console.log('📁 [FileInput] Files selected via drag & drop:', this.fileNames());
+        this.generatePreviews();
+        // Reset upload status when new file is selected
+        this.uploadStatus.set('idle');
+        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
+        this.onChange(files);
+        this.fileChange.emit(files);
+        this.onTouched();
+        // Auto upload if enabled
+        if (this.autoUpload() && files.length > 0) {
+            console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', files[0].name);
+            this.uploadFile(files[0]);
+        }
+        else {
+            console.log('⏸️ [FileInput] Auto upload disabled or no files');
+        }
+    }
     isRequired() {
         return this.required();
     }
+    /**
+     * Angular 20: Utility method to get upload data with proper typing
+     * @returns Properly typed upload data
+     */
+    getUploadData() {
+        return this.uploadData();
+    }
+    /**
+     * 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.uploadData();
+        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(),
@@ -3222,7 +3604,7 @@ class CideEleFileInputComponent {
         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.1.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, previewHeight: { classPropertyName: "previewHeight", publicName: "previewHeight", isSignal: true, isRequired: false, transformFunction: null }, previewBoxMode: { classPropertyName: "previewBoxMode", publicName: "previewBoxMode", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, uploadData: { classPropertyName: "uploadData", publicName: "uploadData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, previewHeight: { classPropertyName: "previewHeight", publicName: "previewHeight", isSignal: true, isRequired: false, transformFunction: null }, previewBoxMode: { classPropertyName: "previewBoxMode", publicName: "previewBoxMode", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, uploadData: { classPropertyName: "uploadData", publicName: "uploadData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: CideEleFileInputComponent,
@@ -3233,7 +3615,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label() && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n    {{ label() }}<span *ngIf=\"required()\" class=\"cide-file-input-required\"> *</span>\n  </label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth()\"\n      [style.height]=\"previewHeight()\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled() ? 'File selection disabled' : placeholderText()\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">\n          <cide-ele-icon>{{ placeholderIcon() }}</cide-ele-icon>\n        </div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText() }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls()[0]\" \n          [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled()\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames().length && showFileName()\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames()[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames().length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames().length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames()\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls(); let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth()\"\n        [style.height]=\"previewHeight()\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames()[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText()\" class=\"cide-file-input-error\">{{ errorText() }}</div>\n  <div *ngIf=\"helperText() && !errorText()\" class=\"cide-file-input-helper\">{{ helperText() }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (label() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ label() }}@if (required()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidth()\"\n      [style.height]=\"previewHeight()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabled() ? 'File selection disabled' : placeholderText()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIcon() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderText() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabled()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileName()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"accept()\"\n        [attr.multiple]=\"multiple() ? true : null\"\n        [disabled]=\"disabled()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidth()\"\n            [style.height]=\"previewHeight()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorText()) {\n    <div class=\"cide-file-input-error\">{{ errorText() }}</div>\n  }\n  @if (helperText() && !errorText()) {\n    <div class=\"cide-file-input-helper\">{{ helperText() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -3248,8 +3630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label() && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n    {{ label() }}<span *ngIf=\"required()\" class=\"cide-file-input-required\"> *</span>\n  </label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth()\"\n      [style.height]=\"previewHeight()\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled() ? 'File selection disabled' : placeholderText()\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">\n          <cide-ele-icon>{{ placeholderIcon() }}</cide-ele-icon>\n        </div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText() }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls()[0]\" \n          [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled()\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames().length && showFileName()\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames()[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames().length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames().length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames()\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls(); let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth()\"\n        [style.height]=\"previewHeight()\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames()[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText()\" class=\"cide-file-input-error\">{{ errorText() }}</div>\n  <div *ngIf=\"helperText() && !errorText()\" class=\"cide-file-input-helper\">{{ helperText() }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
-        }] });
+                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (label() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ label() }}@if (required()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? true : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidth()\"\n      [style.height]=\"previewHeight()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabled() ? 'File selection disabled' : placeholderText()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIcon() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderText() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabled()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileName()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"accept()\"\n        [attr.multiple]=\"multiple() ? true : null\"\n        [disabled]=\"disabled()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidth()\"\n            [style.height]=\"previewHeight()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorText()) {\n    <div class=\"cide-file-input-error\">{{ errorText() }}</div>\n  }\n  @if (helperText() && !errorText()) {\n    <div class=\"cide-file-input-helper\">{{ helperText() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CideTextareaComponent {
     label = '';