cloud-ide-element 1.0.114 → 1.0.115

package/fesm2022/cloud-ide-element.mjs

@@ -3380,6 +3380,7 @@ class CideEleFileInputComponent {
     notificationService = inject(NotificationService);
     elementService = inject(CideElementsService);
     destroyRef = inject(DestroyRef);
+    // Removed direct injection to avoid circular dependency
     // private readonly pendingTasks = inject(PendingTasks); // TODO: Fix PendingTasks API usage
     // Traditional @Input() decorators
     label = 'Choose file';
@@ -4124,7 +4125,36 @@ class CideEleFileInputComponent {
      * Show floating uploader (alias for showUploader for template)
      */
     showFloatingUploaderDialog() {
-        this.showUploader();
+        console.log('👁️ [FileInput] Opening floating file uploader via file manager service');
+        if (!this.showFloatingUploaderSignal()) {
+            console.log('⚠️ [FileInput] Floating uploader is disabled');
+            return;
+        }
+        const groupId = this.groupId();
+        if (groupId) {
+            console.log("✅ [FileInput] Has existing group ID:", groupId);
+            // Use the file manager service to trigger the floating uploader
+            this.fileManagerService.triggerFloatingUploaderShow(groupId);
+            console.log('✅ [FileInput] Floating file uploader triggered successfully');
+        }
+        else {
+            console.log('⚠️ [FileInput] No group ID yet - generating one and opening uploader');
+            // Generate a new group ID and open the uploader
+            this.fileManagerService.generateObjectId().subscribe({
+                next: (response) => {
+                    const newGroupId = response.data?.objectId;
+                    console.log('🆔 [FileInput] Generated new group ID for uploader:', newGroupId);
+                    this.groupId.set(newGroupId);
+                    // Use the file manager service to trigger the floating uploader
+                    this.fileManagerService.triggerFloatingUploaderShow(newGroupId);
+                    console.log('✅ [FileInput] Floating file uploader triggered successfully');
+                },
+                error: (error) => {
+                    console.error('❌ [FileInput] Failed to generate group ID for uploader:', error);
+                    this.notificationService.error('❌ Failed to open file uploader', { duration: 0 });
+                }
+            });
+        }
     }
     /**
      * Get dynamic classes for drag and drop zone
@@ -4971,6 +5001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     ], template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [style.left.px]=\"position().x\"\n     [style.top.px]=\"position().y\">\n\n  <!-- Header (Draggable) -->\n  <div class=\"uploader-header draggable-header\"\n       (mousedown)=\"startDrag($event)\"\n       (touchstart)=\"startDrag($event)\">\n    <div class=\"header-left\">\n      <div class=\"upload-icon\">\n        <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n      </div>\n      <div class=\"upload-info\">\n        <div class=\"upload-title\">File Upload</div>\n        <div class=\"upload-summary\">{{ getUploadSummary() }}</div>\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <button class=\"action-btn minimize-btn\" (click)=\"toggleMinimize()\" [title]=\"isMinimized() ? 'Expand' : 'Minimize'\">\n        <cide-ele-icon size=\"xs\">{{ isMinimized() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>\n      </button>\n      <button class=\"action-btn close-btn\" (click)=\"close()\" title=\"Close\">\n        <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Content (hidden when minimized) -->\n  @if (!isMinimized()) {\n  <div class=\"uploader-content\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"upload-zone\" \n         [class.drag-over]=\"isDragOver()\" \n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"true\" \n             [accept]=\"'*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             style=\"display: none;\">\n      \n      <div class=\"upload-zone-content\">\n        <cide-ele-icon class=\"upload-icon\" size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div class=\"upload-text\">\n          <div class=\"upload-title\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"upload-queue\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(file.stage)\">\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"text-yellow-600\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"progress-text\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"action-btn cancel-btn\" (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"action-btn success-btn\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"action-btn retry-btn\" title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"no-uploads-message\">\n      <div class=\"message-content\">\n        <cide-ele-icon size=\"md\" class=\"message-icon\">cloud_upload</cide-ele-icon>\n        <div class=\"message-text\">\n          <h4>No active uploads</h4>\n          <p>Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [".floating-uploader{position:fixed;width:320px;max-height:500px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid rgba(0,0,0,.08);z-index:1000;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);opacity:1}.floating-uploader.animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.minimized .uploader-content{display:none}.floating-uploader.minimized .uploader-footer{border-top:none}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f626}.floating-uploader .uploader-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-header.draggable-header{cursor:move;-webkit-user-select:none;user-select:none}.floating-uploader .uploader-header.draggable-header:hover{background:#f1f5f9}.floating-uploader .uploader-header.draggable-header:active{background:#e2e8f0;cursor:grabbing}.floating-uploader .uploader-header .header-left{display:flex;align-items:center;gap:8px}.floating-uploader .uploader-header .header-left .upload-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;border-radius:6px;color:#fff}.floating-uploader .uploader-header .header-left .upload-info .upload-title{font-size:14px;font-weight:600;color:#1e293b;margin:0}.floating-uploader .uploader-header .header-left .upload-info .upload-summary{font-size:12px;color:#64748b;margin:0}.floating-uploader .uploader-header .header-actions{display:flex;gap:4px}.floating-uploader .uploader-header .header-actions .action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:background-color .2s;color:#64748b}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#e2e8f0;color:#1e293b}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content{max-height:400px;overflow-y:auto}.floating-uploader .uploader-content .upload-zone{margin:8px 16px;padding:12px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;transition:all .2s ease;text-align:center}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#f0f9ff}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#3b82f6;background:#dbeafe;transform:scale(1.01)}.floating-uploader .uploader-content .upload-zone .upload-zone-content{display:flex;flex-direction:column;align-items:center;gap:6px}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#6b7280;transition:color .2s ease}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{font-size:13px;font-weight:500;color:#374151;margin:0;line-height:1.2}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#3b82f6}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#1d4ed8}.floating-uploader .uploader-content .upload-queue .upload-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f1f5f9;transition:background-color .2s}.floating-uploader .uploader-content .upload-queue .upload-item:last-child{border-bottom:none}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#f0f9ff}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#f0fdf4}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#fef2f2}.floating-uploader .uploader-content .upload-queue .upload-item .file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .status-icon{flex-shrink:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details{min-width:0;flex:1}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status{font-size:11px;margin:0}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-status span{font-weight:500}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress{display:flex;align-items:center;gap:8px;margin:0 8px;min-width:80px}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{flex:1;height:3px;background:#e2e8f0;border-radius:2px;overflow:hidden}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text{font-size:10px;color:#64748b;min-width:24px;text-align:right}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions{display:flex;gap:4px}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .2s;color:#64748b}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#e2e8f0}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#fef2f2;color:#dc2626}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#f0f9ff;color:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#16a34a}.floating-uploader .uploader-content .hidden-uploader{display:none}.floating-uploader .uploader-footer{padding:8px 16px;background:#f8fafc;border-top:1px solid #e2e8f0}.floating-uploader .uploader-footer .footer-stats{display:flex;gap:12px;font-size:11px}.floating-uploader .uploader-footer .footer-stats .stat{display:flex;align-items:center;gap:4px;color:#64748b}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#3b82f6}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#16a34a}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#dc2626}@media (max-width: 640px){.floating-uploader{bottom:10px;right:10px;left:10px;width:auto;max-width:none}}@media (prefers-color-scheme: dark){.floating-uploader{background:#1e293b;border-color:#334155;box-shadow:0 8px 32px #0000004d}.floating-uploader.uploading{border-color:#3b82f6;box-shadow:0 8px 32px #3b82f633}.floating-uploader .uploader-header{background:#334155;border-bottom-color:#475569}.floating-uploader .uploader-header.draggable-header:hover{background:#475569}.floating-uploader .uploader-header.draggable-header:active{background:#64748b}.floating-uploader .uploader-header .header-left .upload-icon{background:#3b82f6}.floating-uploader .uploader-header .header-left .upload-info .upload-title{color:#f1f5f9}.floating-uploader .uploader-header .header-left .upload-info .upload-summary,.floating-uploader .uploader-header .header-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-header .header-actions .action-btn:hover{background:#475569;color:#f1f5f9}.floating-uploader .uploader-header .header-actions .action-btn.close-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-zone{border-color:#475569;background:#334155}.floating-uploader .uploader-content .upload-zone:hover{border-color:#3b82f6;background:#1e3a8a}.floating-uploader .uploader-content .upload-zone.drag-over{border-color:#60a5fa;background:#1e40af}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-icon{color:#94a3b8}.floating-uploader .uploader-content .upload-zone .upload-zone-content .upload-text .upload-title{color:#f1f5f9}.floating-uploader .uploader-content .upload-zone:hover .upload-zone-content .upload-icon{color:#60a5fa}.floating-uploader .uploader-content .upload-zone.drag-over .upload-zone-content .upload-icon{color:#93c5fd}.floating-uploader .uploader-content .upload-queue .upload-item{border-bottom-color:#334155}.floating-uploader .uploader-content .upload-queue .upload-item.status-uploading{background:#1e3a8a}.floating-uploader .uploader-content .upload-queue .upload-item.status-completed{background:#14532d}.floating-uploader .uploader-content .upload-queue .upload-item.status-error{background:#7f1d1d}.floating-uploader .uploader-content .upload-queue .upload-item .file-info .file-details .file-name{color:#f1f5f9}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .upload-queue .upload-item .file-progress .progress-text,.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn{color:#94a3b8}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn:hover{background:#475569}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.cancel-btn:hover{background:#7f1d1d;color:#fca5a5}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.retry-btn:hover{background:#1e3a8a;color:#60a5fa}.floating-uploader .uploader-content .upload-queue .upload-item .upload-actions .action-btn.success-btn{color:#4ade80}.floating-uploader .uploader-footer{background:#334155;border-top-color:#475569}.floating-uploader .uploader-footer .footer-stats .stat{color:#94a3b8}.floating-uploader .uploader-footer .footer-stats .stat.uploading{color:#60a5fa}.floating-uploader .uploader-footer .footer-stats .stat.completed{color:#4ade80}.floating-uploader .uploader-footer .footer-stats .stat.failed{color:#fca5a5}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.floating-uploader.animating{animation:slideInUp .3s cubic-bezier(.4,0,.2,1)}.floating-uploader.animating.hiding{animation:slideOutDown .3s cubic-bezier(.4,0,.2,1)}.no-uploads-message{padding:2rem;text-align:center;color:#6b7280}.no-uploads-message .message-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.no-uploads-message .message-content .message-icon{color:#9ca3af;opacity:.7}.no-uploads-message .message-content .message-text h4{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#374151}.no-uploads-message .message-content .message-text p{margin:0;font-size:.9rem;color:#6b7280}\n"] }]
         }], ctorParameters: () => [] });
 
+var floatingFileUploader_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CideEleFloatingFileUploaderComponent: CideEleFloatingFileUploaderComponent
+});
+
 class CideTextareaComponent {
     label = '';
     labelHide = false;
@@ -9200,6 +9235,1124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
+class CideEleFloatingContainerComponent {
+    config = signal({
+        id: '',
+        title: 'Floating Container',
+        icon: 'widgets',
+        headerColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        width: '400px',
+        height: 'auto',
+        minWidth: '300px',
+        minHeight: '200px',
+        maxWidth: '90vw',
+        maxHeight: '90vh',
+        resizable: true,
+        draggable: true,
+        closable: true,
+        minimizable: true,
+        maximizable: true
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    isMinimized;
+    isMaximized;
+    isVisible;
+    closeEvent = new EventEmitter();
+    minimizeEvent = new EventEmitter();
+    maximizeEvent = new EventEmitter();
+    containerRef;
+    // State signals
+    position = signal({ x: 100, y: 100 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+    // Computed properties
+    computedConfig = computed(() => this.config(), ...(ngDevMode ? [{ debugName: "computedConfig" }] : []));
+    dragStart = { x: 0, y: 0 };
+    resizeStart = { x: 0, y: 0, width: 0, height: 0 };
+    originalPosition = { x: 0, y: 0 };
+    originalSize = { width: 0, height: 0 };
+    savedPosition = { x: 100, y: 100 }; // Store position before maximizing
+    savedHeight = ''; // Store height before maximizing
+    ngAfterViewInit() {
+        // Center the container on screen
+        this.centerContainer();
+    }
+    constructor() {
+        // Watch for maximize state changes
+        effect(() => {
+            const isMaximized = this.isMaximized();
+            if (isMaximized && !this.savedHeight) {
+                // Save current height when maximizing
+                this.savedHeight = this.containerRef?.nativeElement?.style.height || this.config().height || '500px';
+            }
+            else if (!isMaximized && this.savedHeight) {
+                // Restore height when unmaximizing
+                this.savedHeight = '';
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Clean up any event listeners if needed
+    }
+    centerContainer() {
+        if (this.containerRef?.nativeElement) {
+            if (this.isMaximized()) {
+                // For maximized state, position with equal margins (20px from all sides)
+                this.position.set({ x: 20, y: 20 });
+            }
+            else {
+                // For normal state, center based on container size
+                const rect = this.containerRef.nativeElement.getBoundingClientRect();
+                const centerX = (window.innerWidth - rect.width) / 2;
+                const centerY = (window.innerHeight - rect.height) / 2;
+                this.position.set({ x: Math.max(0, centerX), y: Math.max(0, centerY) });
+            }
+        }
+    }
+    startDrag(event) {
+        if (!this.computedConfig().draggable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(true);
+        this.dragStart = { x: event.clientX, y: event.clientY };
+        this.originalPosition = { ...this.position() };
+        document.addEventListener('mousemove', this.onDragMove.bind(this));
+        document.addEventListener('mouseup', this.onDragEnd.bind(this));
+    }
+    onDragMove(event) {
+        if (!this.isDragging())
+            return;
+        const deltaX = event.clientX - this.dragStart.x;
+        const deltaY = event.clientY - this.dragStart.y;
+        const newX = Math.max(0, Math.min(window.innerWidth - 300, this.originalPosition.x + deltaX));
+        const newY = Math.max(0, Math.min(window.innerHeight - 100, this.originalPosition.y + deltaY));
+        this.position.set({ x: newX, y: newY });
+    }
+    onDragEnd() {
+        this.isDragging.set(false);
+        document.removeEventListener('mousemove', this.onDragMove.bind(this));
+        document.removeEventListener('mouseup', this.onDragEnd.bind(this));
+    }
+    startResize(event) {
+        if (!this.computedConfig().resizable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isResizing.set(true);
+        this.resizeStart = {
+            x: event.clientX,
+            y: event.clientY,
+            width: this.containerRef.nativeElement.offsetWidth,
+            height: this.containerRef.nativeElement.offsetHeight
+        };
+        this.originalSize = { ...this.resizeStart };
+        document.addEventListener('mousemove', this.onResizeMove.bind(this));
+        document.addEventListener('mouseup', this.onResizeEnd.bind(this));
+    }
+    onResizeMove(event) {
+        if (!this.isResizing())
+            return;
+        const deltaX = event.clientX - this.resizeStart.x;
+        const deltaY = event.clientY - this.resizeStart.y;
+        const newWidth = Math.max(300, this.originalSize.width + deltaX);
+        const newHeight = Math.max(200, this.originalSize.height + deltaY);
+        this.containerRef.nativeElement.style.width = `${newWidth}px`;
+        this.containerRef.nativeElement.style.height = `${newHeight}px`;
+    }
+    onResizeEnd() {
+        this.isResizing.set(false);
+        document.removeEventListener('mousemove', this.onResizeMove.bind(this));
+        document.removeEventListener('mouseup', this.onResizeEnd.bind(this));
+    }
+    // Mouse event handlers for container
+    onMouseDown(event) {
+        // Prevent text selection during drag
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        // Handle any additional mouse move logic if needed
+    }
+    onMouseUp(event) {
+        // Handle any additional mouse up logic if needed
+    }
+    // Action methods
+    onHeaderClick(event) {
+        // Only minimize if clicking on the header itself, not on buttons
+        if (this.isMinimized() && !event.target.closest('button')) {
+            this.minimize();
+        }
+    }
+    minimize() {
+        this.minimizeEvent.emit(this.computedConfig().id);
+    }
+    toggleMaximize() {
+        this.maximizeEvent.emit(this.computedConfig().id);
+    }
+    close() {
+        this.closeEvent.emit(this.computedConfig().id);
+    }
+    getHeaderBackground() {
+        return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
+    <div 
+      #container
+      class="tw-fixed tw-z-50 tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
+      [style.left.px]="isMaximized() ? 20 : position().x"
+      [style.top.px]="isMaximized() ? 20 : position().y"
+      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
+      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
+      [style.min-width]="config().minWidth || '300px'"
+      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
+      [style.max-width]="config().maxWidth || '90vw'"
+      [style.max-height]="config().maxHeight || '90vh'"
+      [class.tw-cursor-move]="isDragging()"
+      [class.tw-select-none]="true"
+      (mousedown)="onMouseDown($event)"
+      (mousemove)="onMouseMove($event)"
+      (mouseup)="onMouseUp($event)"
+      (mouseleave)="onMouseUp($event)">
+      
+      <!-- Header -->
+      <div 
+        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
+        [style.background]="getHeaderBackground()"
+        (mousedown)="startDrag($event)"
+        (click)="onHeaderClick($event)">
+        
+        <!-- Title Section -->
+        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
+          @if (config().icon) {
+            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
+          }
+          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
+          @if (isMinimized()) {
+            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
+          }
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-items-center tw-space-x-1">
+          @if (config().minimizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="minimize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMinimized() ? 'Restore' : 'Minimize'">
+              <cide-ele-icon class="tw-w-3 tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().maximizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="toggleMaximize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMaximized() ? 'Restore' : 'Maximize'">
+              <cide-ele-icon class="tw-w-3 tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().closable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="close(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              title="Close">
+              <cide-ele-icon class="tw-w-3 tw-h-3">close</cide-ele-icon>
+            </button>
+          }
+        </div>
+      </div>
+      
+      <!-- Content with @defer for performance -->
+      @if (!isMinimized()) {
+      <div 
+        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
+        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
+        [style.min-height]="'200px'">
+        @defer (when !isMinimized() && isVisible()) {
+          <div class="tw-p-4 tw-min-h-full">
+            <ng-content></ng-content>
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
+          </div>
+        }
+      </div>
+      }
+      
+      <!-- Resize Handle (if resizable) -->
+      @if (config().resizable !== false) {
+        <div 
+          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-3 tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
+          (mousedown)="startResize($event)">
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
+    <div 
+      #container
+      class="tw-fixed tw-z-50 tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
+      [style.left.px]="isMaximized() ? 20 : position().x"
+      [style.top.px]="isMaximized() ? 20 : position().y"
+      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
+      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
+      [style.min-width]="config().minWidth || '300px'"
+      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
+      [style.max-width]="config().maxWidth || '90vw'"
+      [style.max-height]="config().maxHeight || '90vh'"
+      [class.tw-cursor-move]="isDragging()"
+      [class.tw-select-none]="true"
+      (mousedown)="onMouseDown($event)"
+      (mousemove)="onMouseMove($event)"
+      (mouseup)="onMouseUp($event)"
+      (mouseleave)="onMouseUp($event)">
+      
+      <!-- Header -->
+      <div 
+        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
+        [style.background]="getHeaderBackground()"
+        (mousedown)="startDrag($event)"
+        (click)="onHeaderClick($event)">
+        
+        <!-- Title Section -->
+        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
+          @if (config().icon) {
+            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
+          }
+          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
+          @if (isMinimized()) {
+            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
+          }
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-items-center tw-space-x-1">
+          @if (config().minimizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="minimize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMinimized() ? 'Restore' : 'Minimize'">
+              <cide-ele-icon class="tw-w-3 tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().maximizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="toggleMaximize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMaximized() ? 'Restore' : 'Maximize'">
+              <cide-ele-icon class="tw-w-3 tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().closable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="close(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              title="Close">
+              <cide-ele-icon class="tw-w-3 tw-h-3">close</cide-ele-icon>
+            </button>
+          }
+        </div>
+      </div>
+      
+      <!-- Content with @defer for performance -->
+      @if (!isMinimized()) {
+      <div 
+        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
+        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
+        [style.min-height]="'200px'">
+        @defer (when !isMinimized() && isVisible()) {
+          <div class="tw-p-4 tw-min-h-full">
+            <ng-content></ng-content>
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
+          </div>
+        }
+      </div>
+      }
+      
+      <!-- Resize Handle (if resizable) -->
+      @if (config().resizable !== false) {
+        <div 
+          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-3 tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
+          (mousedown)="startResize($event)">
+        </div>
+      }
+    </div>
+  `, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], isMinimized: [{
+                type: Input
+            }], isMaximized: [{
+                type: Input
+            }], isVisible: [{
+                type: Input
+            }], closeEvent: [{
+                type: Output
+            }], minimizeEvent: [{
+                type: Output
+            }], maximizeEvent: [{
+                type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class CideEleFloatingContainerService {
+    injector;
+    containers = signal(new Map(), ...(ngDevMode ? [{ debugName: "containers" }] : []));
+    nextZIndex = signal(1000, ...(ngDevMode ? [{ debugName: "nextZIndex" }] : []));
+    instanceCounter = signal(0, ...(ngDevMode ? [{ debugName: "instanceCounter" }] : []));
+    // Dynamic component management
+    componentRegistry = new Map();
+    activeComponents = new Map();
+    constructor(injector) {
+        this.injector = injector;
+    }
+    // Computed properties
+    visibleContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isVisible), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
+    minimizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMinimized), ...(ngDevMode ? [{ debugName: "minimizedContainers" }] : []));
+    maximizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMaximized), ...(ngDevMode ? [{ debugName: "maximizedContainers" }] : []));
+    // Container management methods
+    show(config) {
+        const containerId = config.id || this.generateId();
+        const instanceId = this.generateInstanceId(config.componentId || 'default');
+        const zIndex = this.nextZIndex();
+        const now = new Date();
+        const container = {
+            id: containerId,
+            config: { ...config, id: containerId },
+            isVisible: true,
+            isMinimized: false,
+            isMaximized: false,
+            zIndex,
+            instanceId,
+            componentType: config.componentId || 'default',
+            createdAt: now,
+            lastAccessed: now
+        };
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            newContainers.set(containerId, container);
+            return newContainers;
+        });
+        this.nextZIndex.update(z => z + 1);
+        return containerId;
+    }
+    hide(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isVisible = false;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
+    }
+    minimize(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isMinimized = !container.isMinimized;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
+    }
+    maximize(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isMaximized = !container.isMaximized;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
+    }
+    bringToFront(containerId) {
+        const zIndex = this.nextZIndex();
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.zIndex = zIndex;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
+        this.nextZIndex.update(z => z + 1);
+    }
+    getContainer(containerId) {
+        return this.containers().get(containerId);
+    }
+    isVisible(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isVisible : false;
+    }
+    isMinimized(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isMinimized : false;
+    }
+    isMaximized(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isMaximized : false;
+    }
+    hideAll() {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            for (const [id, container] of newContainers) {
+                container.isVisible = false;
+                newContainers.set(id, container);
+            }
+            return newContainers;
+        });
+    }
+    minimizeAll() {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            for (const [id, container] of newContainers) {
+                if (container.isVisible) {
+                    container.isMinimized = true;
+                    newContainers.set(id, container);
+                }
+            }
+            return newContainers;
+        });
+    }
+    generateId() {
+        return `floating-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    generateInstanceId(componentType) {
+        const counter = this.instanceCounter() + 1;
+        this.instanceCounter.update(c => c + 1);
+        return `${componentType}-instance-${counter}-${Date.now()}`;
+    }
+    // Multiple instance management methods
+    getInstancesByComponentType(componentType) {
+        return Array.from(this.containers().values())
+            .filter(container => container.componentType === componentType);
+    }
+    getActiveInstancesByComponentType(componentType) {
+        return Array.from(this.containers().values())
+            .filter(container => container.componentType === componentType && container.isVisible);
+    }
+    getInstanceCount(componentType) {
+        return this.getInstancesByComponentType(componentType).length;
+    }
+    getActiveInstanceCount(componentType) {
+        return this.getActiveInstancesByComponentType(componentType).length;
+    }
+    // Close all instances of a component type
+    closeAllInstancesOfType(componentType) {
+        const instances = this.getInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.hide(instance.id);
+        });
+    }
+    // Minimize all instances of a component type
+    minimizeAllInstancesOfType(componentType) {
+        const instances = this.getActiveInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.minimize(instance.id);
+        });
+    }
+    // Bring all instances of a component type to front
+    bringAllInstancesToFront(componentType) {
+        const instances = this.getActiveInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.bringToFront(instance.id);
+        });
+    }
+    // Get instance by unique instance ID
+    getInstanceByInstanceId(instanceId) {
+        return Array.from(this.containers().values())
+            .find(container => container.instanceId === instanceId);
+    }
+    // Update last accessed time
+    updateLastAccessed(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.lastAccessed = new Date();
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
+    }
+    // ===== DYNAMIC COMPONENT MANAGEMENT =====
+    /**
+     * Register a component for dynamic loading
+     */
+    registerComponent(componentId, componentType) {
+        this.componentRegistry.set(componentId, componentType);
+    }
+    /**
+     * Unregister a component
+     */
+    unregisterComponent(componentId) {
+        this.componentRegistry.delete(componentId);
+    }
+    /**
+     * Get registered component type
+     */
+    getComponentType(componentId) {
+        return this.componentRegistry.get(componentId);
+    }
+    /**
+     * Check if component is registered
+     */
+    isComponentRegistered(componentId) {
+        return this.componentRegistry.has(componentId);
+    }
+    /**
+     * Get registered component IDs
+     */
+    getRegisteredComponentIds() {
+        return Array.from(this.componentRegistry.keys());
+    }
+    /**
+     * Create and load component dynamically
+     */
+    loadComponent(componentId, viewContainer, config) {
+        const componentType = this.componentRegistry.get(componentId);
+        if (!componentType) {
+            return null;
+        }
+        try {
+            viewContainer.clear();
+            const componentRef = viewContainer.createComponent(componentType, {
+                injector: this.injector
+            });
+            // Set inputs if provided
+            if (config?.inputs) {
+                Object.keys(config.inputs).forEach(key => {
+                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
+                        componentRef.instance[key] = config.inputs[key];
+                    }
+                });
+            }
+            // Set outputs if provided
+            if (config?.outputs) {
+                Object.keys(config.outputs).forEach(key => {
+                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
+                        const output = componentRef.instance[key];
+                        if (output && typeof output.subscribe === 'function') {
+                            output.subscribe(config.outputs[key]);
+                        }
+                    }
+                });
+            }
+            this.activeComponents.set(componentId, componentRef);
+            return componentRef;
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    /**
+     * Destroy component
+     */
+    destroyComponent(componentId) {
+        const componentRef = this.activeComponents.get(componentId);
+        if (componentRef) {
+            componentRef.destroy();
+            this.activeComponents.delete(componentId);
+        }
+    }
+    /**
+     * Get active component count
+     */
+    getActiveComponentCount() {
+        return this.activeComponents.size;
+    }
+    /**
+     * Clear all active components
+     */
+    clearActiveComponents() {
+        this.activeComponents.forEach(componentRef => componentRef.destroy());
+        this.activeComponents.clear();
+    }
+    // ===== CONTAINER MANAGER FUNCTIONALITY =====
+    /**
+     * Get config signal for a container
+     */
+    getConfigSignal(config) {
+        return signal(config);
+    }
+    /**
+     * Get minimized signal for a container
+     */
+    getMinimizedSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            return container?.isMinimized || false;
+        });
+    }
+    /**
+     * Get maximized signal for a container
+     */
+    getMaximizedSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            return container?.isMaximized || false;
+        });
+    }
+    /**
+     * Get visible signal for a container
+     */
+    getVisibleSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            return container?.isVisible || false;
+        });
+    }
+    /**
+     * Get component config for dynamic loading
+     */
+    getComponentConfig(config) {
+        if (config.componentConfig) {
+            return {
+                componentId: config.componentId || config.id,
+                inputs: config.componentConfig.inputs,
+                outputs: config.componentConfig.outputs
+            };
+        }
+        return undefined;
+    }
+    /**
+     * Handle container close event
+     */
+    onClose(containerId) {
+        this.hide(containerId);
+    }
+    /**
+     * Handle container minimize event
+     */
+    onMinimize(containerId) {
+        this.minimize(containerId);
+    }
+    /**
+     * Handle container maximize event
+     */
+    onMaximize(containerId) {
+        this.maximize(containerId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class CideEleFloatingContainerManagerComponent {
+    containerService = inject(CideEleFloatingContainerService);
+    // Computed properties
+    visibleContainers = computed(() => this.containerService.visibleContainers(), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
+    @for (container of visibleContainers(); track container.id) {
+      <cide-ele-floating-container
+        [config]="containerService.getConfigSignal(container.config)"
+        [isMinimized]="containerService.getMinimizedSignal(container.id)"
+        [isMaximized]="containerService.getMaximizedSignal(container.id)"
+        [isVisible]="containerService.getVisibleSignal(container.id)"
+        [style.z-index]="container.zIndex"
+        (closeEvent)="containerService.onClose($event)"
+        (minimizeEvent)="containerService.onMinimize($event)"
+        (maximizeEvent)="containerService.onMaximize($event)">
+        
+        <!-- Dynamic content loading with @defer for performance -->
+        @defer (when container.isVisible) {
+          <div 
+            cideEleFloatingDynamic
+            [componentId]="container.config.componentId || container.config.id"
+            [componentConfig]="containerService.getComponentConfig(container.config)"
+            [isVisible]="container.isVisible">
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
+          </div>
+        } @error {
+          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
+            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
+            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
+            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
+            <button 
+              cideEleButton 
+              variant="outline" 
+              size="xs" 
+              (click)="containerService.onClose(container.id)"
+              class="tw-mt-2">
+              Close
+            </button>
+          </div>
+        }
+      </cide-ele-floating-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
+    @for (container of visibleContainers(); track container.id) {
+      <cide-ele-floating-container
+        [config]="containerService.getConfigSignal(container.config)"
+        [isMinimized]="containerService.getMinimizedSignal(container.id)"
+        [isMaximized]="containerService.getMaximizedSignal(container.id)"
+        [isVisible]="containerService.getVisibleSignal(container.id)"
+        [style.z-index]="container.zIndex"
+        (closeEvent)="containerService.onClose($event)"
+        (minimizeEvent)="containerService.onMinimize($event)"
+        (maximizeEvent)="containerService.onMaximize($event)">
+        
+        <!-- Dynamic content loading with @defer for performance -->
+        @defer (when container.isVisible) {
+          <div 
+            cideEleFloatingDynamic
+            [componentId]="container.config.componentId || container.config.id"
+            [componentConfig]="containerService.getComponentConfig(container.config)"
+            [isVisible]="container.isVisible">
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
+          </div>
+        } @error {
+          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
+            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
+            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
+            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
+            <button 
+              cideEleButton 
+              variant="outline" 
+              size="xs" 
+              (click)="containerService.onClose(container.id)"
+              class="tw-mt-2">
+              Close
+            </button>
+          </div>
+        }
+      </cide-ele-floating-container>
+    }
+  ` }]
+            }], ctorParameters: null, propDecorators: null }) });
+
+class CideEleFloatingFeaturesService {
+    containerService = inject(CideEleFloatingContainerService);
+    constructor() {
+        // Auto-register file uploader component on service initialization
+        this.initializeFileUploader();
+        // Entity rights sharing is handled by its own dedicated service
+    }
+    async initializeFileUploader() {
+        // Check if already registered to avoid duplicate registration
+        if (this.containerService.isComponentRegistered('file-uploader')) {
+            console.log('✅ File uploader component already registered');
+            return;
+        }
+        try {
+            // Use relative import to avoid circular dependency
+            const module = await Promise.resolve().then(function () { return floatingFileUploader_component; });
+            if (module.CideEleFloatingFileUploaderComponent) {
+                this.containerService.registerComponent('file-uploader', module.CideEleFloatingFileUploaderComponent);
+                console.log('✅ File uploader component registered successfully');
+            }
+        }
+        catch (error) {
+            console.error('❌ Failed to register file uploader component:', error);
+        }
+    }
+    // File Uploader
+    async showFileUploader(componentType, inputData) {
+        // Ensure component is registered before showing
+        if (!this.containerService.isComponentRegistered('file-uploader')) {
+            console.log('📝 File uploader component not registered, registering now...');
+            await this.initializeFileUploader();
+        }
+        const config = {
+            id: 'file-uploader-main',
+            title: 'File Uploader',
+            icon: 'cloud_upload',
+            width: '500px',
+            height: '400px',
+            minWidth: '400px',
+            minHeight: '300px',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            componentId: 'file-uploader',
+            componentConfig: inputData ? {
+                inputs: inputData,
+                outputs: {}
+            } : undefined
+        };
+        // Register component if provided
+        if (componentType) {
+            this.registerComponent('file-uploader', componentType);
+        }
+        return this.containerService.show(config);
+    }
+    hideFileUploader() {
+        this.containerService.hide('file-uploader-main');
+    }
+    // Show file uploader with specific container ID (for multiple instances)
+    showFileUploaderInstance(containerId, componentType, config = {}) {
+        const defaultConfig = {
+            id: containerId,
+            title: 'File Uploader',
+            icon: 'cloud_upload',
+            width: '500px',
+            height: '400px',
+            minWidth: '400px',
+            minHeight: '300px',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            componentId: 'file-uploader',
+            ...config
+        };
+        // Register component if provided
+        if (componentType) {
+            this.registerComponent('file-uploader', componentType);
+        }
+        return this.containerService.show(defaultConfig);
+    }
+    // Generic method to show any floating feature
+    showFeature(featureId, config) {
+        return this.containerService.show({ ...config, id: featureId });
+    }
+    // Generic method for showing any component dynamically
+    showComponent(containerId, componentId, title, componentType, config = {}) {
+        const containerConfig = {
+            id: containerId,
+            title,
+            icon: 'widgets',
+            width: '400px',
+            height: '500px',
+            minWidth: '300px',
+            minHeight: '200px',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            componentId,
+            ...config
+        };
+        // Register component if provided
+        if (componentType) {
+            this.registerComponent(componentId, componentType);
+        }
+        return this.containerService.show(containerConfig);
+    }
+    // Show multiple instances of the same component
+    showMultipleInstances(componentId, titlePrefix, count, config = {}) {
+        const containerIds = [];
+        for (let i = 1; i <= count; i++) {
+            const containerId = `${componentId}-instance-${i}-${Date.now()}`;
+            const title = `${titlePrefix} ${i}`;
+            const containerConfig = {
+                id: containerId,
+                title,
+                icon: 'widgets',
+                width: '400px',
+                height: '500px',
+                minWidth: '300px',
+                minHeight: '200px',
+                resizable: true,
+                draggable: true,
+                closable: true,
+                minimizable: true,
+                maximizable: true,
+                componentId,
+                ...config
+            };
+            const id = this.containerService.show(containerConfig);
+            containerIds.push(id);
+        }
+        return containerIds;
+    }
+    // Get all instances of a component type
+    getInstancesOfType(componentType) {
+        return this.containerService.getInstancesByComponentType(componentType);
+    }
+    // Get active instances of a component type
+    getActiveInstancesOfType(componentType) {
+        return this.containerService.getActiveInstancesByComponentType(componentType);
+    }
+    // Close all instances of a component type
+    closeAllInstancesOfType(componentType) {
+        this.containerService.closeAllInstancesOfType(componentType);
+    }
+    // Minimize all instances of a component type
+    minimizeAllInstancesOfType(componentType) {
+        this.containerService.minimizeAllInstancesOfType(componentType);
+    }
+    // Get instance count for a component type
+    getInstanceCount(componentType) {
+        return this.containerService.getInstanceCount(componentType);
+    }
+    // Get active instance count for a component type
+    getActiveInstanceCount(componentType) {
+        return this.containerService.getActiveInstanceCount(componentType);
+    }
+    // Register a component for dynamic loading
+    registerComponent(componentId, componentType) {
+        this.containerService.registerComponent(componentId, componentType);
+    }
+    // Unregister a component
+    unregisterComponent(componentId) {
+        this.containerService.unregisterComponent(componentId);
+    }
+    hideFeature(featureId) {
+        this.containerService.hide(featureId);
+    }
+    // Utility methods
+    bringToFront(featureId) {
+        this.containerService.bringToFront(featureId);
+    }
+    minimize(featureId) {
+        this.containerService.minimize(featureId);
+    }
+    maximize(featureId) {
+        this.containerService.maximize(featureId);
+    }
+    isVisible(featureId) {
+        return this.containerService.isVisible(featureId);
+    }
+    hideAll() {
+        this.containerService.hideAll();
+    }
+    minimizeAll() {
+        this.containerService.minimizeAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideEleFloatingContainerDynamicDirective {
+    viewContainer;
+    containerService;
+    componentId;
+    componentConfig;
+    isVisible = true;
+    componentRef = null;
+    constructor(viewContainer, containerService) {
+        this.viewContainer = viewContainer;
+        this.containerService = containerService;
+    }
+    ngOnInit() {
+        if (this.isVisible && this.componentId) {
+            this.loadComponent();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyComponent();
+    }
+    ngOnChanges() {
+        if (this.isVisible && this.componentId && !this.componentRef) {
+            this.loadComponent();
+        }
+        else if (!this.isVisible && this.componentRef) {
+            this.destroyComponent();
+        }
+    }
+    loadComponent() {
+        if (this.componentId && this.containerService.isComponentRegistered(this.componentId)) {
+            this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
+        }
+        else {
+            console.warn(`Component '${this.componentId}' is not registered. Available components:`, this.containerService.getRegisteredComponentIds());
+            // Retry after a short delay in case registration is still in progress
+            setTimeout(() => {
+                if (this.containerService.isComponentRegistered(this.componentId)) {
+                    this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
+                }
+                else {
+                    console.error(`Component '${this.componentId}' still not registered after retry`);
+                }
+            }, 100);
+        }
+    }
+    destroyComponent() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, deps: [{ token: i0.ViewContainerRef }, { token: CideEleFloatingContainerService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFloatingContainerDynamicDirective, isStandalone: true, selector: "[cideEleFloatingDynamic]", inputs: { componentId: "componentId", componentConfig: "componentConfig", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cideEleFloatingDynamic]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: CideEleFloatingContainerService }], propDecorators: { componentId: [{
+                type: Input
+            }], componentConfig: [{
+                type: Input
+            }], isVisible: [{
+                type: Input
+            }] } });
+
+var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
+});
+
 /*
  * Public API Surface of cloud-ide-element
  * Here we can add what need to be exported from library
@@ -9209,5 +10362,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingFileUploaderComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
+export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map