cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-upload.mjs

@@ -1,38 +1,40 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Component, NgModule } from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, ViewChildren, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'cax-design-system/progressspinner';
 import { ProgressSpinnerModule } from 'cax-design-system/progressspinner';
-import * as i3 from 'cax-design-system/button';
-import { Button } from 'cax-design-system/button';
 import { FormsModule } from '@angular/forms';
+import { Button } from 'cax-design-system/button';
 
 class UploadComponent {
-    invalid = false;
+    cdr;
+    previewItems;
     style;
-    maxFileSize = 30;
-    inputFiles = 'Input Files';
+    maxFileSize = 3;
+    labelText = 'Input Files';
     uploadString = 'uploading the file';
-    errorText = 'Please upload a file';
     allowMultiple = true;
-    componentId = '';
     allowedFileTypes = [];
-    // Enhanced event emitters
-    fileSelected = new EventEmitter();
-    filesQueued = new EventEmitter();
-    uploadStarted = new EventEmitter();
-    uploadCompleted = new EventEmitter();
-    uploadCanceled = new EventEmitter();
-    uploadError = new EventEmitter();
-    fileRemoved = new EventEmitter();
-    allFilesRemoved = new EventEmitter();
-    uploadStatusChange = new EventEmitter();
+    aspectRatios = [];
+    // Simplified event emitters
+    onSelect = new EventEmitter();
+    onUpload = new EventEmitter();
+    onRemove = new EventEmitter();
+    onClear = new EventEmitter();
+    onError = new EventEmitter();
+    onStatusChange = new EventEmitter();
+    onFileListChange = new EventEmitter();
     isDragging = false;
     uploadedFiles = [];
     uploadStatus = 'idle';
     isProcessingQueue = false;
     uniqueId = '';
+    isExpanded = false;
+    dynamicMaxHeight = 'none';
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     // Computed property for accept attribute in file input
     get acceptFileTypes() {
         if (!this.allowedFileTypes || this.allowedFileTypes.length === 0)
@@ -43,9 +45,40 @@ class UploadComponent {
     get activeFilesCount() {
         return this.uploadedFiles.filter((file) => file.status !== 'canceled').length;
     }
+    get failedFilesCount() {
+        return this.uploadedFiles.filter((file) => file.status === 'error').length;
+    }
     ngOnInit() {
-        // Generate unique ID if not provided through input
-        this.uniqueId = this.componentId || `upload-${Math.random().toString(36).substring(2, 11)}`;
+        // Generate unique ID
+        this.uniqueId = `upload-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    ngAfterViewInit() {
+        // Recalculate max-height whenever the list items change
+        this.previewItems.changes.subscribe(() => {
+            this.calculateMaxHeight();
+        });
+        // Initial check
+        this.calculateMaxHeight();
+    }
+    /**
+     * Calculates the dynamic max-height to show exactly 6.5 items
+     */
+    calculateMaxHeight() {
+        if (!this.isExpanded || !this.previewItems || this.previewItems.length < 7) {
+            this.dynamicMaxHeight = 'none';
+        }
+        else {
+            const items = this.previewItems.toArray();
+            let totalHeight = 0;
+            const gap = 8; // var(--space-200)
+            for (let i = 0; i < 6; i++) {
+                totalHeight += items[i].nativeElement.offsetHeight + gap;
+            }
+            // Add half of the 7th item
+            totalHeight += items[6].nativeElement.offsetHeight / 2;
+            this.dynamicMaxHeight = `${totalHeight}px`;
+        }
+        this.cdr.detectChanges();
     }
     onDragOver(event) {
         event.preventDefault();
@@ -57,7 +90,7 @@ class UploadComponent {
         event.stopPropagation();
         this.isDragging = false;
     }
-    onDrop(event) {
+    async onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
         this.isDragging = false;
@@ -65,67 +98,121 @@ class UploadComponent {
         if (!files || files.length === 0)
             return;
         const fileArray = Array.from(files);
-        const validFiles = fileArray.filter((file) => this.validateFile(file));
-        // Queue all files for upload
-        validFiles.forEach((file) => this.queueFile(file));
-        // Emit the queued files event
+        // Process all files with async validation
+        const results = await Promise.all(fileArray.map(async (file) => ({
+            file,
+            error: await this.getValidationError(file)
+        })));
+        results.forEach((res) => this.queueFile(res.file, res.error));
+        // Emit the queued files event (for valid ones only)
+        const validFiles = results.filter((res) => !res.error).map((res) => res.file);
         if (validFiles.length > 0) {
-            this.filesQueued.emit(validFiles);
+            this.onSelect.emit(validFiles);
         }
         // Start processing the queue if not already processing
         if (!this.isProcessingQueue) {
             this.processQueue();
         }
+        this.emitFileListUpdate();
     }
-    handleFileInput(event) {
+    async handleFileInput(event) {
         const files = event.target.files;
         if (!files)
             return;
         const fileArray = Array.from(files);
-        const validFiles = fileArray.filter((file) => this.validateFile(file));
-        // Queue all files for upload
-        validFiles.forEach((file) => this.queueFile(file));
-        // Emit the queued files event
+        // Process all files with async validation
+        const results = await Promise.all(fileArray.map(async (file) => ({
+            file,
+            error: await this.getValidationError(file)
+        })));
+        results.forEach((res) => this.queueFile(res.file, res.error));
+        // Emit the queued files event (for valid ones only)
+        const validFiles = results.filter((res) => !res.error).map((res) => res.file);
         if (validFiles.length > 0) {
-            this.filesQueued.emit(validFiles);
+            this.onSelect.emit(validFiles);
         }
         // Start processing the queue if not already processing
         if (!this.isProcessingQueue) {
             this.processQueue();
         }
+        this.emitFileListUpdate();
         // 🔹 Reset the input value so the same file can be selected again
         event.target.value = null;
     }
-    // New method for file validation
-    validateFile(file) {
+    // New method for file validation returning error message if any
+    async getValidationError(file) {
         // Size validation
         if (file.size > this.maxFileSize * 1024 * 1024) {
-            this.emitError(file, `File size should be less than ${this.maxFileSize}MB`);
-            return false;
+            const msg = `File size should be less than ${this.maxFileSize}MB`;
+            this.emitError(file, msg);
+            return msg;
         }
         // File type validation
         if (this.allowedFileTypes.length > 0) {
             const fileExtension = this.getFileExtension(file.name).toLowerCase();
             if (!this.allowedFileTypes.includes(fileExtension)) {
-                this.emitError(file, `Only ${this.allowedFileTypes.join(', ')} files are allowed`);
-                return false;
+                const msg = `Only ${this.allowedFileTypes.join(', ')} files are allowed`;
+                this.emitError(file, msg);
+                return msg;
             }
         }
-        return true;
+        // Aspect ratio validation for images
+        const aspectError = await this.checkAspectRatio(file);
+        if (aspectError) {
+            this.emitError(file, aspectError);
+            return aspectError;
+        }
+        return null;
+    }
+    /**
+     * Checks if an image file matches the required aspect ratios
+     */
+    async checkAspectRatio(file) {
+        if (!file.type.startsWith('image/') || !this.aspectRatios || this.aspectRatios.length === 0) {
+            return null;
+        }
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => {
+                const actualRatio = img.width / img.height;
+                const isValid = this.aspectRatios.some((ratioStr) => {
+                    const [w, h] = ratioStr.split(':').map(Number);
+                    if (!w || !h)
+                        return false;
+                    const targetRatio = w / h;
+                    // Use a small epsilon for floating point comparison (5% tolerance)
+                    return Math.abs(actualRatio - targetRatio) < 0.05;
+                });
+                if (isValid) {
+                    resolve(null);
+                }
+                else {
+                    resolve(`Image aspect ratio should be ${this.aspectRatios.join(' or ')}`);
+                }
+                URL.revokeObjectURL(img.src);
+            };
+            img.onerror = () => {
+                // If we can't load the image, we skip aspect ratio validation
+                resolve(null);
+                URL.revokeObjectURL(img.src);
+            };
+            img.src = URL.createObjectURL(file);
+        });
     }
     // Helper method to get file extension
     getFileExtension(filename) {
         return filename.split('.').pop() || '';
     }
     // Queue a file for upload
-    queueFile(file) {
+    queueFile(file, errorMessage = null) {
         const uploadEntry = {
             file,
-            status: 'queued',
-            progress: 0
+            status: errorMessage ? 'error' : 'queued',
+            progress: 0,
+            errorMessage: errorMessage || undefined
         };
-        this.uploadedFiles.push(uploadEntry);
-        if (this.uploadStatus === 'idle') {
+        this.uploadedFiles.unshift(uploadEntry);
+        if (this.uploadStatus === 'idle' && !errorMessage) {
             this.updateUploadStatus('uploading');
         }
     }
@@ -133,24 +220,37 @@ class UploadComponent {
     updateUploadStatus(status) {
         if (this.uploadStatus !== status) {
             this.uploadStatus = status;
-            this.uploadStatusChange.emit(status);
+            this.onStatusChange.emit(status);
         }
     }
-    // Process the queue of files sequentially
+    /**
+     * Emits the current state of the file list categorized by success/failure
+     */
+    emitFileListUpdate() {
+        const successful = this.uploadedFiles.filter((f) => f.status === 'complete').map((f) => f.file);
+        const failed = this.uploadedFiles
+            .filter((f) => f.status === 'error')
+            .map((f) => ({
+            file: f.file,
+            error: f.errorMessage || 'Unknown error'
+        }));
+        this.onFileListChange.emit({ successful, failed });
+    }
+    // Process the queue of files simultaneously
     async processQueue() {
         if (this.isProcessingQueue)
             return;
         this.isProcessingQueue = true;
-        // Find the next file to upload
-        let nextFileIndex = this.uploadedFiles.findIndex((file) => file.status === 'queued');
-        while (nextFileIndex !== -1) {
-            const currentFile = this.uploadedFiles[nextFileIndex];
-            await this.processFile(currentFile, nextFileIndex);
-            // Find the next file after processing
-            nextFileIndex = this.uploadedFiles.findIndex((file) => file.status === 'queued');
+        while (this.uploadedFiles.some((file) => file.status === 'queued')) {
+            const currentlyQueued = this.uploadedFiles.filter((file) => file.status === 'queued');
+            // Process all currently queued files in parallel
+            await Promise.all(currentlyQueued.map((fileEntry) => {
+                const index = this.uploadedFiles.indexOf(fileEntry);
+                return this.processFile(fileEntry, index);
+            }));
         }
         this.isProcessingQueue = false;
-        // Check if all uploads are complete and there are no more files to process
+        // Check if all uploads are complete
         if (this.uploadedFiles.length > 0 && this.uploadedFiles.some((file) => file.status === 'complete') && !this.hasQueuedOrUploading) {
             this.updateUploadStatus('complete');
         }
@@ -164,14 +264,12 @@ class UploadComponent {
     }
     // Emit error event
     emitError(file, message) {
-        this.uploadError.emit({ file, error: message });
+        this.onError.emit({ file, error: message });
     }
     async processFile(fileEntry, index) {
         // Update status to uploading
         fileEntry.status = 'uploading';
         fileEntry.progress = 0;
-        this.fileSelected.emit(fileEntry.file);
-        this.uploadStarted.emit(fileEntry.file);
         try {
             // Simulate upload with progress updates
             for (let progress = 0; progress <= 100; progress += 10) {
@@ -182,14 +280,16 @@ class UploadComponent {
                     break;
                 }
                 fileEntry.progress = progress;
-                // Simulate network delay
-                await new Promise((resolve) => setTimeout(resolve, 200));
+                // Simulate network delay based on file size (min 100ms, max 1000ms per step)
+                const stepDelay = Math.max(100, Math.min(1000, fileEntry.file.size / 1024 / 10));
+                await new Promise((resolve) => setTimeout(resolve, stepDelay));
             }
             // Only set to complete if still uploading (not canceled or errored)
             if (fileEntry.status === 'uploading') {
                 fileEntry.status = 'complete';
                 fileEntry.progress = 100;
-                this.uploadCompleted.emit(fileEntry.file);
+                this.onUpload.emit(fileEntry.file);
+                this.emitFileListUpdate();
             }
         }
         catch (error) {
@@ -198,6 +298,7 @@ class UploadComponent {
             const errorMessage = error instanceof Error ? error.message : 'Unknown upload error';
             fileEntry.errorMessage = errorMessage;
             this.emitError(fileEntry.file, errorMessage);
+            this.emitFileListUpdate();
         }
     }
     cancelUpload(index) {
@@ -208,10 +309,6 @@ class UploadComponent {
                 const previousStatus = fileToCancel.status;
                 if (previousStatus === 'uploading' || previousStatus === 'queued') {
                     fileToCancel.status = 'canceled';
-                    // Only emit if it was actively uploading (not just queued)
-                    if (previousStatus === 'uploading') {
-                        this.uploadCanceled.emit(fileToCancel.file);
-                    }
                 }
             }
         }
@@ -235,11 +332,7 @@ class UploadComponent {
         this.uploadedFiles.forEach((file) => {
             if (file.status === 'uploading' || file.status === 'queued') {
                 hadActiveUploads = true;
-                const previousStatus = file.status;
                 file.status = 'canceled';
-                if (previousStatus === 'uploading') {
-                    this.uploadCanceled.emit(file.file);
-                }
             }
         });
         if (hadActiveUploads && !this.hasQueuedOrUploading) {
@@ -251,8 +344,9 @@ class UploadComponent {
         if (fileToRemove.status === 'uploading' || fileToRemove.status === 'queued') {
             this.cancelUpload(index);
         }
-        this.fileRemoved.emit(fileToRemove.file);
+        this.onRemove.emit(fileToRemove.file);
         this.uploadedFiles.splice(index, 1);
+        this.emitFileListUpdate();
         // 🔹 Reset input element to allow re-uploading same file
         const fileInput = document.getElementById(`fileInput-${this.uniqueId}`);
         if (fileInput) {
@@ -271,10 +365,11 @@ class UploadComponent {
         this.cancelAllUploads();
         // Only emit if there were files to remove
         if (this.uploadedFiles.length > 0) {
-            this.allFilesRemoved.emit();
+            this.onClear.emit();
         }
         this.uploadedFiles = [];
         this.updateUploadStatus('idle');
+        this.emitFileListUpdate();
         const fileInput = document.getElementById(`fileInput-${this.uniqueId}`);
         if (fileInput) {
             fileInput.value = '';
@@ -320,49 +415,67 @@ class UploadComponent {
         const activeFilesCount = this.uploadedFiles.filter((file) => file.status !== 'canceled' && file.status !== 'error').length;
         return activeFilesCount > 0 ? Math.round((totalProgress / (activeFilesCount * 100)) * 100) : 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: UploadComponent, isStandalone: false, selector: "cax-upload", inputs: { invalid: "invalid", style: "style", maxFileSize: "maxFileSize", inputFiles: "inputFiles", uploadString: "uploadString", errorText: "errorText", allowMultiple: "allowMultiple", componentId: "componentId", allowedFileTypes: "allowedFileTypes" }, outputs: { fileSelected: "fileSelected", filesQueued: "filesQueued", uploadStarted: "uploadStarted", uploadCompleted: "uploadCompleted", uploadCanceled: "uploadCanceled", uploadError: "uploadError", fileRemoved: "fileRemoved", allFilesRemoved: "allFilesRemoved", uploadStatusChange: "uploadStatusChange" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, classAttribute: "cax-element" }, ngImport: i0, template: "<p class=\"cax-files\">{{inputFiles}}</p>\r\n<div class=\"cax-upload-menu\" [ngStyle]=\"style\"\r\n     [class.dragging]=\"isDragging\" \r\n     (click)=\"openFileSelector()\">\r\n     <input\r\n     type=\"file\"\r\n     id=\"fileInput-{{uniqueId}}\"\r\n     style=\"display:none\"\r\n     [multiple]=\"allowMultiple\"\r\n     [accept]=\"acceptFileTypes\"\r\n     (change)=\"handleFileInput($event)\"\r\n   />\r\n\r\n  <!-- Default Upload State -->\r\n  <ng-container *ngIf=\"uploadStatus === 'idle'\" >\r\n    <div class=\"cax-upload-options\" >\r\n      <p class=\"hint-text\">\r\n        <span class=\"drop-files\">Drop files here</span> or browse files from your device\r\n      </p>\r\n      <p class=\"max-size\">Max. File Size: {{ maxFileSize }}MB</p>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- Uploading State -->\r\n<div *ngIf=\"uploadStatus === 'uploading'\" class=\"cax-upload-status uploading\" >\r\n  <div class=\"status-container\">\r\n    <cax-progressSpinner\r\n        [strokeColor]=\"'primary'\"\r\n        [size]=\"'lg'\"\r\n        [animationDuration]=\"'2s'\"\r\n      ></cax-progressSpinner>\r\n    <p >{{ uploadingProgressText }}</p>\r\n    <cax-button\r\n      [label]=\"'Cancel'\"\r\n      [rounded]=\"false\"\r\n      [severity]=\"'danger'\"\r\n      [size]=\"'large'\"\r\n      [outlined]=\"'false'\"\r\n      [link]=\"true\"\r\n      (click)=\"cancelCurrentUpload(); $event.stopPropagation()\"\r\n    />\r\n  </div>\r\n</div>\r\n\r\n  <!-- Complete State -->\r\n  <div *ngIf=\"uploadStatus === 'complete'\" class=\"cax-upload-status complete\">\r\n    <div class=\"status-container\">\r\n      <div class=\"success-icon\"><i class=\"cax cax-check\"></i></div>\r\n      <p>{{uploadString}}</p>\r\n      <cax-button\r\n        [label]=\"'Remove'\"\r\n        [rounded]=\"false\"\r\n        [severity]=\"'danger'\"\r\n        [size]=\"'large'\"\r\n        [outlined]=\"'false'\"\r\n        [link]=\"true\"\r\n        (click)=\"removeAllFiles(); $event.stopPropagation()\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error-upload\"></div>\r\n</div>\r\n<div *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error-upload\">\r\n  {{ errorText }}\r\n</div>\r\n\r\n<!-- stacked file -->\r\n<div *ngIf=\"uploadedFiles.length > 0\" class=\"cax-file-preview-wrapper\" [ngStyle]=\"style\">\r\n  <div\r\n    *ngFor=\"let item of uploadedFiles; let i = index\"\r\n    class=\"cax-file-preview\"\r\n    [ngClass]=\"{\r\n      'queued': item.status === 'queued',\r\n      'uploading': item.status === 'uploading',\r\n      'complete': item.status === 'complete',\r\n      'canceled': item.status === 'canceled'\r\n    }\"\r\n  >\r\n    <div class=\"file-info\">\r\n      <p class=\"file-name\">{{ item.file.name }}</p>\r\n    </div> \r\n\r\n    <!-- Show spinner for queued or uploading files -->\r\n    <div *ngIf=\"item.status === 'queued' || item.status === 'uploading'\" class=\"spinner\">\r\n      <cax-progressSpinner\r\n        [strokeColor]=\"'primary'\"\r\n        [size]=\"'sm'\"\r\n        [animationDuration]=\"'2s'\">\r\n      </cax-progressSpinner>\r\n    </div>\r\n    \r\n    <!-- Show remove button only for complete or canceled files -->\r\n    <button\r\n      *ngIf=\"item.status === 'complete' || item.status === 'canceled'\"\r\n      class=\"remove-button\"\r\n      (click)=\"removeFile(i); $event.stopPropagation()\">\r\n      <i class=\"cax cax-close\"></i> \r\n    </button>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-files{font-size:14px;font-weight:500;margin-bottom:10px}.cax-upload-menu{border-radius:12px;padding:24px 56px}.status-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;height:150px}.status-container p{margin:0;font-size:14px;font-weight:500}.status-container .success-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-container .success-icon i{font-size:1.5rem;font-weight:800}.cax-upload-options{text-align:center}.cax-upload-options .hint-text{font-size:14px;font-weight:500}.cax-upload-options .drop-files{font-weight:500;font-size:14px}.cax-upload-options .max-size{font-size:12px;margin-bottom:20px;font-weight:400}.cax-error-upload{font-size:14px;font-weight:400;padding-top:8px}.cax-options-container{display:flex;gap:24px;justify-content:center}.cax-upload-option{display:flex;flex-direction:column;align-items:center;cursor:pointer}.cax-upload-option .icon-container{width:48px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.cax-upload-option span{font-size:14px;font-weight:600;padding-top:10px}.cax-file-preview-wrapper{display:flex;flex-direction:column;gap:10px;margin-top:1rem}.cax-file-preview{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px}.cax-file-preview .file-info{display:flex;align-items:center;gap:10px}.cax-file-preview .file-info .file-icon img{width:32px;height:32px}.cax-file-preview .file-info .file-name{font-weight:500;font-size:14px}.cax-file-preview .spinner{margin-left:auto;font-size:20px!important}.cax-file-preview .remove-button{background:none;border:none;margin-left:auto;cursor:pointer}.cax-file-preview .remove-button i{font-size:20px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ProgressSpinner, selector: "cax-progressSpinner", inputs: ["styleClass", "strokeColor", "backgroundStrokeColor", "size", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    /**
+     * Formats bytes into a human-readable string (KB, MB, GB, etc.)
+     * @param bytes The number of bytes to format
+     * @param decimals Number of decimal places
+     * @returns A formatted string
+     */
+    formatBytes(bytes, decimals = 2) {
+        if (!+bytes)
+            return '0 Bytes';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+    }
+    /**
+     * Toggles the expanded state of the file list preview
+     */
+    toggleExpand() {
+        this.isExpanded = !this.isExpanded;
+        // Use timeout to allow Angular to render the items before measuring
+        setTimeout(() => this.calculateMaxHeight(), 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: UploadComponent, isStandalone: false, selector: "cax-upload", inputs: { style: "style", maxFileSize: "maxFileSize", labelText: "labelText", uploadString: "uploadString", allowMultiple: "allowMultiple", allowedFileTypes: "allowedFileTypes", aspectRatios: "aspectRatios" }, outputs: { onSelect: "onSelect", onUpload: "onUpload", onRemove: "onRemove", onClear: "onClear", onError: "onError", onStatusChange: "onStatusChange", onFileListChange: "onFileListChange" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, classAttribute: "cax-element" }, viewQueries: [{ propertyName: "previewItems", predicate: ["previewItem"], descendants: true }], ngImport: i0, template: "<div class=\"cax-upload-container\" [ngStyle]=\"style\">\n    <span class=\"cax-upload-label cax-text-action-md-semibold\">{{ labelText }}</span>\n    <div class=\"cax-upload-menu\" [class.dragging]=\"isDragging\" (click)=\"openFileSelector()\">\n        <input type=\"file\" id=\"fileInput-{{ uniqueId }}\" style=\"display: none\" [multiple]=\"allowMultiple\" [accept]=\"acceptFileTypes\" (change)=\"handleFileInput($event)\" />\n        <div class=\"cax-upload-options\" *ngIf=\"!isDragging\">\n            <span class=\"cax-upload-text cax-text-action-lg-medium\">Drag & drop files here or browse</span>\n            <div class=\"cax-upload-file-config\" *ngIf=\"maxFileSize || allowedFileTypes.length > 0 || aspectRatios.length > 0\">\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"maxFileSize\">Max. File Size: {{ maxFileSize }}MB</span>\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"allowedFileTypes.length > 0\">File Type: {{ allowedFileTypes.join(', ') | uppercase }}</span>\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"aspectRatios.length > 0\">Aspect Ratio: {{ aspectRatios.join(', ') }}</span>\n            </div>\n        </div>\n        <div class=\"cax-upload-options\" *ngIf=\"isDragging\">\n            <span class=\"cax-upload-text dragging cax-text-action-lg-medium\"><i class=\"cax cax-archive-down\"></i>Drop files to upload</span>\n        </div>\n    </div>\n    <div class=\"cax-file-preview-wrapper\" *ngIf=\"uploadedFiles.length > 0\">\n        <div class=\"cax-upload-more-count\" *ngIf=\"uploadedFiles.length > 4\">\n            <div>\n                <span class=\"cax-text-action-sm-medium\">{{ uploadedFiles.length }} files</span>\n                <span class=\"cax-upload-failed-count cax-text-action-sm-medium\" *ngIf=\"failedFilesCount > 0\">{{ failedFilesCount }} failed</span>\n            </div>\n            <span class=\"cax-upload-show-more cax-text-action-sm-link-regular\" (click)=\"toggleExpand()\">{{ isExpanded ? 'Show less' : 'Show more' }}</span>\n        </div>\n        <div class=\"cax-file-list\" [class.expanded]=\"isExpanded\" [style.max-height]=\"dynamicMaxHeight\">\n            <div\n                #previewItem\n                *ngFor=\"let item of isExpanded ? uploadedFiles : uploadedFiles.slice(0, 4); let i = index\"\n                class=\"cax-file-preview\"\n                [class.cax-file-preview-error]=\"item.status === 'error'\"\n                [class.active-gradient]=\"!isExpanded && i === 3 && uploadedFiles.length > 4\"\n            >\n                <div class=\"cax-file-preview-content\">\n                    <div class=\"file-info\">\n                        <i class=\"cax\" [class.cax-document-text]=\"item.status !== 'error'\" [class.cax-danger-triangle-bold]=\"item.status === 'error'\" [style.color]=\"item.status === 'error' ? 'var(--error-600)' : ''\"></i>\n                        <p class=\"file-name cax-text-action-md-medium\">{{ item.file.name }}</p>\n                        <span class=\"file-size cax-text-body-xsm-regular\">{{ formatBytes(item.file.size) }}</span>\n                    </div>\n\n                    <div *ngIf=\"item.status === 'queued' || item.status === 'uploading'\" class=\"spinner\">\n                        <cax-progressSpinner [strokeColor]=\"'primary'\" [size]=\"'sm'\" [animationDuration]=\"'2s'\"> </cax-progressSpinner>\n                    </div>\n\n                    <button *ngIf=\"item.status === 'complete' || item.status === 'canceled' || item.status === 'error'\" class=\"remove-button\" (click)=\"removeFile(i); $event.stopPropagation()\">\n                        <i class=\"cax cax-close\"></i>\n                    </button>\n                </div>\n                <span class=\"file-error cax-text-body-sm-regular\" *ngIf=\"item.status === 'error'\">{{ item.errorMessage }}</span>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-upload-container{display:flex;flex-direction:column;gap:8px}.cax-upload-menu{border-radius:12px;padding:24px 56px}.status-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;height:150px}.status-container p{margin:0;font-size:14px;font-weight:500}.status-container .success-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-container .success-icon i{font-size:1.5rem;font-weight:800}.cax-error-upload{font-size:14px;font-weight:400;padding-top:8px}.cax-options-container{display:flex;gap:24px;justify-content:center}.cax-upload-option{display:flex;flex-direction:column;align-items:center;cursor:pointer}.cax-upload-option .icon-container{width:48px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.cax-upload-option span{font-size:14px;font-weight:600;padding-top:10px}.cax-file-preview-wrapper{display:flex;flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ProgressSpinner, selector: "cax-progressSpinner", inputs: ["styleClass", "strokeColor", "backgroundStrokeColor", "size", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cax-upload', standalone: false, host: {
                         class: 'cax-element'
-                    }, template: "<p class=\"cax-files\">{{inputFiles}}</p>\r\n<div class=\"cax-upload-menu\" [ngStyle]=\"style\"\r\n     [class.dragging]=\"isDragging\" \r\n     (click)=\"openFileSelector()\">\r\n     <input\r\n     type=\"file\"\r\n     id=\"fileInput-{{uniqueId}}\"\r\n     style=\"display:none\"\r\n     [multiple]=\"allowMultiple\"\r\n     [accept]=\"acceptFileTypes\"\r\n     (change)=\"handleFileInput($event)\"\r\n   />\r\n\r\n  <!-- Default Upload State -->\r\n  <ng-container *ngIf=\"uploadStatus === 'idle'\" >\r\n    <div class=\"cax-upload-options\" >\r\n      <p class=\"hint-text\">\r\n        <span class=\"drop-files\">Drop files here</span> or browse files from your device\r\n      </p>\r\n      <p class=\"max-size\">Max. File Size: {{ maxFileSize }}MB</p>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- Uploading State -->\r\n<div *ngIf=\"uploadStatus === 'uploading'\" class=\"cax-upload-status uploading\" >\r\n  <div class=\"status-container\">\r\n    <cax-progressSpinner\r\n        [strokeColor]=\"'primary'\"\r\n        [size]=\"'lg'\"\r\n        [animationDuration]=\"'2s'\"\r\n      ></cax-progressSpinner>\r\n    <p >{{ uploadingProgressText }}</p>\r\n    <cax-button\r\n      [label]=\"'Cancel'\"\r\n      [rounded]=\"false\"\r\n      [severity]=\"'danger'\"\r\n      [size]=\"'large'\"\r\n      [outlined]=\"'false'\"\r\n      [link]=\"true\"\r\n      (click)=\"cancelCurrentUpload(); $event.stopPropagation()\"\r\n    />\r\n  </div>\r\n</div>\r\n\r\n  <!-- Complete State -->\r\n  <div *ngIf=\"uploadStatus === 'complete'\" class=\"cax-upload-status complete\">\r\n    <div class=\"status-container\">\r\n      <div class=\"success-icon\"><i class=\"cax cax-check\"></i></div>\r\n      <p>{{uploadString}}</p>\r\n      <cax-button\r\n        [label]=\"'Remove'\"\r\n        [rounded]=\"false\"\r\n        [severity]=\"'danger'\"\r\n        [size]=\"'large'\"\r\n        [outlined]=\"'false'\"\r\n        [link]=\"true\"\r\n        (click)=\"removeAllFiles(); $event.stopPropagation()\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error-upload\"></div>\r\n</div>\r\n<div *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error-upload\">\r\n  {{ errorText }}\r\n</div>\r\n\r\n<!-- stacked file -->\r\n<div *ngIf=\"uploadedFiles.length > 0\" class=\"cax-file-preview-wrapper\" [ngStyle]=\"style\">\r\n  <div\r\n    *ngFor=\"let item of uploadedFiles; let i = index\"\r\n    class=\"cax-file-preview\"\r\n    [ngClass]=\"{\r\n      'queued': item.status === 'queued',\r\n      'uploading': item.status === 'uploading',\r\n      'complete': item.status === 'complete',\r\n      'canceled': item.status === 'canceled'\r\n    }\"\r\n  >\r\n    <div class=\"file-info\">\r\n      <p class=\"file-name\">{{ item.file.name }}</p>\r\n    </div> \r\n\r\n    <!-- Show spinner for queued or uploading files -->\r\n    <div *ngIf=\"item.status === 'queued' || item.status === 'uploading'\" class=\"spinner\">\r\n      <cax-progressSpinner\r\n        [strokeColor]=\"'primary'\"\r\n        [size]=\"'sm'\"\r\n        [animationDuration]=\"'2s'\">\r\n      </cax-progressSpinner>\r\n    </div>\r\n    \r\n    <!-- Show remove button only for complete or canceled files -->\r\n    <button\r\n      *ngIf=\"item.status === 'complete' || item.status === 'canceled'\"\r\n      class=\"remove-button\"\r\n      (click)=\"removeFile(i); $event.stopPropagation()\">\r\n      <i class=\"cax cax-close\"></i> \r\n    </button>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-files{font-size:14px;font-weight:500;margin-bottom:10px}.cax-upload-menu{border-radius:12px;padding:24px 56px}.status-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;height:150px}.status-container p{margin:0;font-size:14px;font-weight:500}.status-container .success-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-container .success-icon i{font-size:1.5rem;font-weight:800}.cax-upload-options{text-align:center}.cax-upload-options .hint-text{font-size:14px;font-weight:500}.cax-upload-options .drop-files{font-weight:500;font-size:14px}.cax-upload-options .max-size{font-size:12px;margin-bottom:20px;font-weight:400}.cax-error-upload{font-size:14px;font-weight:400;padding-top:8px}.cax-options-container{display:flex;gap:24px;justify-content:center}.cax-upload-option{display:flex;flex-direction:column;align-items:center;cursor:pointer}.cax-upload-option .icon-container{width:48px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.cax-upload-option span{font-size:14px;font-weight:600;padding-top:10px}.cax-file-preview-wrapper{display:flex;flex-direction:column;gap:10px;margin-top:1rem}.cax-file-preview{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px}.cax-file-preview .file-info{display:flex;align-items:center;gap:10px}.cax-file-preview .file-info .file-icon img{width:32px;height:32px}.cax-file-preview .file-info .file-name{font-weight:500;font-size:14px}.cax-file-preview .spinner{margin-left:auto;font-size:20px!important}.cax-file-preview .remove-button{background:none;border:none;margin-left:auto;cursor:pointer}.cax-file-preview .remove-button i{font-size:20px}}\n"] }]
-        }], propDecorators: { invalid: [{
-                type: Input
+                    }, template: "<div class=\"cax-upload-container\" [ngStyle]=\"style\">\n    <span class=\"cax-upload-label cax-text-action-md-semibold\">{{ labelText }}</span>\n    <div class=\"cax-upload-menu\" [class.dragging]=\"isDragging\" (click)=\"openFileSelector()\">\n        <input type=\"file\" id=\"fileInput-{{ uniqueId }}\" style=\"display: none\" [multiple]=\"allowMultiple\" [accept]=\"acceptFileTypes\" (change)=\"handleFileInput($event)\" />\n        <div class=\"cax-upload-options\" *ngIf=\"!isDragging\">\n            <span class=\"cax-upload-text cax-text-action-lg-medium\">Drag & drop files here or browse</span>\n            <div class=\"cax-upload-file-config\" *ngIf=\"maxFileSize || allowedFileTypes.length > 0 || aspectRatios.length > 0\">\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"maxFileSize\">Max. File Size: {{ maxFileSize }}MB</span>\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"allowedFileTypes.length > 0\">File Type: {{ allowedFileTypes.join(', ') | uppercase }}</span>\n                <span class=\"cax-text-body-xs-regular\" *ngIf=\"aspectRatios.length > 0\">Aspect Ratio: {{ aspectRatios.join(', ') }}</span>\n            </div>\n        </div>\n        <div class=\"cax-upload-options\" *ngIf=\"isDragging\">\n            <span class=\"cax-upload-text dragging cax-text-action-lg-medium\"><i class=\"cax cax-archive-down\"></i>Drop files to upload</span>\n        </div>\n    </div>\n    <div class=\"cax-file-preview-wrapper\" *ngIf=\"uploadedFiles.length > 0\">\n        <div class=\"cax-upload-more-count\" *ngIf=\"uploadedFiles.length > 4\">\n            <div>\n                <span class=\"cax-text-action-sm-medium\">{{ uploadedFiles.length }} files</span>\n                <span class=\"cax-upload-failed-count cax-text-action-sm-medium\" *ngIf=\"failedFilesCount > 0\">{{ failedFilesCount }} failed</span>\n            </div>\n            <span class=\"cax-upload-show-more cax-text-action-sm-link-regular\" (click)=\"toggleExpand()\">{{ isExpanded ? 'Show less' : 'Show more' }}</span>\n        </div>\n        <div class=\"cax-file-list\" [class.expanded]=\"isExpanded\" [style.max-height]=\"dynamicMaxHeight\">\n            <div\n                #previewItem\n                *ngFor=\"let item of isExpanded ? uploadedFiles : uploadedFiles.slice(0, 4); let i = index\"\n                class=\"cax-file-preview\"\n                [class.cax-file-preview-error]=\"item.status === 'error'\"\n                [class.active-gradient]=\"!isExpanded && i === 3 && uploadedFiles.length > 4\"\n            >\n                <div class=\"cax-file-preview-content\">\n                    <div class=\"file-info\">\n                        <i class=\"cax\" [class.cax-document-text]=\"item.status !== 'error'\" [class.cax-danger-triangle-bold]=\"item.status === 'error'\" [style.color]=\"item.status === 'error' ? 'var(--error-600)' : ''\"></i>\n                        <p class=\"file-name cax-text-action-md-medium\">{{ item.file.name }}</p>\n                        <span class=\"file-size cax-text-body-xsm-regular\">{{ formatBytes(item.file.size) }}</span>\n                    </div>\n\n                    <div *ngIf=\"item.status === 'queued' || item.status === 'uploading'\" class=\"spinner\">\n                        <cax-progressSpinner [strokeColor]=\"'primary'\" [size]=\"'sm'\" [animationDuration]=\"'2s'\"> </cax-progressSpinner>\n                    </div>\n\n                    <button *ngIf=\"item.status === 'complete' || item.status === 'canceled' || item.status === 'error'\" class=\"remove-button\" (click)=\"removeFile(i); $event.stopPropagation()\">\n                        <i class=\"cax cax-close\"></i>\n                    </button>\n                </div>\n                <span class=\"file-error cax-text-body-sm-regular\" *ngIf=\"item.status === 'error'\">{{ item.errorMessage }}</span>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-upload-container{display:flex;flex-direction:column;gap:8px}.cax-upload-menu{border-radius:12px;padding:24px 56px}.status-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;height:150px}.status-container p{margin:0;font-size:14px;font-weight:500}.status-container .success-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-container .success-icon i{font-size:1.5rem;font-weight:800}.cax-error-upload{font-size:14px;font-weight:400;padding-top:8px}.cax-options-container{display:flex;gap:24px;justify-content:center}.cax-upload-option{display:flex;flex-direction:column;align-items:center;cursor:pointer}.cax-upload-option .icon-container{width:48px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.cax-upload-option span{font-size:14px;font-weight:600;padding-top:10px}.cax-file-preview-wrapper{display:flex;flex-direction:column;gap:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { previewItems: [{
+                type: ViewChildren,
+                args: ['previewItem']
             }], style: [{
                 type: Input
             }], maxFileSize: [{
                 type: Input
-            }], inputFiles: [{
+            }], labelText: [{
                 type: Input
             }], uploadString: [{
                 type: Input
-            }], errorText: [{
-                type: Input
             }], allowMultiple: [{
                 type: Input
-            }], componentId: [{
-                type: Input
             }], allowedFileTypes: [{
                 type: Input
-            }], fileSelected: [{
-                type: Output
-            }], filesQueued: [{
-                type: Output
-            }], uploadStarted: [{
+            }], aspectRatios: [{
+                type: Input
+            }], onSelect: [{
                 type: Output
-            }], uploadCompleted: [{
+            }], onUpload: [{
                 type: Output
-            }], uploadCanceled: [{
+            }], onRemove: [{
                 type: Output
-            }], uploadError: [{
+            }], onClear: [{
                 type: Output
-            }], fileRemoved: [{
+            }], onError: [{
                 type: Output
-            }], allFilesRemoved: [{
+            }], onStatusChange: [{
                 type: Output
-            }], uploadStatusChange: [{
+            }], onFileListChange: [{
                 type: Output
             }], onDragOver: [{
                 type: HostListener,
@@ -376,11 +489,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class UploadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: UploadModule, declarations: [UploadComponent], imports: [CommonModule, FormsModule, ProgressSpinnerModule, Button], exports: [UploadComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UploadModule, imports: [CommonModule, FormsModule, ProgressSpinnerModule, Button] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: UploadModule, declarations: [UploadComponent], imports: [CommonModule, FormsModule, ProgressSpinnerModule, Button], exports: [UploadComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadModule, imports: [CommonModule, FormsModule, ProgressSpinnerModule, Button] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: UploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UploadComponent],