cloud-ide-element 1.0.67 → 1.0.68

package/fesm2022/cloud-ide-element.mjs

@@ -2598,6 +2598,7 @@ class ICoreCyfmSave {
     cyfm_tags;
     cyfm_version;
     cyfm_file_status_sygmt;
+    cyfm_group_id; // Group ID for multiple file uploads
     cyfm_isactive;
     cyfm_file_base64 = "";
     cyfm_temp_unique_id = "";
@@ -2625,12 +2626,14 @@ class CideEleFileManagerService {
     destroyRef = inject(DestroyRef);
     // Angular 20: Signal-based state management
     _baseUrl = signal('/api', ...(ngDevMode ? [{ debugName: "_baseUrl" }] : []));
+    _userId = signal('', ...(ngDevMode ? [{ debugName: "_userId" }] : []));
     _isUploading = signal(false, ...(ngDevMode ? [{ debugName: "_isUploading" }] : []));
     _uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "_uploadQueue" }] : []));
     _activeUploads = signal(new Map(), ...(ngDevMode ? [{ debugName: "_activeUploads" }] : []));
     _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
     // Angular 20: Computed values
     baseUrl = this._baseUrl.asReadonly();
+    userId = this._userId.asReadonly();
     isUploading = this._isUploading.asReadonly();
     uploadQueue = this._uploadQueue.asReadonly();
     activeUploads = this._activeUploads.asReadonly();
@@ -2699,11 +2702,12 @@ class CideEleFileManagerService {
                         cyfm_size_in_byte: file.size,
                         cyfm_type: file.type,
                         cyfm_creation_dt: new Date().toISOString(),
-                        cyfm_id_user: uploadOptions?.userId || '',
+                        cyfm_id_user: uploadOptions?.userId || this._userId() || '',
                         cyfm_permissions: [], // Match the interface type
                         cyfm_tags: uploadOptions?.tags || [],
                         cyfm_version: 1,
                         cyfm_file_status_sygmt: uploadOptions?.fileStatus || 'file_manager_file_status_active',
+                        cyfm_group_id: uploadOptions?.groupId, // Group ID for multiple file uploads
                         cyfm_isactive: true,
                         cyfm_file_base64: base64Data,
                         cyfm_temp_unique_id: fileId
@@ -2796,6 +2800,29 @@ class CideEleFileManagerService {
         console.log('🔍 [FileManagerService] Setting base URL:', url);
         this._baseUrl.set(url);
     }
+    /**
+     * Set the user ID for file uploads
+     * Angular 20: Using signal-based state management
+     * @param userId The user ID to associate with uploaded files
+     */
+    setUserId(userId) {
+        console.log('🔍 [FileManagerService] Setting user ID:', userId);
+        this._userId.set(userId);
+    }
+    /**
+     * Generate Object ID for group uploads
+     * Calls the backend API to generate a unique ObjectId for grouping multiple files
+     * @returns Observable with the generated ObjectId
+     */
+    generateObjectId() {
+        const url = `${this._baseUrl()}/utility/generateObjectId`;
+        console.log('🆔 [FileManagerService] Generating ObjectId from:', url);
+        return this.http.get(url).pipe(catchError((error) => {
+            console.error('❌ [FileManagerService] Error generating ObjectId:', error);
+            this._error.set(`Failed to generate ObjectId: ${error.message}`);
+            return throwError(() => error);
+        }), takeUntilDestroyed(this.destroyRef));
+    }
     /**
      * Angular 20: Helper methods for state management
      */
@@ -3127,6 +3154,7 @@ class CideEleFileInputComponent {
     placeholderIcon = '📷';
     autoUpload = false;
     uploadData = {};
+    multipleFileUpload = false; // New property for multiple file upload mode
     // Traditional @Output() decorators
     fileChange = new EventEmitter();
     uploadSuccess = new EventEmitter();
@@ -3149,6 +3177,7 @@ class CideEleFileInputComponent {
     placeholderIconSignal = signal(this.placeholderIcon, ...(ngDevMode ? [{ debugName: "placeholderIconSignal" }] : []));
     autoUploadSignal = signal(this.autoUpload, ...(ngDevMode ? [{ debugName: "autoUploadSignal" }] : []));
     uploadDataSignal = signal(this.uploadData, ...(ngDevMode ? [{ debugName: "uploadDataSignal" }] : []));
+    multipleFileUploadSignal = signal(this.multipleFileUpload, ...(ngDevMode ? [{ debugName: "multipleFileUploadSignal" }] : []));
     // Reactive state with signals
     id = signal(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{ debugName: "id" }] : []));
     isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
@@ -3159,6 +3188,7 @@ class CideEleFileInputComponent {
     previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
     uploadNotificationId = signal(null, ...(ngDevMode ? [{ debugName: "uploadNotificationId" }] : []));
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    groupId = signal(null, ...(ngDevMode ? [{ debugName: "groupId" }] : [])); // Group ID for multiple file uploads
     // Computed signals for better relationships
     hasFiles = computed(() => this.files() !== null && this.files().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
     canUpload = computed(() => this.hasFiles() && !this.isUploading() && !this.disabledSignal(), ...(ngDevMode ? [{ debugName: "canUpload" }] : []));
@@ -3221,6 +3251,44 @@ class CideEleFileInputComponent {
         this.placeholderIconSignal.set(this.placeholderIcon);
         this.autoUploadSignal.set(this.autoUpload);
         this.uploadDataSignal.set(this.uploadData);
+        this.multipleFileUploadSignal.set(this.multipleFileUpload);
+    }
+    ngOnChanges(changes) {
+        // Angular 20: Update signals when @Input() values change
+        if (changes['label'])
+            this.labelSignal.set(this.label);
+        if (changes['accept'])
+            this.acceptSignal.set(this.accept);
+        if (changes['multiple'])
+            this.multipleSignal.set(this.multiple);
+        if (changes['disabled'])
+            this.disabledSignal.set(this.disabled);
+        if (changes['required'])
+            this.requiredSignal.set(this.required);
+        if (changes['helperText'])
+            this.helperTextSignal.set(this.helperText);
+        if (changes['errorText'])
+            this.errorTextSignal.set(this.errorText);
+        if (changes['showPreview'])
+            this.showPreviewSignal.set(this.showPreview);
+        if (changes['previewWidth'])
+            this.previewWidthSignal.set(this.previewWidth);
+        if (changes['previewHeight'])
+            this.previewHeightSignal.set(this.previewHeight);
+        if (changes['previewBoxMode'])
+            this.previewBoxModeSignal.set(this.previewBoxMode);
+        if (changes['showFileName'])
+            this.showFileNameSignal.set(this.showFileName);
+        if (changes['placeholderText'])
+            this.placeholderTextSignal.set(this.placeholderText);
+        if (changes['placeholderIcon'])
+            this.placeholderIconSignal.set(this.placeholderIcon);
+        if (changes['autoUpload'])
+            this.autoUploadSignal.set(this.autoUpload);
+        if (changes['uploadData'])
+            this.uploadDataSignal.set(this.uploadData);
+        if (changes['multipleFileUpload'])
+            this.multipleFileUploadSignal.set(this.multipleFileUpload);
     }
     writeValue(value) {
         console.log('📝 [FileInput] writeValue called with:', value);
@@ -3278,8 +3346,14 @@ class CideEleFileInputComponent {
         this.onTouched();
         // Auto upload if enabled
         if (this.autoUploadSignal() && selectedFiles && selectedFiles.length > 0) {
-            console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', selectedFiles[0].name);
-            this.uploadFile(selectedFiles[0]);
+            if (this.multipleFileUploadSignal() && this.multipleSignal()) {
+                console.log('🚀 [FileInput] Auto upload enabled for multiple files:', selectedFiles.length);
+                this.uploadMultipleFiles(Array.from(selectedFiles));
+            }
+            else {
+                console.log('🚀 [FileInput] Auto upload enabled, starting upload for:', selectedFiles[0].name);
+                this.uploadFile(selectedFiles[0]);
+            }
         }
         else {
             console.log('⏸️ [FileInput] Auto upload disabled or no files');
@@ -3410,6 +3484,136 @@ class CideEleFileInputComponent {
             }
         });
     }
+    /**
+     * Upload multiple files with group ID support
+     * Generates a group ID if not provided and uploads all files with the same group ID
+     */
+    uploadMultipleFiles(files) {
+        console.log('📤 [FileInput] uploadMultipleFiles called for:', files.length, 'files');
+        // Set upload status to 'start' before starting upload
+        this.uploadStatus.set('start');
+        this.isUploading.set(true);
+        this.uploadProgress.set(0);
+        this.uploadProgressChange.emit(0);
+        // Make form control invalid during upload
+        this.onChange(null);
+        // Show initial progress notification
+        const notificationId = this.notificationService.showProgress('🔄 Preparing multiple file upload...', 0, { duration: 0 });
+        this.uploadNotificationId.set(notificationId);
+        // Check if we already have a group ID from uploadData
+        const existingGroupId = this.uploadDataSignal().groupId;
+        if (existingGroupId) {
+            console.log('🆔 [FileInput] Using existing group ID:', existingGroupId);
+            this.groupId.set(existingGroupId);
+            this.startMultipleFileUpload(files, existingGroupId);
+        }
+        else {
+            console.log('🆔 [FileInput] No group ID provided, generating new one...');
+            // Generate group ID first
+            this.fileManagerService.generateObjectId().subscribe({
+                next: (response) => {
+                    const newGroupId = response.objectId;
+                    console.log('🆔 [FileInput] Generated new group ID:', newGroupId);
+                    this.groupId.set(newGroupId);
+                    this.startMultipleFileUpload(files, newGroupId);
+                },
+                error: (error) => {
+                    console.error('❌ [FileInput] Failed to generate group ID:', error);
+                    this.uploadError.emit('Failed to generate group ID');
+                    this.isUploading.set(false);
+                    this.uploadStatus.set('error');
+                    const notificationId = this.uploadNotificationId();
+                    if (notificationId) {
+                        this.notificationService.remove(notificationId);
+                    }
+                    this.notificationService.error('❌ Failed to generate group ID for multiple file upload', { duration: 0 });
+                    this.uploadNotificationId.set(null);
+                }
+            });
+        }
+    }
+    /**
+     * Start uploading multiple files with the provided group ID
+     */
+    startMultipleFileUpload(files, groupId) {
+        console.log('🚀 [FileInput] Starting upload for', files.length, 'files with group ID:', groupId);
+        let completedUploads = 0;
+        let failedUploads = 0;
+        const totalFiles = files.length;
+        // Update upload data with group ID
+        const uploadDataWithGroupId = {
+            ...this.uploadDataSignal(),
+            groupId: groupId
+        };
+        files.forEach((file, index) => {
+            this.fileManagerService.uploadFile(file, uploadDataWithGroupId, (progress) => {
+                // Calculate overall progress
+                const fileProgress = progress / totalFiles;
+                const overallProgress = ((completedUploads * 100) + fileProgress) / totalFiles;
+                this.uploadProgress.set(overallProgress);
+                this.uploadProgressChange.emit(overallProgress);
+                // Update progress notification
+                const notificationId = this.uploadNotificationId();
+                if (notificationId) {
+                    const progressMessage = `🔄 Uploading file ${index + 1} of ${totalFiles}...`;
+                    this.notificationService.updateProgress(notificationId, overallProgress, progressMessage);
+                }
+            }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                next: (response) => {
+                    completedUploads++;
+                    console.log(`✅ [FileInput] File ${index + 1}/${totalFiles} uploaded successfully`);
+                    // Check if all files are completed
+                    if (completedUploads + failedUploads === totalFiles) {
+                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
+                    }
+                },
+                error: (error) => {
+                    failedUploads++;
+                    console.error(`❌ [FileInput] File ${index + 1}/${totalFiles} upload failed:`, error);
+                    // Check if all files are completed
+                    if (completedUploads + failedUploads === totalFiles) {
+                        this.handleMultipleUploadComplete(completedUploads, failedUploads, totalFiles, groupId);
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Handle completion of multiple file upload
+     */
+    handleMultipleUploadComplete(completed, failed, total, groupId) {
+        console.log(`📊 [FileInput] Multiple upload complete: ${completed}/${total} successful, ${failed} failed`);
+        this.isUploading.set(false);
+        this.uploadProgress.set(100);
+        this.uploadProgressChange.emit(100);
+        // Remove progress notification
+        const notificationId = this.uploadNotificationId();
+        if (notificationId) {
+            this.notificationService.remove(notificationId);
+        }
+        this.uploadNotificationId.set(null);
+        if (failed === 0) {
+            // All files uploaded successfully
+            this.uploadStatus.set('success');
+            this.notificationService.success(`✅ All ${total} files uploaded successfully!`, { duration: 0 });
+            // For multiple file upload, return the group ID as the form value
+            this.onChange(groupId);
+            this.uploadSuccess.emit(groupId);
+            console.log('📝 [FileInput] Form control value set to group ID:', groupId);
+        }
+        else if (completed > 0) {
+            // Some files uploaded successfully
+            this.uploadStatus.set('error');
+            this.notificationService.warning(`⚠️ ${completed}/${total} files uploaded. ${failed} failed.`, { duration: 0 });
+            this.uploadError.emit(`${failed} out of ${total} files failed to upload`);
+        }
+        else {
+            // All files failed
+            this.uploadStatus.set('error');
+            this.notificationService.error(`❌ All ${total} files failed to upload.`, { duration: 0 });
+            this.uploadError.emit('All files failed to upload');
+        }
+    }
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
@@ -3717,7 +3921,7 @@ class CideEleFileInputComponent {
         return null; // No validation errors
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", required: "required", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "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", multipleFileUpload: "multipleFileUpload" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: CideEleFileInputComponent,
@@ -3728,7 +3932,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"cide-file-input-required\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabledSignal()\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [class.cide-file-input-preview-box-drag-over]=\"isDragOver()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"cide-file-input-preview-box-placeholder\">\n          <div class=\"cide-file-input-preview-box-icon\">\n            <cide-ele-icon>{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"cide-file-input-preview-box-text\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"cide-file-input-preview-box-content\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"cide-file-input-preview-box-image\">\n          <div class=\"cide-file-input-preview-box-overlay\">\n            <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-box-remove\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"cide-file-input-preview-box-filename\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <div \n      class=\"cide-file-input-wrapper\"\n      [class.cide-file-input-drag-over]=\"isDragOver()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <input\n        type=\"file\"\n        [attr.id]=\"'cide-file-input-' + id()\"\n        [attr.accept]=\"acceptSignal()\"\n        [attr.multiple]=\"multipleSignal() ? true : null\"\n        [disabled]=\"disabledSignal()\"\n        (change)=\"onFileSelected($event)\"\n        class=\"cide-file-input-element\"\n      />\n      @if (hasFiles()) {\n        <button type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n          Clear\n        </button>\n      }\n    </div>\n    @if (hasFiles() && !isPreviewBoxMode()) {\n      <div class=\"cide-file-input-files\">\n        @for (name of fileNames(); track name) {\n          <span>{{ name }}</span>\n        }\n        <!-- Angular 20: Display file size using new computed values -->\n        @if (totalFileSize() > 0) {\n          <div class=\"cide-file-input-size\">\n            Total size: {{ fileSizeInMB() }} MB\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"cide-file-input-preview\">\n      <div class=\"cide-file-input-preview-label\">Preview:</div>\n      <div class=\"cide-file-input-preview-container\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"cide-file-input-preview-item\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"cide-file-input-preview-remove\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"cide-file-input-preview-image\"\n              loading=\"lazy\">\n            <div class=\"cide-file-input-preview-filename\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"cide-file-input-error\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"cide-file-input-helper\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-required{color:#d32f2f;font-weight:700}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem;border:2px dashed transparent;border-radius:.5rem;padding:.5rem;transition:all .2s ease-in-out}.cide-file-input-wrapper.cide-file-input-drag-over{border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-size{margin-top:.5rem;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;font-size:.75rem;color:#4b5563;font-weight:500}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over{border-color:#3b82f6!important;background-color:#eff6ff!important;transform:scale(1.02);box-shadow:0 0 0 4px #3b82f61a}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-icon{color:#3b82f6;transform:scale(1.1)}.cide-file-input-preview-box.cide-file-input-preview-box-drag-over .cide-file-input-preview-box-placeholder .cide-file-input-preview-box-text{color:#3b82f6;font-weight:600}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -3776,6 +3980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], uploadData: [{
                 type: Input
+            }], multipleFileUpload: [{
+                type: Input
             }], fileChange: [{
                 type: Output
             }], uploadSuccess: [{
@@ -4811,11 +5017,13 @@ class CideEleDataGridComponent {
         if (this.isDragDropEnabled()) {
             // Get the full dataset from the config (not just displayedData)
             const fullData = this.mergedConfig().data || [];
+            // Flatten the data to include all items (parents and children) for hierarchical structures
+            const flattenedData = this.flattenAllDataForOrderTracking(fullData);
             // Completely build the order tracking from current data
             this.rowOrderMap.clear();
             this.initialDataOrderIds = [];
-            // Build the order tracking with current data
-            fullData.forEach((item, index) => {
+            // Build the order tracking with flattened data
+            flattenedData.forEach((item, index) => {
                 const itemId = this.getItemId(item);
                 if (itemId) {
                     const actualOrder = this.getItemOrder(item);
@@ -4828,7 +5036,7 @@ class CideEleDataGridComponent {
             });
             // Clear any existing local reordered data
             this.localReorderedData = [];
-            console.log('🔍 Initial order tracking built from full dataset:', this.initialDataOrderIds.length, 'items');
+            console.log('🔍 Initial order tracking built from flattened dataset:', this.initialDataOrderIds.length, 'items (including children)');
             console.log('🔍 Initial order map created with actual order values:', Array.from(this.rowOrderMap.entries()));
         }
     }
@@ -4839,11 +5047,13 @@ class CideEleDataGridComponent {
         if (this.isDragDropEnabled()) {
             // Get the current full dataset
             const fullData = this.mergedConfig().data || [];
+            // Flatten the data to include all items (parents and children) for hierarchical structures
+            const flattenedData = this.flattenAllDataForOrderTracking(fullData);
             // Completely rebuild the order tracking from current data
             this.rowOrderMap.clear();
             this.initialDataOrderIds = [];
-            // Rebuild the order tracking with current data
-            fullData.forEach((item, index) => {
+            // Rebuild the order tracking with flattened data
+            flattenedData.forEach((item, index) => {
                 const itemId = this.getItemId(item);
                 if (itemId) {
                     const actualOrder = this.getItemOrder(item);
@@ -5663,15 +5873,18 @@ class CideEleDataGridComponent {
     }
     /**
      * Reset the row order map to original positions (for reset action)
+     * Includes all items from hierarchical structure (parents and children)
      */
     resetRowOrderMap() {
         // Get the current full dataset from the config (not cached data)
         const fullData = this.mergedConfig().data || [];
+        // Flatten the data to include all items (parents and children) for hierarchical structures
+        const flattenedData = this.flattenAllDataForOrderTracking(fullData);
         // Completely rebuild the order tracking from current data
         this.rowOrderMap.clear();
         this.initialDataOrderIds = [];
-        // Rebuild the order tracking with current data
-        fullData.forEach((item, index) => {
+        // Rebuild the order tracking with flattened data
+        flattenedData.forEach((item, index) => {
             const itemId = this.getItemId(item);
             if (itemId) {
                 const actualOrder = this.getItemOrder(item);
@@ -5685,19 +5898,22 @@ class CideEleDataGridComponent {
         // Clear any local reordered data
         this.localReorderedData = [];
         this.hasOrderChanged.set(false);
-        console.log('🔍 Row order map completely rebuilt from current data:', this.initialDataOrderIds.length, 'items');
+        console.log('🔍 Row order map completely rebuilt from flattened data:', this.initialDataOrderIds.length, 'items (including children)');
     }
     /**
      * Update the row order map baseline to current positions (for save action)
+     * Includes all items from hierarchical structure (parents and children)
      */
     updateRowOrderMapBaseline() {
         // Get the current full dataset from the config
         const fullData = this.mergedConfig().data || [];
+        // Flatten the data to include all items (parents and children) for hierarchical structures
+        const flattenedData = this.flattenAllDataForOrderTracking(fullData);
         // Completely rebuild the order tracking from current data
         this.rowOrderMap.clear();
         this.initialDataOrderIds = [];
-        // Rebuild the order tracking with current data
-        fullData.forEach((item, index) => {
+        // Rebuild the order tracking with flattened data
+        flattenedData.forEach((item, index) => {
             const itemId = this.getItemId(item);
             if (itemId) {
                 const actualOrder = this.getItemOrder(item);
@@ -5708,18 +5924,21 @@ class CideEleDataGridComponent {
                 });
             }
         });
-        console.log('🔍 Row order map baseline completely rebuilt from current data:', this.initialDataOrderIds.length, 'items');
+        console.log('🔍 Row order map baseline completely rebuilt from flattened data:', this.initialDataOrderIds.length, 'items (including children)');
     }
     /**
      * Get the current order array from the row order map
+     * Includes all items from hierarchical structure (parents and children)
      */
     getCurrentOrderFromMap() {
         const orderedItems = [];
         // Get the full dataset from the config (not just displayedData)
         const fullData = this.mergedConfig().data || [];
-        // Collect all items with their new positions from the full dataset
+        // Flatten the data to include all items (parents and children) for hierarchical structures
+        const flattenedData = this.flattenAllDataForOrderTracking(fullData);
+        // Collect all items with their new positions from the flattened dataset
         this.rowOrderMap.forEach((orderInfo, itemId) => {
-            const item = fullData.find(dataItem => this.getItemId(dataItem) === itemId);
+            const item = flattenedData.find(dataItem => this.getItemId(dataItem) === itemId);
             if (item) {
                 orderedItems.push({ item, newPosition: orderInfo.newPosition });
             }
@@ -5731,14 +5950,17 @@ class CideEleDataGridComponent {
     }
     /**
      * Get only the items that have actually changed order
+     * Includes all items from hierarchical structure (parents and children)
      */
     getChangedOrders() {
         const changedItems = [];
         // Get the full dataset from the config
         const fullData = this.mergedConfig().data || [];
+        // Flatten the data to include all items (parents and children) for hierarchical structures
+        const flattenedData = this.flattenAllDataForOrderTracking(fullData);
         // Check each item to see if its position has changed
         this.rowOrderMap.forEach((orderInfo, itemId) => {
-            const item = fullData.find(dataItem => this.getItemId(dataItem) === itemId);
+            const item = flattenedData.find(dataItem => this.getItemId(dataItem) === itemId);
             if (item && orderInfo.oldPosition !== orderInfo.newPosition) {
                 changedItems.push(item);
                 console.log('🔍 Item changed order:', itemId, 'from', orderInfo.oldPosition, 'to', orderInfo.newPosition);
@@ -5746,6 +5968,30 @@ class CideEleDataGridComponent {
         });
         return changedItems;
     }
+    /**
+     * Flatten all data for order tracking (includes all hierarchical children)
+     * This method ensures that all items (parents and children) are included in order tracking
+     */
+    flattenAllDataForOrderTracking(data) {
+        const flattenedItems = [];
+        const flattenItems = (items) => {
+            items.forEach(item => {
+                flattenedItems.push(item);
+                // Check if item has children (for hierarchical data)
+                const treeConfig = this.mergedConfig().tree;
+                if (treeConfig?.enabled) {
+                    const childrenKey = treeConfig.childrenKey || 'children';
+                    const children = this.getNestedValue(item, childrenKey) || [];
+                    if (children.length > 0) {
+                        flattenItems(children);
+                    }
+                }
+            });
+        };
+        flattenItems(data);
+        console.log('🔍 Flattened data for order tracking:', flattenedItems.length, 'items (including children)');
+        return flattenedItems;
+    }
     /**
      * Update local data order for visual reordering (LOCAL ONLY)
      */