cloud-ide-element 1.0.55 → 1.0.57

package/fesm2022/cloud-ide-element.mjs

@@ -1,12 +1,13 @@
 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, Directive, DestroyRef, 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 {
     transform(value, capitalizationMethod) {
@@ -2563,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'
+                                });
                             }
-                            observer.next(event.body);
+                            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'));
+                                }
+                            }
+                        },
+                        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);
     }
-    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 });
+    /**
+     * 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);
+    }
+    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: [{
@@ -2652,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" }] : []));
@@ -2877,43 +3097,88 @@ class CideEleFileInputComponent {
     fileManagerService = inject(CideEleFileManagerService);
     notificationService = inject(NotificationService);
     elementService = inject(CideElementsService);
-    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 = {};
-    id = Math.random().toString(36).substring(2, 10);
-    isUploading = false;
-    uploadProgress = 0;
-    uploadStatus = 'idle';
-    uploadNotificationId = null;
-    fileChange = new EventEmitter();
-    uploadSuccess = new EventEmitter();
-    uploadError = new EventEmitter();
-    uploadProgressChange = new EventEmitter();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    files = null;
-    fileNames = [];
-    previewUrls = [];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
+    showPreview = input(false, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
+    previewWidth = input('200px', ...(ngDevMode ? [{ debugName: "previewWidth" }] : []));
+    previewHeight = input('200px', ...(ngDevMode ? [{ debugName: "previewHeight" }] : []));
+    previewBoxMode = input(false, ...(ngDevMode ? [{ debugName: "previewBoxMode" }] : []));
+    showFileName = input(true, ...(ngDevMode ? [{ debugName: "showFileName" }] : []));
+    placeholderText = input('Click to select image', ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
+    placeholderIcon = input('📷', ...(ngDevMode ? [{ debugName: "placeholderIcon" }] : []));
+    autoUpload = input(false, ...(ngDevMode ? [{ debugName: "autoUpload" }] : []));
+    uploadData = input({}, ...(ngDevMode ? [{ debugName: "uploadData" }] : []));
+    // Modern output signals
+    fileChange = output();
+    uploadSuccess = output();
+    uploadError = output();
+    uploadProgressChange = output();
+    // 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" }] : []));
+    // 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) => { };
     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" }] : []));
+    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(files) {
         console.log('📝 [FileInput] writeValue called with:', files ? Array.from(files).map(f => f.name) : 'null');
-        this.files = files;
-        this.fileNames = files ? Array.from(files).map(f => f.name) : [];
+        this.files.set(files);
+        this.fileNames.set(files ? Array.from(files).map(f => f.name) : []);
         this.generatePreviews();
     }
     registerOnChange(fn) {
@@ -2926,26 +3191,29 @@ class CideEleFileInputComponent {
         this.onValidatorChange = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = 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;
-        this.files = input.files;
-        this.fileNames = this.files ? Array.from(this.files).map(f => f.name) : [];
-        console.log('📁 [FileInput] Files selected:', this.fileNames);
+        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 = 'idle';
-        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus);
-        this.onChange(this.files);
-        this.fileChange.emit(this.files);
+        this.uploadStatus.set('idle');
+        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus());
+        this.onChange(selectedFiles);
+        this.fileChange.emit(selectedFiles);
         this.onTouched();
         this.onValidatorChange();
         // Auto upload if enabled
-        if (this.autoUpload && this.files && this.files.length > 0) {
-            console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', this.files[0].name);
-            this.uploadFile(this.files[0]);
+        if (this.autoUpload() && selectedFiles && selectedFiles.length > 0) {
+            console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', selectedFiles[0].name);
+            this.uploadFile(selectedFiles[0]);
         }
         else {
             console.log('⏸️ [FileInput] Auto upload disabled or no files');
@@ -2953,80 +3221,107 @@ class CideEleFileInputComponent {
     }
     clearFiles() {
         console.log('🗑️ [FileInput] clearFiles called');
-        this.files = null;
-        this.fileNames = [];
+        this.files.set(null);
+        this.fileNames.set([]);
         this.clearPreviews();
-        this.uploadStatus = 'idle';
-        console.log('🔄 [FileInput] Upload status reset to:', this.uploadStatus);
+        this.uploadStatus.set('idle');
+        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 = 'start';
-        console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus);
+        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 = true;
-        this.uploadProgress = 0;
+        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
-        this.uploadNotificationId = this.notificationService.showProgress('Starting file upload...', 0);
-        console.log('🔔 [FileInput] Progress notification started with ID:', this.uploadNotificationId);
-        this.fileManagerService.uploadFile(file, this.uploadData, (progress) => {
+        // 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.uploadData(), (progress) => {
             // Real progress callback from file manager service
-            this.uploadProgress = progress;
+            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 = 'uploading';
-                console.log('🔄 [FileInput] Upload status changed to:', this.uploadStatus);
+            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
-            if (this.uploadNotificationId) {
-                this.notificationService.updateProgress(this.uploadNotificationId, progress, `Uploading file... ${Math.round(progress)}%`);
+            // 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);
             }
-        }).subscribe({
+        }).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 = 'success';
-                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus);
+                this.uploadStatus.set('success');
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
                 // Complete the progress
-                this.uploadProgress = 100;
+                this.uploadProgress.set(100);
                 this.uploadProgressChange.emit(100);
                 console.log('📊 [FileInput] Upload progress completed: 100%');
                 // Update progress notification to complete
-                if (this.uploadNotificationId) {
-                    this.notificationService.remove(this.uploadNotificationId);
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    this.notificationService.remove(notificationId);
                     console.log('🔔 [FileInput] Progress notification removed');
                 }
-                this.notificationService.success('File upload completed!');
-                this.uploadNotificationId = 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;
+                this.notificationService.success('✅ File uploaded successfully!', { duration: 0 });
+                this.uploadNotificationId.set(null);
+                // Extract ID from CoreFileManagerInsertUpdateResponse
+                const uploadedId = response?.data?.core_file_manager?.[0]?.cyfm_id;
                 if (uploadedId) {
                     console.log('✅ [FileInput] File uploaded successfully with ID:', uploadedId);
                     this.uploadSuccess.emit(uploadedId);
-                    // Update the form control value with the uploaded file ID
-                    this.onChange(uploadedId);
-                    console.log('📝 [FileInput] Form control value updated with uploaded file ID');
+                    // Note: Form control value remains as FileList - uploaded ID is emitted separately
+                    console.log('📝 [FileInput] Upload success event emitted with 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 = false;
+                this.isUploading.set(false);
                 console.log('🔄 [FileInput] isUploading set to false');
                 // Trigger validation update to clear upload in progress error
                 this.onValidatorChange();
@@ -3034,19 +3329,23 @@ class CideEleFileInputComponent {
             },
             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 = 'error';
-                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus);
+                this.uploadStatus.set('error');
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus());
                 // Remove progress notification and show error
-                if (this.uploadNotificationId) {
-                    this.notificationService.remove(this.uploadNotificationId);
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    this.notificationService.remove(notificationId);
                     console.log('🔔 [FileInput] Progress notification removed due to error');
                 }
-                this.notificationService.error(`Upload failed: ${error.message || error.error?.message || 'Upload failed'}`);
-                this.uploadNotificationId = null;
+                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 = false;
-                this.uploadProgress = 0;
+                this.isUploading.set(false);
+                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
@@ -3058,15 +3357,15 @@ class CideEleFileInputComponent {
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
-        if (!this.showPreview || !this.files) {
+        if (!this.showPreview() || !this.files()) {
             return;
         }
-        Array.from(this.files).forEach(file => {
+        Array.from(this.files()).forEach(file => {
             if (this.isImageFile(file)) {
                 const reader = new FileReader();
                 reader.onload = (e) => {
                     if (e.target?.result) {
-                        this.previewUrls.push(e.target.result);
+                        this.previewUrls.update(urls => [...urls, e.target.result]);
                     }
                 };
                 reader.readAsDataURL(file);
@@ -3075,131 +3374,223 @@ class CideEleFileInputComponent {
     }
     clearPreviews() {
         // Revoke object URLs to prevent memory leaks
-        this.previewUrls.forEach(url => {
+        this.previewUrls().forEach(url => {
             if (url.startsWith('blob:')) {
                 URL.revokeObjectURL(url);
             }
         });
-        this.previewUrls = [];
+        this.previewUrls.set([]);
     }
     isImageFile(file) {
         return file.type.startsWith('image/');
     }
-    isImagePreviewAvailable() {
-        return this.showPreview && this.previewUrls.length > 0;
-    }
     removePreview(index) {
-        if (this.files && this.files.length > index) {
+        const currentFiles = this.files();
+        if (currentFiles && currentFiles.length > index) {
             // Create new FileList without the removed file
             const dt = new DataTransfer();
-            Array.from(this.files).forEach((file, i) => {
+            Array.from(currentFiles).forEach((file, i) => {
                 if (i !== index) {
                     dt.items.add(file);
                 }
             });
-            this.files = dt.files;
-            this.fileNames = Array.from(this.files).map(f => f.name);
+            const newFiles = dt.files;
+            this.files.set(newFiles);
+            this.fileNames.set(Array.from(newFiles).map(f => f.name));
             // Remove the preview URL
-            if (this.previewUrls[index] && this.previewUrls[index].startsWith('blob:')) {
-                URL.revokeObjectURL(this.previewUrls[index]);
+            const currentUrls = this.previewUrls();
+            if (currentUrls[index] && currentUrls[index].startsWith('blob:')) {
+                URL.revokeObjectURL(currentUrls[index]);
             }
-            this.previewUrls.splice(index, 1);
-            this.onChange(this.files);
-            this.fileChange.emit(this.files);
+            this.previewUrls.update(urls => urls.filter((_, i) => i !== index));
+            this.onChange(newFiles);
+            this.fileChange.emit(newFiles);
         }
     }
     ngOnDestroy() {
         // Clean up preview URLs to prevent memory leaks
         this.clearPreviews();
         // Clean up any active upload notification
-        if (this.uploadNotificationId) {
-            this.notificationService.remove(this.uploadNotificationId);
-            this.uploadNotificationId = null;
+        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.disabled) {
+        const fileInput = document.getElementById('cide-file-input-' + this.id());
+        if (fileInput && !this.disabled()) {
             fileInput.click();
         }
     }
-    isPreviewBoxMode() {
-        return this.previewBoxMode && this.showPreview;
+    // 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');
     }
-    hasImages() {
-        return this.previewUrls.length > 0;
+    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();
+        this.onValidatorChange();
+        // 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;
+        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,
-            label: this.label,
-            required: this.required,
-            disabled: this.disabled,
-            accept: this.accept,
-            multiple: this.multiple,
-            showPreview: this.showPreview,
-            autoUpload: this.autoUpload,
-            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.helperText,
-            errorText: this.errorText,
-            placeholderText: this.placeholderText,
-            placeholderIcon: this.placeholderIcon,
-            previewWidth: this.previewWidth,
-            previewHeight: this.previewHeight,
-            previewBoxMode: this.previewBoxMode,
-            showFileName: this.showFileName,
-            uploadData: this.uploadData
+            id: this.id(),
+            label: this.label(),
+            required: this.required(),
+            disabled: this.disabled(),
+            accept: this.accept(),
+            multiple: this.multiple(),
+            showPreview: this.showPreview(),
+            autoUpload: this.autoUpload(),
+            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.helperText(),
+            errorText: this.errorText(),
+            placeholderText: this.placeholderText(),
+            placeholderIcon: this.placeholderIcon(),
+            previewWidth: this.previewWidth(),
+            previewHeight: this.previewHeight(),
+            previewBoxMode: this.previewBoxMode(),
+            showFileName: this.showFileName(),
+            uploadData: this.uploadData()
         };
     }
     async getControlData() {
         console.log('🔍 [FileInput] getControlData called');
-        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id });
+        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);
-            // Update basic properties that exist in ICoreSype
-            this.label = cide_element_data?.sype_label;
-            this.required = (cide_element_data?.sype_required || false);
-            this.placeholderText = (cide_element_data?.sype_placeholder || 'Click to select image');
-            // Update file-input specific properties from data object if available
-            const data = cide_element_data?.data;
-            if (data) {
-                this.accept = data.accept || '';
-                this.multiple = data.multiple || false;
-                this.showPreview = data.showPreview || false;
-                this.autoUpload = data.autoUpload || false;
-                this.placeholderIcon = data.placeholderIcon || '📷';
-                this.previewWidth = data.previewWidth || '200px';
-                this.previewHeight = data.previewHeight || '200px';
-                this.previewBoxMode = data.previewBoxMode || false;
-                this.showFileName = data.showFileName || true;
-                this.uploadData = data.uploadData || {};
-            }
-            console.log('✅ [FileInput] Control data updated from element service');
+            // 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);
+            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.required, 'files:', !!this.files, 'control.value:', control.value);
+        console.log('🔍 [FileInput] validate() called - uploadStatus:', this.uploadStatus(), 'required:', this.required(), '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') {
+        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.required && !this.files && !control.value) {
+        if (this.required() && !this.files() && !control.value) {
             console.log('⚠️ [FileInput] Validation ERROR: File required');
             return { 'required': { message: 'Please select a file to upload.' } };
         }
@@ -3207,74 +3598,34 @@ 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: "14.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", required: "required", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
+    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: forwardRef(() => CideEleFileInputComponent),
+                useExisting: CideEleFileInputComponent,
                 multi: true
             },
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => 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,
             args: [{ selector: 'cide-ele-file-input', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CideEleFileInputComponent),
+                            useExisting: CideEleFileInputComponent,
                             multi: true
                         },
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => CideEleFileInputComponent),
+                            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"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], errorText: [{
-                type: Input
-            }], showPreview: [{
-                type: Input
-            }], previewWidth: [{
-                type: Input
-            }], previewHeight: [{
-                type: Input
-            }], previewBoxMode: [{
-                type: Input
-            }], showFileName: [{
-                type: Input
-            }], placeholderText: [{
-                type: Input
-            }], placeholderIcon: [{
-                type: Input
-            }], autoUpload: [{
-                type: Input
-            }], uploadData: [{
-                type: Input
-            }], fileChange: [{
-                type: Output
-            }], uploadSuccess: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }], uploadProgressChange: [{
-                type: Output
-            }] } });
+                    ], 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 = '';