cloud-ide-element 1.1.142 → 1.1.144

package/fesm2022/cloud-ide-element.mjs

@@ -9533,14 +9533,37 @@ class CideEleFileImageDirective {
     fileManagerService = inject(CideEleFileManagerService);
     elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    previousFileId = null;
     ngOnInit() {
         this.loadImage();
+        this.previousFileId = this.fileId;
+    }
+    ngOnChanges(changes) {
+        // Check if fileId has changed
+        if (changes['fileId'] && !changes['fileId'].firstChange) {
+            const currentFileId = changes['fileId'].currentValue;
+            const previousFileId = changes['fileId'].previousValue;
+            // Only reload if the fileId actually changed
+            if (currentFileId !== previousFileId) {
+                console.log('🔄 [FileImageDirective] File ID changed from', previousFileId, 'to', currentFileId);
+                this.previousFileId = currentFileId;
+                // If fileId is null or empty, clear the image
+                if (!currentFileId || currentFileId.trim() === '') {
+                    this.clearImage();
+                }
+                else {
+                    // Load the new image
+                    this.loadImage();
+                }
+            }
+        }
     }
     ngOnDestroy() {
         // Cleanup handled by takeUntilDestroyed
     }
     loadImage() {
-        if (!this.fileId) {
+        if (!this.fileId || this.fileId.trim() === '') {
+            this.clearImage();
             return;
         }
         console.log('🖼️ [FileImageDirective] Loading image for ID:', this.fileId);
@@ -9553,13 +9576,21 @@ class CideEleFileImageDirective {
                 }
                 else {
                     console.warn('⚠️ [FileImageDirective] No file data found for ID:', this.fileId);
+                    this.clearImage();
                 }
             },
             error: (error) => {
                 console.error('❌ [FileImageDirective] Error loading file details:', error);
+                this.clearImage();
             }
         });
     }
+    clearImage() {
+        const imgElement = this.elementRef.nativeElement;
+        imgElement.src = '';
+        imgElement.alt = this.altText;
+        console.log('🧹 [FileImageDirective] Image cleared');
+    }
     displayImage(fileData) {
         const imgElement = this.elementRef.nativeElement;
         // Use base64 data directly
@@ -9578,7 +9609,7 @@ class CideEleFileImageDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFileImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CideEleFileImageDirective, isStandalone: true, selector: "[cideEleFileImage]", inputs: { fileId: "fileId", altText: "altText" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CideEleFileImageDirective, isStandalone: true, selector: "[cideEleFileImage]", inputs: { fileId: "fileId", altText: "altText" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFileImageDirective, decorators: [{
             type: Directive,