cloud-ide-element 1.0.52 → 1.0.54

package/fesm2022/cloud-ide-element.mjs

@@ -2570,18 +2570,30 @@ class CideEleFileManagerService {
         this.http = http;
     }
     /**
-     * Upload a file with base64 encoding
+     * Upload a file with base64 encoding and progress tracking
      * @param file The file to upload
      * @param additionalData Additional data to include in the payload
+     * @param progressCallback Optional callback for progress updates
      * @returns Observable with the upload response
      */
-    uploadFile(file, additionalData) {
-        // Convert file to base64
+    uploadFile(file, additionalData, progressCallback) {
+        // Convert file to base64 with progress tracking
         return new Observable(observer => {
             const reader = new FileReader();
+            // Track file reading progress
+            reader.onprogress = (event) => {
+                if (event.lengthComputable && progressCallback) {
+                    const progress = (event.loaded / event.total) * 50; // File reading is 50% of total progress
+                    progressCallback(progress);
+                }
+            };
             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,
@@ -2598,10 +2610,24 @@ class CideEleFileManagerService {
                     fileData: base64Data, // Base64 file data
                     ...additionalData
                 };
-                // Make the HTTP request
-                this.http.post(`${this.baseUrl}/upload`, payload)
-                    .subscribe({
-                    next: (response) => observer.next(response),
+                // 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);
+                        }
+                        else if (event.type === 4) { // HttpEventType.Response
+                            if (progressCallback) {
+                                progressCallback(100);
+                            }
+                            observer.next(event.body);
+                        }
+                    },
                     error: (error) => observer.error(error)
                 });
             };
@@ -2849,10 +2875,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 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;
@@ -2867,6 +2895,7 @@ class CideEleFileInputComponent {
     id = Math.random().toString(36).substring(2, 10);
     isUploading = false;
     uploadProgress = 0;
+    uploadStatus = 'idle';
     uploadNotificationId = null;
     fileChange = new EventEmitter();
     uploadSuccess = new EventEmitter();
@@ -2879,7 +2908,9 @@ class CideEleFileInputComponent {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onChange = (files) => { };
     onTouched = () => { };
+    onValidatorChange = () => { };
     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.generatePreviews();
@@ -2890,81 +2921,125 @@ class CideEleFileInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
     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);
         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.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]);
         }
+        else {
+            console.log('⏸️ [FileInput] Auto upload disabled or no files');
+        }
     }
     clearFiles() {
+        console.log('🗑️ [FileInput] clearFiles called');
         this.files = null;
         this.fileNames = [];
         this.clearPreviews();
+        this.uploadStatus = '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');
+        // Set upload status to 'start' before starting upload
+        this.uploadStatus = '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.uploadProgressChange.emit(0);
-        // Make form control invalid during upload
+        console.log('📊 [FileInput] Upload progress initialized to 0%');
+        // Make form control invalid during upload - this prevents form submission
         this.onChange(null);
-        // Configure file manager service with base URL
-        // this.fileManagerService.setBaseUrl(this.baseUrl);
+        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);
-        // Simulate progress for base64 conversion
-        this.simulateProgress();
-        this.fileManagerService.uploadFile(file, this.uploadData).subscribe({
+        console.log('🔔 [FileInput] Progress notification started with ID:', this.uploadNotificationId);
+        this.fileManagerService.uploadFile(file, this.uploadData, (progress) => {
+            // Real progress callback from file manager service
+            this.uploadProgress = 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);
+                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)}%`);
+            }
+        }).subscribe({
             next: (response) => {
-                // Clear progress interval
-                if (this.progressInterval) {
-                    clearInterval(this.progressInterval);
-                    this.progressInterval = null;
-                }
+                console.log('🎉 [FileInput] Upload SUCCESS - Response received:', response);
+                // Set upload status to 'success'
+                this.uploadStatus = 'success';
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus);
                 // Complete the progress
                 this.uploadProgress = 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);
+                    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;
                 if (uploadedId) {
-                    console.log('✅ File uploaded successfully with ID:', 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');
                 }
                 else {
-                    console.error('❌ Upload successful but no ID returned:', response);
+                    console.error('❌ [FileInput] Upload successful but no ID returned:', response);
                     this.uploadError.emit('Upload successful but no ID returned');
                 }
                 this.isUploading = false;
+                console.log('🔄 [FileInput] isUploading set to false');
+                // Trigger validation update to clear upload in progress error
+                this.onValidatorChange();
+                console.log('✅ [FileInput] Validation triggered - should clear upload in progress error');
             },
             error: (error) => {
-                console.error('❌ Upload failed:', error);
-                // Clear progress interval
-                if (this.progressInterval) {
-                    clearInterval(this.progressInterval);
-                    this.progressInterval = null;
-                }
+                console.error('💥 [FileInput] Upload FAILED:', error);
+                // Set upload status to 'error' and remove upload validation error
+                this.uploadStatus = 'error';
+                console.log('🔄 [FileInput] Upload status set to:', this.uploadStatus);
                 // Remove progress notification and show error
                 if (this.uploadNotificationId) {
                     this.notificationService.remove(this.uploadNotificationId);
+                    console.log('🔔 [FileInput] Progress notification removed due to error');
                 }
                 this.notificationService.error(`Upload failed: ${error.message || error.error?.message || 'Upload failed'}`);
                 this.uploadNotificationId = null;
@@ -2972,27 +3047,13 @@ class CideEleFileInputComponent {
                 this.isUploading = false;
                 this.uploadProgress = 0;
                 this.uploadProgressChange.emit(0);
+                console.log('🔄 [FileInput] Upload state reset - isUploading: false, progress: 0%');
+                // Trigger validation update to clear upload in progress error
+                this.onValidatorChange();
+                console.log('✅ [FileInput] Validation triggered - should clear upload in progress error');
             }
         });
     }
-    progressInterval = null;
-    simulateProgress() {
-        this.progressInterval = setInterval(() => {
-            if (this.uploadProgress < 95 && this.isUploading) { // Continue until 95% and still uploading
-                this.uploadProgress += Math.random() * 5; // Smaller increments for smoother progress
-                this.uploadProgressChange.emit(this.uploadProgress);
-                // Update progress notification
-                if (this.uploadNotificationId) {
-                    this.notificationService.updateProgress(this.uploadNotificationId, this.uploadProgress, `Uploading file... ${Math.round(this.uploadProgress)}%`);
-                }
-            }
-            else if (this.uploadProgress >= 95) {
-                // Stop at 95% and wait for actual API response
-                clearInterval(this.progressInterval);
-                this.progressInterval = null;
-            }
-        }, 400); // Slightly slower updates
-    }
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
@@ -3049,11 +3110,6 @@ class CideEleFileInputComponent {
     ngOnDestroy() {
         // Clean up preview URLs to prevent memory leaks
         this.clearPreviews();
-        // Clean up progress interval
-        if (this.progressInterval) {
-            clearInterval(this.progressInterval);
-            this.progressInterval = null;
-        }
         // Clean up any active upload notification
         if (this.uploadNotificationId) {
             this.notificationService.remove(this.uploadNotificationId);
@@ -3072,14 +3128,96 @@ class CideEleFileInputComponent {
     hasImages() {
         return this.previewUrls.length > 0;
     }
+    isRequired() {
+        return this.required;
+    }
+    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
+        };
+    }
+    async getControlData() {
+        console.log('🔍 [FileInput] getControlData called');
+        const cide_element_data = await this.elementService?.getElementData({ sype_key: this.id });
+        if (cide_element_data) {
+            console.log('📋 [FileInput] Element data loaded:', cide_element_data);
+            // 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');
+            // Trigger validation update
+            this.onValidatorChange();
+        }
+        else {
+            console.log('⚠️ [FileInput] No element data found for key:', this.id);
+        }
+    }
+    // Validator implementation
+    validate(control) {
+        console.log('🔍 [FileInput] validate() called - uploadStatus:', this.uploadStatus, 'required:', this.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') {
+            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) {
+            console.log('⚠️ [FileInput] Validation ERROR: File required');
+            return { 'required': { message: 'Please select a file to upload.' } };
+        }
+        console.log('✅ [FileInput] Validation PASSED: No errors');
+        return null; // No validation errors
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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", 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: "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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CideEleFileInputComponent),
                 multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => 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\">{{ label }}</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-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  <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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -3088,8 +3226,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CideEleFileInputComponent),
                             multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => 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\">{{ label }}</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-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
+                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <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: [{
@@ -3098,6 +3241,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], helperText: [{
                 type: Input
             }], errorText: [{