cloud-ide-element 1.0.61 → 1.0.64

package/fesm2022/cloud-ide-element.mjs

@@ -1,13 +1,16 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, input, output, linkedSignal, afterRenderEffect, afterNextRender, Directive, viewChild, effect } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, DestroyRef, computed, afterRenderEffect, afterNextRender, Directive, ElementRef, 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, retry, catchError, finalize, throwError } from 'rxjs';
 import * as i2$1 from '@angular/router';
-import { HttpClient, HttpEventType } from '@angular/common/http';
+import * as i1$1 from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpRequest } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { tap, catchError as catchError$1 } from 'rxjs/operators';
+import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl } from 'cloud-ide-lms-model';
 
 class CapitalizePipe {
     transform(value, capitalizationMethod) {
@@ -2564,23 +2567,10 @@ 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 */
+/**
+ * File Manager Interfaces
+ * Based on core_file_manager table schema
+ */
 class MFileManager {
     cyfm_id = "";
     constructor(init) {
@@ -2595,11 +2585,23 @@ class MFileManager {
         return errorLogger;
     }
 }
-class ICoreCyfmSave extends ICoreCyfm {
+class ICoreCyfmSave {
+    _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;
     cyfm_file_base64 = "";
     cyfm_temp_unique_id = "";
     constructor(init) {
-        super();
         Object.assign(this, init);
     }
 }
@@ -3108,28 +3110,45 @@ class CideEleFileInputComponent {
     elementService = inject(CideElementsService);
     destroyRef = inject(DestroyRef);
     // private readonly pendingTasks = inject(PendingTasks); // TODO: Fix PendingTasks API usage
-    // Modern input signals
-    label = input('Choose file', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
-    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();
+    // Traditional @Input() decorators
+    label = 'Choose file';
+    accept = '';
+    multiple = false;
+    disabled = false;
+    required = false;
+    helperText = '';
+    errorText = '';
+    showPreview = false;
+    previewWidth = '200px';
+    previewHeight = '200px';
+    previewBoxMode = false;
+    showFileName = true;
+    placeholderText = 'Click to select image';
+    placeholderIcon = '📷';
+    autoUpload = false;
+    uploadData = {};
+    // Traditional @Output() decorators
+    fileChange = new EventEmitter();
+    uploadSuccess = new EventEmitter();
+    uploadError = new EventEmitter();
+    uploadProgressChange = new EventEmitter();
+    // Readable signals created from @Input() decorator values
+    labelSignal = signal(this.label, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
+    acceptSignal = signal(this.accept, ...(ngDevMode ? [{ debugName: "acceptSignal" }] : []));
+    multipleSignal = signal(this.multiple, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : []));
+    disabledSignal = signal(this.disabled, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : []));
+    requiredSignal = signal(this.required, ...(ngDevMode ? [{ debugName: "requiredSignal" }] : []));
+    helperTextSignal = signal(this.helperText, ...(ngDevMode ? [{ debugName: "helperTextSignal" }] : []));
+    errorTextSignal = signal(this.errorText, ...(ngDevMode ? [{ debugName: "errorTextSignal" }] : []));
+    showPreviewSignal = signal(this.showPreview, ...(ngDevMode ? [{ debugName: "showPreviewSignal" }] : []));
+    previewWidthSignal = signal(this.previewWidth, ...(ngDevMode ? [{ debugName: "previewWidthSignal" }] : []));
+    previewHeightSignal = signal(this.previewHeight, ...(ngDevMode ? [{ debugName: "previewHeightSignal" }] : []));
+    previewBoxModeSignal = signal(this.previewBoxMode, ...(ngDevMode ? [{ debugName: "previewBoxModeSignal" }] : []));
+    showFileNameSignal = signal(this.showFileName, ...(ngDevMode ? [{ debugName: "showFileNameSignal" }] : []));
+    placeholderTextSignal = signal(this.placeholderText, ...(ngDevMode ? [{ debugName: "placeholderTextSignal" }] : []));
+    placeholderIconSignal = signal(this.placeholderIcon, ...(ngDevMode ? [{ debugName: "placeholderIconSignal" }] : []));
+    autoUploadSignal = signal(this.autoUpload, ...(ngDevMode ? [{ debugName: "autoUploadSignal" }] : []));
+    uploadDataSignal = signal(this.uploadData, ...(ngDevMode ? [{ debugName: "uploadDataSignal" }] : []));
     // Reactive state with signals
     id = signal(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{ debugName: "id" }] : []));
     isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
@@ -3140,11 +3159,11 @@ class CideEleFileInputComponent {
     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');
+    // Computed signals for better relationships
+    hasFiles = computed(() => this.files() !== null && this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
+    canUpload = computed(() => this.hasFiles() && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canUpload" }] : []));
+    isInErrorState = computed(() => this.uploadStatus() === 'error', ...(ngDevMode ? [{ debugName: "isInErrorState" }] : []));
+    isInSuccessState = computed(() => this.uploadStatus() === 'success', ...(ngDevMode ? [{ debugName: "isInSuccessState" }] : []));
     // Angular 20: Computed values using new features
     totalFileSize = computed(() => {
         if (!this.files())
@@ -3165,8 +3184,8 @@ class CideEleFileInputComponent {
     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" }] : []));
+    isPreviewBoxMode = computed(() => this.previewBoxModeSignal() && this.showPreviewSignal(), ...(ngDevMode ? [{ debugName: "isPreviewBoxMode" }] : []));
+    isImagePreviewAvailable = computed(() => this.showPreviewSignal() && this.previewUrls().length > 0, ...(ngDevMode ? [{ debugName: "isImagePreviewAvailable" }] : []));
     constructor() {
         // Angular 20: afterRenderEffect for DOM operations
         afterRenderEffect(() => {
@@ -3184,6 +3203,25 @@ class CideEleFileInputComponent {
             console.log('🎯 [FileInput] Component rendered and DOM is ready');
         });
     }
+    ngOnInit() {
+        // Update signals with initial @Input() values
+        this.labelSignal.set(this.label);
+        this.acceptSignal.set(this.accept);
+        this.multipleSignal.set(this.multiple);
+        this.disabledSignal.set(this.disabled);
+        this.requiredSignal.set(this.required);
+        this.helperTextSignal.set(this.helperText);
+        this.errorTextSignal.set(this.errorText);
+        this.showPreviewSignal.set(this.showPreview);
+        this.previewWidthSignal.set(this.previewWidth);
+        this.previewHeightSignal.set(this.previewHeight);
+        this.previewBoxModeSignal.set(this.previewBoxMode);
+        this.showFileNameSignal.set(this.showFileName);
+        this.placeholderTextSignal.set(this.placeholderText);
+        this.placeholderIconSignal.set(this.placeholderIcon);
+        this.autoUploadSignal.set(this.autoUpload);
+        this.uploadDataSignal.set(this.uploadData);
+    }
     writeValue(value) {
         console.log('📝 [FileInput] writeValue called with:', value);
         if (typeof value === 'string') {
@@ -3239,7 +3277,7 @@ class CideEleFileInputComponent {
         this.fileChange.emit(selectedFiles);
         this.onTouched();
         // Auto upload if enabled
-        if (this.autoUpload() && selectedFiles && selectedFiles.length > 0) {
+        if (this.autoUploadSignal() && selectedFiles && selectedFiles.length > 0) {
             console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', selectedFiles[0].name);
             this.uploadFile(selectedFiles[0]);
         }
@@ -3276,7 +3314,7 @@ class CideEleFileInputComponent {
         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) => {
+        this.fileManagerService.uploadFile(file, this.uploadDataSignal(), (progress) => {
             // Real progress callback from file manager service
             this.uploadProgress.set(progress);
             this.uploadProgressChange.emit(progress);
@@ -3375,7 +3413,7 @@ class CideEleFileInputComponent {
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
-        if (!this.showPreview() || !this.files()) {
+        if (!this.showPreviewSignal() || !this.files()) {
             return;
         }
         Array.from(this.files()).forEach(file => {
@@ -3404,6 +3442,8 @@ class CideEleFileInputComponent {
     }
     loadFileDetailsFromId(fileId) {
         console.log('🔍 [FileInput] Loading file details for ID:', fileId);
+        if (!fileId)
+            return;
         this.fileManagerService?.getFileDetails({ cyfm_id: fileId })?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
             next: (fileDetails) => {
                 console.log('📋 [FileInput] File details received:', fileDetails);
@@ -3416,7 +3456,7 @@ class CideEleFileInputComponent {
                         console.log('📝 [FileInput] File name set:', fileData.cyfm_name);
                     }
                     // If it's an image and we have base64 data, set preview
-                    if (this.showPreview() && fileData.cyfm_file_base64) {
+                    if (this.showPreviewSignal() && fileData.cyfm_file_base64) {
                         // Check if it's an image file based on file name or type
                         const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
                             this.isImageFileFromType(fileData.cyfm_type || '');
@@ -3499,7 +3539,7 @@ class CideEleFileInputComponent {
     }
     triggerFileSelect() {
         const fileInput = document.getElementById('cide-file-input-' + this.id());
-        if (fileInput && !this.disabled()) {
+        if (fileInput && !this.disabledSignal()) {
             fileInput.click();
         }
     }
@@ -3507,7 +3547,7 @@ class CideEleFileInputComponent {
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.disabled()) {
+        if (!this.disabledSignal()) {
             this.isDragOver.set(true);
             console.log('🔄 [FileInput] Drag over detected');
         }
@@ -3521,7 +3561,7 @@ class CideEleFileInputComponent {
     onDragEnter(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.disabled()) {
+        if (!this.disabledSignal()) {
             this.isDragOver.set(true);
             console.log('🔄 [FileInput] Drag enter detected');
         }
@@ -3530,7 +3570,7 @@ class CideEleFileInputComponent {
         event.preventDefault();
         event.stopPropagation();
         this.isDragOver.set(false);
-        if (this.disabled()) {
+        if (this.disabledSignal()) {
             console.log('⏸️ [FileInput] Drop ignored - component is disabled');
             return;
         }
@@ -3538,13 +3578,13 @@ class CideEleFileInputComponent {
         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)) {
+            if (this.acceptSignal() && !this.validateFileTypes(files)) {
                 console.log('❌ [FileInput] Invalid file types dropped');
                 this.notificationService.error('❌ Invalid file type. Please select files of the correct type.', { duration: 0 });
                 return;
             }
             // Handle single vs multiple files
-            if (!this.multiple() && files.length > 1) {
+            if (!this.multipleSignal() && files.length > 1) {
                 console.log('⚠️ [FileInput] Multiple files dropped but multiple is disabled');
                 this.notificationService.warning('⚠️ Only one file is allowed. Using the first file.', { duration: 0 });
                 // Create a new FileList with only the first file
@@ -3558,7 +3598,7 @@ class CideEleFileInputComponent {
         }
     }
     validateFileTypes(files) {
-        const acceptTypes = this.accept().split(',').map(type => type.trim());
+        const acceptTypes = this.acceptSignal().split(',').map(type => type.trim());
         if (acceptTypes.length === 0 || acceptTypes[0] === '')
             return true;
         return Array.from(files).every(file => {
@@ -3587,7 +3627,7 @@ class CideEleFileInputComponent {
         this.fileChange.emit(files);
         this.onTouched();
         // Auto upload if enabled
-        if (this.autoUpload() && files.length > 0) {
+        if (this.autoUploadSignal() && files.length > 0) {
             console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', files[0].name);
             this.uploadFile(files[0]);
         }
@@ -3596,21 +3636,21 @@ class CideEleFileInputComponent {
         }
     }
     isRequired() {
-        return this.required();
+        return this.requiredSignal();
     }
     /**
      * Angular 20: Utility method to get upload data with proper typing
      * @returns Properly typed upload data
      */
     getUploadData() {
-        return this.uploadData();
+        return this.uploadDataSignal();
     }
     /**
      * Angular 20: Utility method to update upload data with type safety
      * @param data Partial upload data to merge with existing data
      */
     updateUploadData(data) {
-        const currentData = this.uploadData();
+        const currentData = this.uploadDataSignal();
         const updatedData = { ...currentData, ...data };
         // Note: This would require the uploadData to be a writable signal
         // For now, this method serves as a type-safe way to work with upload data
@@ -3619,28 +3659,28 @@ class CideEleFileInputComponent {
     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(),
+            label: this.labelSignal(),
+            required: this.requiredSignal(),
+            disabled: this.disabledSignal(),
+            accept: this.acceptSignal(),
+            multiple: this.multipleSignal(),
+            showPreview: this.showPreviewSignal(),
+            autoUpload: this.autoUploadSignal(),
             uploadStatus: this.uploadStatus(),
             isUploading: this.isUploading(),
             uploadProgress: this.uploadProgress(),
             files: this.files() ? Array.from(this.files()).map(f => ({ name: f.name, size: f.size, type: f.type })) : null,
             fileNames: this.fileNames(),
             previewUrls: this.previewUrls().length,
-            helperText: this.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()
+            helperText: this.helperTextSignal(),
+            errorText: this.errorTextSignal(),
+            placeholderText: this.placeholderTextSignal(),
+            placeholderIcon: this.placeholderIconSignal(),
+            previewWidth: this.previewWidthSignal(),
+            previewHeight: this.previewHeightSignal(),
+            previewBoxMode: this.previewBoxModeSignal(),
+            showFileName: this.showFileNameSignal(),
+            uploadData: this.uploadDataSignal()
         };
     }
     async getControlData() {
@@ -3662,14 +3702,14 @@ class CideEleFileInputComponent {
     }
     // 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.requiredSignal(), 'files:', !!this.files(), 'control.value:', control.value);
         // If upload is in progress (start or uploading status), return validation error
         if (this.uploadStatus() === 'start' || this.uploadStatus() === 'uploading') {
             console.log('⚠️ [FileInput] Validation ERROR: Upload in progress');
             return { 'uploadInProgress': { message: 'File upload in progress. Please wait...' } };
         }
         // If required and no file is selected and no control value (uploaded file ID), return validation error
-        if (this.required() && !this.files() && !control.value) {
+        if (this.requiredSignal() && !this.files() && !control.value) {
             console.log('⚠️ [FileInput] Validation ERROR: File required');
             return { 'required': { message: 'Please select a file to upload.' } };
         }
@@ -3677,7 +3717,7 @@ class CideEleFileInputComponent {
         return null; // No validation errors
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", required: "required", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: CideEleFileInputComponent,
@@ -3688,7 +3728,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @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"] }] });
+        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -3703,8 +3743,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (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: () => [] });
+                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], previewWidth: [{
+                type: Input
+            }], previewHeight: [{
+                type: Input
+            }], previewBoxMode: [{
+                type: Input
+            }], showFileName: [{
+                type: Input
+            }], placeholderText: [{
+                type: Input
+            }], placeholderIcon: [{
+                type: Input
+            }], autoUpload: [{
+                type: Input
+            }], uploadData: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], uploadSuccess: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], uploadProgressChange: [{
+                type: Output
+            }] } });
 
 class CideTextareaComponent {
     label = '';
@@ -4380,6 +4460,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['click']
             }] } });
 
+/**
+ * Directive to display images from file manager by ID
+ * Usage: <img cideEleFileImage [fileId]="yourFileId" [altText]="'Image'" class="your-css-classes" />
+ */
+class CideEleFileImageDirective {
+    fileId = null;
+    altText = 'Image';
+    fileManagerService = inject(CideEleFileManagerService);
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        this.loadImage();
+    }
+    ngOnDestroy() {
+        // Cleanup handled by takeUntilDestroyed
+    }
+    loadImage() {
+        if (!this.fileId) {
+            return;
+        }
+        console.log('🖼️ [FileImageDirective] Loading image for ID:', this.fileId);
+        this.fileManagerService.getFileDetails({ cyfm_id: this.fileId }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: (fileDetails) => {
+                console.log('📋 [FileImageDirective] File details received:', fileDetails);
+                if (fileDetails?.data?.length) {
+                    const fileData = fileDetails.data[0];
+                    this.displayImage(fileData);
+                }
+                else {
+                    console.warn('⚠️ [FileImageDirective] No file data found for ID:', this.fileId);
+                }
+            },
+            error: (error) => {
+                console.error('❌ [FileImageDirective] Error loading file details:', error);
+            }
+        });
+    }
+    displayImage(fileData) {
+        const imgElement = this.elementRef.nativeElement;
+        // Check if it's an image file
+        const isImage = this.isImageFile(fileData.cyfm_name || '', fileData.cyfm_type || '');
+        if (isImage) {
+            // For now, we'll use a placeholder or the file path
+            // In a real implementation, you might need to fetch the actual file content
+            if (fileData.cyfm_path) {
+                // If you have a direct URL to the file, use it
+                imgElement.src = fileData.cyfm_path;
+                imgElement.alt = fileData.cyfm_alt_text || this.altText;
+                console.log('✅ [FileImageDirective] Image loaded from path:', fileData.cyfm_path);
+            }
+            else if (fileData.cyfm_file_base64) {
+                // If base64 data is available, use it
+                let base64Data = fileData.cyfm_file_base64;
+                if (!base64Data.startsWith('data:')) {
+                    const mimeType = fileData.cyfm_type || 'image/jpeg';
+                    base64Data = `data:${mimeType};base64,${base64Data}`;
+                }
+                imgElement.src = base64Data;
+                imgElement.alt = fileData.cyfm_alt_text || this.altText;
+                console.log('✅ [FileImageDirective] Image loaded from base64 data');
+            }
+            else {
+                console.warn('⚠️ [FileImageDirective] No image data available for file:', fileData.cyfm_name);
+            }
+        }
+        else {
+            console.warn('⚠️ [FileImageDirective] File is not an image:', fileData.cyfm_name);
+        }
+    }
+    isImageFile(fileName, fileType) {
+        if (fileType && fileType.startsWith('image/')) {
+            return true;
+        }
+        if (fileName) {
+            const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
+            const lowerFileName = fileName.toLowerCase();
+            return imageExtensions.some(ext => lowerFileName.endsWith(ext));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFileImageDirective, isStandalone: true, selector: "[cideEleFileImage]", inputs: { fileId: "fileId", altText: "altText" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cideEleFileImage]',
+                    standalone: true
+                }]
+        }], propDecorators: { fileId: [{
+                type: Input
+            }], altText: [{
+                type: Input
+            }] } });
+
 class CideEleSkeletonLoaderComponent {
     width = '100%';
     height = '1rem';
@@ -6569,6 +6744,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class CideCoreFileManagerService {
+    http;
+    apiUrl = `${coreRoutesUrl?.fileManager}`;
+    fileListSubject = new BehaviorSubject([]);
+    fileList$ = this.fileListSubject.asObservable();
+    constructor(http) {
+        this.http = http;
+        console.log('CideCoreFileManagerService initialized - using real API');
+    }
+    /**
+     * Get file list from API
+     */
+    getFileList(body) {
+        const query = generateStringFromObject(body);
+        return this.http?.get(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]))
+            .pipe(tap((response) => {
+            if (response?.success) {
+                this.fileListSubject.next(response?.data || []);
+            }
+        }), catchError$1(error => {
+            console.error('CideCoreFileManagerService API error:', error);
+            return this.handleError(error);
+        }));
+    }
+    /**
+     * Get file list using mock data (deprecated - use getFileList instead)
+     */
+    getFileListWithMockData(_body) {
+        console.warn('getFileListWithMockData is deprecated. Use getFileList instead.');
+        return this.getFileList(_body);
+    }
+    /**
+     * Get file list from cache (if available)
+     */
+    getFileListFromCache() {
+        return this.fileListSubject.value;
+    }
+    /**
+     * Upload file with progress tracking
+     */
+    uploadFile(request) {
+        const formData = new FormData();
+        formData.append('file', request.file);
+        formData.append('altText', request.altText || '');
+        formData.append('tags', JSON.stringify(request.tags || []));
+        formData.append('permissions', JSON.stringify(request.permissions || []));
+        formData.append('userId', request.userId);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'upload']);
+        const req = new HttpRequest('POST', url, formData, {
+            reportProgress: true
+        });
+        return this.http.request(req).pipe(catchError$1(this.handleError));
+    }
+    /**
+     * Upload file with progress tracking (mock version - deprecated)
+     */
+    uploadFileWithMockData(request) {
+        console.warn('uploadFileWithMockData is deprecated. Use uploadFile instead.');
+        return this.uploadFile(request);
+    }
+    /**
+     * Update file metadata
+     */
+    updateFile(request) {
+        console.log('Updating file:', request);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]);
+        return this.http.post(url, request)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
+    }
+    /**
+     * Delete file
+     */
+    deleteFile(id) {
+        const payload = { cyfm_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.delete(url)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
+    }
+    /**
+     * Delete multiple files
+     */
+    deleteMultipleFiles(ids) {
+        console.log('Deleting multiple files:', ids);
+        const payload = { ids };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.delete(url)
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
+    }
+    /**
+     * Toggle file active status
+     */
+    toggleFileStatus(id) {
+        console.log('Toggling file status:', id);
+        const payload = { id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        return this.http.put(url, {})
+            .pipe(tap((response) => {
+            if (response.success) {
+                this.refreshFileList();
+            }
+        }), catchError$1(this.handleError));
+    }
+    /**
+     * Get file by ID
+     */
+    getFileById(id) {
+        console.log('Getting file by ID:', id);
+        const payload = { cyfm_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'byId', query]);
+        return this.http.get(url)
+            .pipe(catchError$1(this.handleError));
+    }
+    /**
+     * Find file by ID
+     */
+    findFileById(id, items = this.fileListSubject.value) {
+        for (const item of items) {
+            if (item._id === id) {
+                return item;
+            }
+        }
+        return null;
+    }
+    /**
+     * Get file size in human readable format
+     */
+    getFileSizeDisplay(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    /**
+     * Get file type icon
+     */
+    getFileTypeIcon(fileType) {
+        const typeMap = {
+            'image/jpeg': 'image',
+            'image/png': 'image',
+            'image/gif': 'image',
+            'image/svg+xml': 'image',
+            'application/pdf': 'picture_as_pdf',
+            'text/plain': 'description',
+            'text/html': 'code',
+            'application/json': 'code',
+            'application/javascript': 'code',
+            'text/css': 'code',
+            'application/zip': 'folder_zip',
+            'application/x-zip-compressed': 'folder_zip',
+            'application/msword': 'description',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'description',
+            'application/vnd.ms-excel': 'table_chart',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'table_chart',
+            'application/vnd.ms-powerpoint': 'slideshow',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'slideshow'
+        };
+        return typeMap[fileType] || 'insert_drive_file';
+    }
+    /**
+     * Refresh file list from server
+     */
+    refreshFileList() {
+        const defaultBody = {
+            pageIndex: 1,
+            pageSize: 10
+        };
+        this.getFileList(defaultBody).subscribe({
+            next: () => {
+                console.log('File list refreshed successfully');
+            },
+            error: (error) => {
+                console.error('Error refreshing file list:', error);
+            }
+        });
+    }
+    /**
+     * Handle errors
+     */
+    handleError(error) {
+        let errorMessage = 'An error occurred';
+        if (error instanceof Error) {
+            errorMessage = error.message;
+        }
+        else if (typeof error === 'string') {
+            errorMessage = error;
+        }
+        console.error('CideCoreFileManagerService Error:', errorMessage);
+        return throwError(() => new Error(errorMessage));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreFileManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
 class CideEleConfirmationModalComponent {
     // Modern Angular 20+ dependency injection
     confirmationService = inject(ConfirmationService);
@@ -7469,5 +7861,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileInputComponent, CideEleFileManagerService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, DEFAULT_GRID_CONFIG, DropdownManagerService, NotificationService, TooltipDirective };
+export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map