cloud-ide-element 1.0.119 → 1.0.121

package/fesm2022/cloud-ide-element.mjs

@@ -4990,9 +4990,8 @@ class CideEleFloatingFileUploaderComponent {
     fileManagerService = inject(CideEleFileManagerService);
     // Input data from floating container
     data = {};
-    // Signals for reactive state
+    // Signals for reactive state (simplified for floating container)
     isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : [])); // Set to true by default for floating containers
-    isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
     currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
     currentGroupId = signal(null, ...(ngDevMode ? [{ debugName: "currentGroupId" }] : []));
     // Use file manager service as the single source of truth
@@ -5016,23 +5015,27 @@ class CideEleFloatingFileUploaderComponent {
     hasFilesToShow = computed(() => {
         return this.hasActiveUploads() || this.allFilesForGroup().length > 0;
     }, ...(ngDevMode ? [{ debugName: "hasFilesToShow" }] : []));
+    // Count methods for template
+    getUploadingCount() {
+        return this.activeUploadsLocal().length;
+    }
+    getCompletedCount() {
+        return this.completedUploads().length;
+    }
+    getFailedCount() {
+        return this.failedUploads().length;
+    }
     // Animation states
     isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
-    // Drag functionality
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
-    dragOffset = { x: 0, y: 0 };
+    // Drag functionality removed - handled by floating container
     // File drag and drop functionality
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    // Window resize handler reference for cleanup
-    windowResizeHandler;
+    // Window resize handler removed - handled by floating container
     // Cached dimensions for performance
-    cachedDimensions = { width: 320, height: 200 };
-    lastDimensionUpdate = 0;
+    // Cached dimensions removed - handled by floating container
     constructor() {
         console.log('🚀 [FloatingFileUploader] Component initialized');
-        // Initialize default position
-        this.initializePosition();
+        // Position initialization removed - handled by floating container
         // Consolidated effect for all visibility logic - SINGLE SOURCE OF TRUTH
         effect(() => {
             const hasActiveUploads = this.hasActiveUploads();
@@ -5079,8 +5082,7 @@ class CideEleFloatingFileUploaderComponent {
         this.setupDragAndDrop();
         // Set up file input change listeners
         this.setupFileInputListeners();
-        // Set up window resize listener
-        this.setupWindowResize();
+        // Window resize setup removed - handled by floating container
     }
     initializeWithData() {
         console.log('🚀 [FloatingFileUploader] Initializing with data:', this.data);
@@ -5119,10 +5121,7 @@ class CideEleFloatingFileUploaderComponent {
         console.log('🧹 [FloatingFileUploader] Component destroyed');
         this.removeDragAndDropListeners();
         this.removeFileInputListeners();
-        // Clean up window resize listener
-        if (this.windowResizeHandler) {
-            window.removeEventListener('resize', this.windowResizeHandler);
-        }
+        // Window resize cleanup removed - handled by floating container
     }
     /**
      * Set up drag and drop functionality
@@ -5249,20 +5248,7 @@ class CideEleFloatingFileUploaderComponent {
             this.isAnimating.set(false);
         }, 300);
     }
-    /**
-     * Toggle minimize state
-     */
-    toggleMinimize() {
-        this.isMinimized.set(!this.isMinimized());
-    }
-    /**
-     * Close the floating uploader
-     */
-    close() {
-        // Don't clear files from service - just hide the uploader
-        // Files will be fetched from API when "Show Files" is clicked
-        this.hideWithAnimation();
-    }
+    // Minimize and close functionality removed - handled by floating container
     /**
      * Get upload summary text
      */
@@ -5432,143 +5418,15 @@ class CideEleFloatingFileUploaderComponent {
             });
         });
     }
-    /**
-     * Update cached dimensions (throttled for performance)
-     */
-    updateCachedDimensions() {
-        const now = Date.now();
-        // Only update dimensions every 100ms to avoid excessive DOM queries
-        if (now - this.lastDimensionUpdate < 100) {
-            return;
-        }
-        const uploaderElement = document.querySelector('.floating-uploader');
-        if (uploaderElement) {
-            this.cachedDimensions = {
-                width: uploaderElement.offsetWidth,
-                height: uploaderElement.offsetHeight
-            };
-            this.lastDimensionUpdate = now;
-        }
-    }
-    /**
-     * Start dragging the uploader
-     */
-    startDrag(event) {
-        event.preventDefault();
-        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        const currentPos = this.position();
-        this.dragOffset = {
-            x: clientX - currentPos.x,
-            y: clientY - currentPos.y
-        };
-        this.isDragging.set(true);
-        // Update cached dimensions at the start of drag for better performance
-        this.updateCachedDimensions();
-        // Add event listeners for drag and end
-        const moveHandler = (e) => this.onDrag(e);
-        const endHandler = () => this.endDrag(moveHandler, endHandler);
-        document.addEventListener('mousemove', moveHandler, { passive: false });
-        document.addEventListener('mouseup', endHandler);
-        document.addEventListener('touchmove', moveHandler, { passive: false });
-        document.addEventListener('touchend', endHandler);
-        // Prevent text selection during drag
-        document.body.style.userSelect = 'none';
-    }
-    /**
-     * Handle dragging movement
-     */
-    onDrag(event) {
-        if (!this.isDragging())
-            return;
-        event.preventDefault();
-        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        const newX = clientX - this.dragOffset.x;
-        const newY = clientY - this.dragOffset.y;
-        // Constrain to viewport bounds using cached dimensions for performance
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Use cached dimensions instead of DOM queries for better performance
-        const uploaderWidth = this.cachedDimensions.width;
-        const uploaderHeight = this.cachedDimensions.height;
-        // Ensure uploader stays within viewport bounds
-        const constrainedX = Math.max(0, Math.min(newX, viewportWidth - uploaderWidth));
-        const constrainedY = Math.max(0, Math.min(newY, viewportHeight - uploaderHeight));
-        this.position.set({ x: constrainedX, y: constrainedY });
-    }
-    /**
-     * End dragging
-     */
-    endDrag(moveHandler, endHandler) {
-        this.isDragging.set(false);
-        // Remove event listeners
-        document.removeEventListener('mousemove', moveHandler);
-        document.removeEventListener('mouseup', endHandler);
-        document.removeEventListener('touchmove', moveHandler);
-        document.removeEventListener('touchend', endHandler);
-        // Restore text selection
-        document.body.style.userSelect = '';
-    }
-    /**
-     * Set up window resize listener to keep uploader within bounds
-     */
-    setupWindowResize() {
-        const handleResize = () => {
-            const currentPos = this.position();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            // Update cached dimensions on resize
-            this.updateCachedDimensions();
-            // Use cached dimensions for performance
-            const uploaderWidth = this.cachedDimensions.width;
-            const uploaderHeight = this.cachedDimensions.height;
-            // Constrain position to new viewport bounds
-            const constrainedX = Math.max(0, Math.min(currentPos.x, viewportWidth - uploaderWidth));
-            const constrainedY = Math.max(0, Math.min(currentPos.y, viewportHeight - uploaderHeight));
-            // Update position if it changed
-            if (constrainedX !== currentPos.x || constrainedY !== currentPos.y) {
-                this.position.set({ x: constrainedX, y: constrainedY });
-                console.log('📐 [FloatingFileUploader] Position adjusted for window resize:', { x: constrainedX, y: constrainedY });
-            }
-        };
-        window.addEventListener('resize', handleResize);
-        // Store reference for cleanup
-        this.windowResizeHandler = handleResize;
-    }
-    /**
-     * Initialize default position
-     */
-    initializePosition() {
-        // Set initial position to bottom-right corner
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Initialize cached dimensions with defaults
-        this.cachedDimensions = { width: 320, height: 300 };
-        // Use cached dimensions for initial positioning
-        const uploaderWidth = this.cachedDimensions.width;
-        const uploaderHeight = this.cachedDimensions.height;
-        // Ensure initial position is within bounds
-        const initialX = Math.max(20, viewportWidth - uploaderWidth - 20);
-        const initialY = Math.max(20, viewportHeight - uploaderHeight - 20);
-        this.position.set({
-            x: initialX,
-            y: initialY
-        });
-        // Update dimensions after a short delay to get actual rendered size
-        setTimeout(() => {
-            this.updateCachedDimensions();
-        }, 100);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-max-h-[500px] tw-bg-white tw-rounded-xl tw-shadow-lg tw-border tw-border-gray-200 tw-overflow-hidden tw-transition-all tw-duration-300\">\n    <!-- Simple header without window controls (floating container handles these) -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-3 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-blue-600 tw-rounded-md tw-text-white\">\n          <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        </div>\n        <div>\n          <div class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">{{ data.title || 'File Upload' }}</div>\n          <div class=\"tw-text-xs tw-text-gray-500\">{{ getUploadSummary() }}</div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Content -->\n  <div class=\"tw-max-h-[400px] tw-overflow-y-auto\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-m-2 tw-p-3 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-md tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n         [class.tw-border-blue-500]=\"isDragOver()\"\n         [class.tw-bg-blue-100]=\"isDragOver()\"\n         [class.tw-scale-105]=\"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]=\"data.multiple !== false\" \n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             class=\"tw-hidden\">\n      \n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n                       [class.tw-text-blue-500]=\"isDragOver()\"\n                       size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div>\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n          @if (data.description) {\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"tw-space-y-0\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-2 tw-border-b tw-border-gray-100 tw-transition-colors tw-duration-200\"\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"tw-min-w-0 tw-flex-1\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n            <div class=\"tw-text-xs\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"tw-text-red-600 tw-font-medium\">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=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n                  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=\"tw-p-8 tw-text-center tw-text-gray-500\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n        <div>\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\" \n           [class.tw-text-blue-600]=\"hasActiveUploads()\">\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n        <span>{{ getUploadingCount() }} uploading</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        <span>{{ getCompletedCount() }} completed</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\" \n           [class.tw-text-red-600]=\"getFailedCount() > 0\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n</div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: CideEleFloatingFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
                         CommonModule,
                         CideIconComponent
-                    ], 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"] }]
+                    ], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-max-h-[500px] tw-bg-white tw-rounded-xl tw-shadow-lg tw-border tw-border-gray-200 tw-overflow-hidden tw-transition-all tw-duration-300\">\n    <!-- Simple header without window controls (floating container handles these) -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-3 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-blue-600 tw-rounded-md tw-text-white\">\n          <cide-ele-icon size=\"sm\">cloud_upload</cide-ele-icon>\n        </div>\n        <div>\n          <div class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">{{ data.title || 'File Upload' }}</div>\n          <div class=\"tw-text-xs tw-text-gray-500\">{{ getUploadSummary() }}</div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Content -->\n  <div class=\"tw-max-h-[400px] tw-overflow-y-auto\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-m-2 tw-p-3 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-md tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n         [class.tw-border-blue-500]=\"isDragOver()\"\n         [class.tw-bg-blue-100]=\"isDragOver()\"\n         [class.tw-scale-105]=\"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]=\"data.multiple !== false\" \n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             class=\"tw-hidden\">\n      \n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n                       [class.tw-text-blue-500]=\"isDragOver()\"\n                       size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div>\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n          @if (data.description) {\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"tw-space-y-0\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-2 tw-border-b tw-border-gray-100 tw-transition-colors tw-duration-200\"\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"tw-min-w-0 tw-flex-1\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n            <div class=\"tw-text-xs\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"tw-text-red-600 tw-font-medium\">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=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (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=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n                  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=\"tw-p-8 tw-text-center tw-text-gray-500\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n        <div>\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\" \n           [class.tw-text-blue-600]=\"hasActiveUploads()\">\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n        <span>{{ getUploadingCount() }} uploading</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        <span>{{ getCompletedCount() }} completed</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\" \n           [class.tw-text-red-600]=\"getFailedCount() > 0\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n</div>\n}" }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -5919,318 +5777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class FloatingContainerShortcutsService {
-    keyboardShortcutService = inject(KeyboardShortcutService);
-    containerService = inject(CideEleFloatingContainerService);
-    // Z-index layers for different container states
-    Z_INDEX_LAYERS = {
-        HIDDEN: 100, // Hidden containers (behind everything)
-        BACKGROUND: 1000, // Background containers
-        NORMAL: 2000, // Normal visible containers
-        FOCUSED: 3000, // Focused containers
-        MODAL: 4000, // Modal containers
-        TOOLTIP: 5000 // Tooltips and overlays
-    };
-    constructor() {
-        this.registerDefaultShortcuts();
-    }
-    /**
-     * Register default floating container shortcuts using custom key combinations
-     */
-    registerDefaultShortcuts() {
-        // C + 1: Focus on first container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-focus-first',
-            key: '1',
-            ctrlKey: true,
-            description: 'Focus on first floating container (C+1)',
-            action: () => this.focusFirstContainer(),
-            preventDefault: true
-        });
-        // C + 2: Focus on second container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-focus-second',
-            key: '2',
-            ctrlKey: true,
-            description: 'Focus on second floating container (C+2)',
-            action: () => this.focusContainerByIndex(1),
-            preventDefault: true
-        });
-        // C + 3: Focus on third container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-focus-third',
-            key: '3',
-            ctrlKey: true,
-            description: 'Focus on third floating container (C+3)',
-            action: () => this.focusContainerByIndex(2),
-            preventDefault: true
-        });
-        // C + 4: Focus on fourth container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-focus-fourth',
-            key: '4',
-            ctrlKey: true,
-            description: 'Focus on fourth floating container (C+4)',
-            action: () => this.focusContainerByIndex(3),
-            preventDefault: true
-        });
-        // C + 5: Focus on fifth container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-focus-fifth',
-            key: '5',
-            ctrlKey: true,
-            description: 'Focus on fifth floating container (C+5)',
-            action: () => this.focusContainerByIndex(4),
-            preventDefault: true
-        });
-        // C + N: Cycle to next container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-cycle-forward',
-            key: 'n',
-            ctrlKey: true,
-            description: 'Cycle forward through floating containers (C+N)',
-            action: () => this.cycleToNextContainer(),
-            preventDefault: true
-        });
-        // C + P: Cycle to previous container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-cycle-backward',
-            key: 'p',
-            ctrlKey: true,
-            description: 'Cycle backward through floating containers (C+P)',
-            action: () => this.cycleToPreviousContainer(),
-            preventDefault: true
-        });
-        // C + H: Hide all containers
-        this.keyboardShortcutService.register({
-            id: 'floating-container-hide-all',
-            key: 'h',
-            ctrlKey: true,
-            description: 'Hide all floating containers (C+H)',
-            action: () => this.hideAllContainers(),
-            preventDefault: true
-        });
-        // C + M: Minimize all containers
-        this.keyboardShortcutService.register({
-            id: 'floating-container-minimize-all',
-            key: 'm',
-            ctrlKey: true,
-            description: 'Minimize all floating containers (C+M)',
-            action: () => this.minimizeAllContainers(),
-            preventDefault: true
-        });
-        // C + O: Open file uploader
-        this.keyboardShortcutService.register({
-            id: 'floating-container-open-file-uploader',
-            key: 'o',
-            ctrlKey: true,
-            description: 'Open file uploader (C+O)',
-            action: () => this.openFileUploader(),
-            preventDefault: true
-        });
-        // C + R: Open entity rights sharing
-        this.keyboardShortcutService.register({
-            id: 'floating-container-open-entity-rights',
-            key: 'r',
-            ctrlKey: true,
-            description: 'Open entity rights sharing (C+R)',
-            action: () => this.openEntityRightsSharing(),
-            preventDefault: true
-        });
-        // C + S: Show all containers
-        this.keyboardShortcutService.register({
-            id: 'floating-container-show-all',
-            key: 's',
-            ctrlKey: true,
-            description: 'Show all floating containers (C+S)',
-            action: () => this.showAllContainers(),
-            preventDefault: true
-        });
-        // C + D: Duplicate current container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-duplicate',
-            key: 'd',
-            ctrlKey: true,
-            description: 'Duplicate current container (C+D)',
-            action: () => this.duplicateCurrentContainer(),
-            preventDefault: true
-        });
-        // C + W: Close current container
-        this.keyboardShortcutService.register({
-            id: 'floating-container-close-current',
-            key: 'w',
-            ctrlKey: true,
-            description: 'Close current container (C+W)',
-            action: () => this.closeCurrentContainer(),
-            preventDefault: true
-        });
-        // C + T: Toggle container visibility
-        this.keyboardShortcutService.register({
-            id: 'floating-container-toggle-visibility',
-            key: 't',
-            ctrlKey: true,
-            description: 'Toggle container visibility (C+T)',
-            action: () => this.toggleContainerVisibility(),
-            preventDefault: true
-        });
-        console.log('🎯 [FloatingContainerShortcuts] Custom shortcuts registered (C+1, C+2, C+O, etc.)');
-    }
-    /**
-     * Override a floating container shortcut
-     */
-    overrideShortcut(shortcutId, newKey, options) {
-        this.keyboardShortcutService.override(shortcutId, newKey, options);
-    }
-    /**
-     * Add a custom floating container shortcut
-     */
-    addCustomShortcut(shortcut) {
-        this.keyboardShortcutService.register({
-            ...shortcut,
-            preventDefault: true
-        });
-    }
-    /**
-     * Remove a floating container shortcut
-     */
-    removeShortcut(shortcutId) {
-        this.keyboardShortcutService.unregister(shortcutId);
-    }
-    /**
-     * Get all floating container shortcuts
-     */
-    getShortcuts() {
-        return this.keyboardShortcutService.getShortcuts(shortcut => shortcut.id.startsWith('floating-container-'));
-    }
-    // Action methods
-    cycleToNextContainer() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0)
-            return;
-        // Sort by last accessed time (most recent first)
-        const sortedContainers = visibleContainers.sort((a, b) => b.lastAccessed.getTime() - a.lastAccessed.getTime());
-        // Find current front container
-        const currentFront = sortedContainers[0];
-        const currentIndex = sortedContainers.findIndex(c => c.id === currentFront.id);
-        // Get next container (wrap around)
-        const nextIndex = (currentIndex + 1) % sortedContainers.length;
-        const nextContainer = sortedContainers[nextIndex];
-        this.containerService.bringToFront(nextContainer.id);
-        console.log(`🔄 [FloatingContainerShortcuts] Cycled to container: ${nextContainer.config.title}`);
-    }
-    cycleToPreviousContainer() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0)
-            return;
-        // Sort by last accessed time (most recent first)
-        const sortedContainers = visibleContainers.sort((a, b) => b.lastAccessed.getTime() - a.lastAccessed.getTime());
-        // Find current front container
-        const currentFront = sortedContainers[0];
-        const currentIndex = sortedContainers.findIndex(c => c.id === currentFront.id);
-        // Get previous container (wrap around)
-        const prevIndex = currentIndex === 0 ? sortedContainers.length - 1 : currentIndex - 1;
-        const prevContainer = sortedContainers[prevIndex];
-        this.containerService.bringToFront(prevContainer.id);
-        console.log(`🔄 [FloatingContainerShortcuts] Cycled backwards to container: ${prevContainer.config.title}`);
-    }
-    hideAllContainers() {
-        const visibleContainers = this.containerService.visibleContainers();
-        visibleContainers.forEach(container => {
-            this.containerService.setZIndex(container.id, this.Z_INDEX_LAYERS.HIDDEN);
-        });
-        console.log(`👁️ [FloatingContainerShortcuts] All containers moved to hidden layer (z-index: ${this.Z_INDEX_LAYERS.HIDDEN})`);
-    }
-    focusFirstContainer() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0)
-            return;
-        const firstContainer = visibleContainers[0];
-        this.containerService.bringToFront(firstContainer.id);
-        console.log(`🎯 [FloatingContainerShortcuts] Focused on first container: ${firstContainer.config.title}`);
-    }
-    minimizeAllContainers() {
-        this.containerService.minimizeAll();
-        console.log(`📦 [FloatingContainerShortcuts] All containers minimized`);
-    }
-    focusContainerByIndex(index) {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0 || index >= visibleContainers.length) {
-            console.log(`⚠️ [FloatingContainerShortcuts] No container at index ${index}`);
-            return;
-        }
-        const container = visibleContainers[index];
-        this.containerService.bringToFront(container.id);
-        console.log(`🎯 [FloatingContainerShortcuts] Focused on container ${index + 1}: ${container.config.title}`);
-    }
-    openFileUploader() {
-        console.log(`📁 [FloatingContainerShortcuts] Opening file uploader...`);
-        // This would need to be implemented based on your file uploader service
-        // Example: this.fileUploaderService.show();
-    }
-    openEntityRightsSharing() {
-        console.log(`🔐 [FloatingContainerShortcuts] Opening entity rights sharing...`);
-        // This would need to be implemented based on your entity rights service
-        // Example: this.entityRightsService.show();
-    }
-    showAllContainers() {
-        const visibleContainers = this.containerService.visibleContainers();
-        visibleContainers.forEach((container, index) => {
-            // Give each container a slightly different z-index to maintain order
-            const zIndex = this.Z_INDEX_LAYERS.NORMAL + index;
-            this.containerService.setZIndex(container.id, zIndex);
-        });
-        console.log(`👁️ [FloatingContainerShortcuts] All containers moved to normal layer (z-index: ${this.Z_INDEX_LAYERS.NORMAL}+)`);
-    }
-    duplicateCurrentContainer() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0) {
-            console.log(`⚠️ [FloatingContainerShortcuts] No containers to duplicate`);
-            return;
-        }
-        const currentContainer = visibleContainers[0]; // Most recent container
-        console.log(`📋 [FloatingContainerShortcuts] Duplicating container: ${currentContainer.config.title}`);
-        // This would need to be implemented based on your container duplication logic
-    }
-    closeCurrentContainer() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0) {
-            console.log(`⚠️ [FloatingContainerShortcuts] No containers to close`);
-            return;
-        }
-        const currentContainer = visibleContainers[0]; // Most recent container
-        this.containerService.hide(currentContainer.id);
-        console.log(`❌ [FloatingContainerShortcuts] Closed container: ${currentContainer.config.title}`);
-    }
-    toggleContainerVisibility() {
-        const visibleContainers = this.containerService.visibleContainers();
-        if (visibleContainers.length === 0) {
-            console.log(`⚠️ [FloatingContainerShortcuts] No containers to toggle`);
-            return;
-        }
-        // Toggle visibility of the most recent container using z-index
-        const currentContainer = visibleContainers[0];
-        const currentZIndex = currentContainer.zIndex;
-        if (currentZIndex >= this.Z_INDEX_LAYERS.NORMAL) {
-            // Container is visible, move to hidden layer
-            this.containerService.setZIndex(currentContainer.id, this.Z_INDEX_LAYERS.HIDDEN);
-            console.log(`👁️ [FloatingContainerShortcuts] Hidden container (z-index: ${this.Z_INDEX_LAYERS.HIDDEN}): ${currentContainer.config.title}`);
-        }
-        else {
-            // Container is hidden, move to normal layer
-            this.containerService.setZIndex(currentContainer.id, this.Z_INDEX_LAYERS.NORMAL);
-            console.log(`👁️ [FloatingContainerShortcuts] Shown container (z-index: ${this.Z_INDEX_LAYERS.NORMAL}): ${currentContainer.config.title}`);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 /**
 <!-- Basic horizontal (left-right) layout -->
 <div class="panel-container">
@@ -11067,6 +10613,291 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
     CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
 });
 
+class FloatingContainerShortcutsService {
+    keyboardShortcutService = inject(KeyboardShortcutService);
+    containerService = inject(CideEleFloatingContainerService);
+    // Z-index layers for different container states
+    Z_INDEX_LAYERS = {
+        HIDDEN: 100, // Hidden containers (behind everything)
+        BACKGROUND: 1000, // Background containers
+        NORMAL: 2000, // Normal visible containers
+        FOCUSED: 3000, // Focused containers
+        MODAL: 4000, // Modal containers
+        TOOLTIP: 5000 // Tooltips and overlays
+    };
+    constructor() {
+        this.registerDefaultShortcuts();
+    }
+    /**
+     * Register default floating container shortcuts
+     */
+    registerDefaultShortcuts() {
+        console.log('🎯 [FloatingContainerShortcuts] Registering default shortcuts');
+        // Alt + 1, Alt + 2, etc. - Focus specific containers
+        this.registerNumberShortcuts();
+        // Alt + N - New container
+        this.keyboardShortcutService.register({
+            id: 'floating-container-new',
+            key: 'n',
+            altKey: true,
+            description: 'Create new floating container',
+            action: () => this.openNewContainer(),
+            preventDefault: true
+        });
+        // Alt + P - Previous container
+        this.keyboardShortcutService.register({
+            id: 'floating-container-previous',
+            key: 'p',
+            altKey: true,
+            description: 'Focus previous container',
+            action: () => this.focusPreviousContainer(),
+            preventDefault: true
+        });
+        // Alt + H - Hide all containers
+        this.keyboardShortcutService.register({
+            id: 'floating-container-hide-all',
+            key: 'h',
+            altKey: true,
+            description: 'Hide all containers',
+            action: () => this.hideAllContainers(),
+            preventDefault: true
+        });
+        // Alt + S - Show all containers
+        this.keyboardShortcutService.register({
+            id: 'floating-container-show-all',
+            key: 's',
+            altKey: true,
+            description: 'Show all containers',
+            action: () => this.showAllContainers(),
+            preventDefault: true
+        });
+        // Alt + M - Minimize all containers
+        this.keyboardShortcutService.register({
+            id: 'floating-container-minimize-all',
+            key: 'm',
+            altKey: true,
+            description: 'Minimize all containers',
+            action: () => this.minimizeAllContainers(),
+            preventDefault: true
+        });
+        // Alt + W - Close current container
+        this.keyboardShortcutService.register({
+            id: 'floating-container-close-current',
+            key: 'w',
+            altKey: true,
+            description: 'Close current container',
+            action: () => this.closeCurrentContainer(),
+            preventDefault: true
+        });
+        // Alt + D - Duplicate current container
+        this.keyboardShortcutService.register({
+            id: 'floating-container-duplicate',
+            key: 'd',
+            altKey: true,
+            description: 'Duplicate current container',
+            action: () => this.duplicateCurrentContainer(),
+            preventDefault: true
+        });
+        // Alt + T - Toggle container visibility
+        this.keyboardShortcutService.register({
+            id: 'floating-container-toggle-visibility',
+            key: 't',
+            altKey: true,
+            description: 'Toggle container visibility',
+            action: () => this.toggleContainerVisibility(),
+            preventDefault: true
+        });
+        // Alt + O - Open file uploader
+        this.keyboardShortcutService.register({
+            id: 'floating-container-open-file-uploader',
+            key: 'o',
+            altKey: true,
+            description: 'Open file uploader',
+            action: () => this.openFileUploader(),
+            preventDefault: true
+        });
+        // Alt + R - Open entity rights sharing
+        this.keyboardShortcutService.register({
+            id: 'floating-container-open-entity-rights',
+            key: 'r',
+            altKey: true,
+            description: 'Open entity rights sharing',
+            action: () => this.openEntityRightsSharing(),
+            preventDefault: true
+        });
+        console.log('✅ [FloatingContainerShortcuts] Default shortcuts registered');
+    }
+    /**
+     * Register number shortcuts (Alt + 1, Alt + 2, etc.)
+     */
+    registerNumberShortcuts() {
+        for (let i = 1; i <= 9; i++) {
+            this.keyboardShortcutService.register({
+                id: `floating-container-focus-${i}`,
+                key: i.toString(),
+                altKey: true,
+                description: `Focus container ${i}`,
+                action: () => this.focusContainerByIndex(i - 1),
+                preventDefault: true
+            });
+        }
+    }
+    /**
+     * Open new floating container
+     */
+    openNewContainer() {
+        console.log('🎯 [FloatingContainerShortcuts] Opening new container');
+        const containerId = this.containerService.show({
+            id: 'new-container-' + Date.now(),
+            title: 'New Container',
+            width: '400px',
+            height: '300px'
+        });
+        console.log('✅ [FloatingContainerShortcuts] New container created:', containerId);
+    }
+    /**
+     * Focus previous container
+     */
+    focusPreviousContainer() {
+        console.log('🎯 [FloatingContainerShortcuts] Focusing previous container');
+        const containers = this.containerService.visibleContainers();
+        if (containers.length > 0) {
+            // For now, just focus the last container
+            const previousIndex = containers.length - 1;
+            this.containerService.bringToFront(containers[previousIndex].id);
+        }
+    }
+    /**
+     * Hide all containers
+     */
+    hideAllContainers() {
+        console.log('🎯 [FloatingContainerShortcuts] Hiding all containers');
+        const containers = this.containerService.visibleContainers();
+        containers.forEach(container => {
+            this.containerService.setZIndex(container.id, this.Z_INDEX_LAYERS.HIDDEN);
+        });
+        console.log('✅ [FloatingContainerShortcuts] All containers hidden');
+    }
+    /**
+     * Show all containers
+     */
+    showAllContainers() {
+        console.log('🎯 [FloatingContainerShortcuts] Showing all containers');
+        const containers = this.containerService.visibleContainers();
+        containers.forEach((container, index) => {
+            this.containerService.setZIndex(container.id, this.Z_INDEX_LAYERS.NORMAL + index);
+        });
+        console.log('✅ [FloatingContainerShortcuts] All containers shown');
+    }
+    /**
+     * Minimize all containers
+     */
+    minimizeAllContainers() {
+        console.log('🎯 [FloatingContainerShortcuts] Minimizing all containers');
+        const containers = this.containerService.visibleContainers();
+        containers.forEach(container => {
+            // Implement minimize logic here
+            console.log('📦 [FloatingContainerShortcuts] Minimizing container:', container.id);
+        });
+        console.log('✅ [FloatingContainerShortcuts] All containers minimized');
+    }
+    /**
+     * Focus container by index
+     */
+    focusContainerByIndex(index) {
+        console.log('🎯 [FloatingContainerShortcuts] Focusing container at index:', index);
+        const containers = this.containerService.visibleContainers();
+        if (containers[index]) {
+            this.containerService.bringToFront(containers[index].id);
+            console.log('✅ [FloatingContainerShortcuts] Container focused:', containers[index].id);
+        }
+        else {
+            console.warn('⚠️ [FloatingContainerShortcuts] Container not found at index:', index);
+        }
+    }
+    /**
+     * Open file uploader
+     */
+    openFileUploader() {
+        console.log('🎯 [FloatingContainerShortcuts] Opening file uploader');
+        // Implement file uploader opening logic here
+        console.log('✅ [FloatingContainerShortcuts] File uploader opened');
+    }
+    /**
+     * Open entity rights sharing
+     */
+    openEntityRightsSharing() {
+        console.log('🎯 [FloatingContainerShortcuts] Opening entity rights sharing');
+        // Implement entity rights sharing opening logic here
+        console.log('✅ [FloatingContainerShortcuts] Entity rights sharing opened');
+    }
+    /**
+     * Duplicate current container
+     */
+    duplicateCurrentContainer() {
+        console.log('🎯 [FloatingContainerShortcuts] Duplicating current container');
+        const containers = this.containerService.visibleContainers();
+        if (containers.length > 0) {
+            const containerToDuplicate = containers[containers.length - 1]; // Use last container
+            const newContainerId = this.containerService.show({
+                id: 'duplicate-' + Date.now(),
+                title: `${containerToDuplicate.config.title} (Copy)`,
+                width: containerToDuplicate.config.width,
+                height: containerToDuplicate.config.height
+            });
+            console.log('✅ [FloatingContainerShortcuts] Container duplicated:', newContainerId);
+        }
+        else {
+            console.warn('⚠️ [FloatingContainerShortcuts] No container to duplicate');
+        }
+    }
+    /**
+     * Close current container
+     */
+    closeCurrentContainer() {
+        console.log('🎯 [FloatingContainerShortcuts] Closing current container');
+        const containers = this.containerService.visibleContainers();
+        if (containers.length > 0) {
+            const containerToClose = containers[containers.length - 1]; // Use last container
+            this.containerService.hide(containerToClose.id);
+            console.log('✅ [FloatingContainerShortcuts] Container closed:', containerToClose.id);
+        }
+        else {
+            console.warn('⚠️ [FloatingContainerShortcuts] No container to close');
+        }
+    }
+    /**
+     * Toggle container visibility
+     */
+    toggleContainerVisibility() {
+        console.log('🎯 [FloatingContainerShortcuts] Toggling container visibility');
+        const containers = this.containerService.visibleContainers();
+        if (containers.length > 0) {
+            const containerToToggle = containers[containers.length - 1]; // Use last container
+            const currentZIndex = this.containerService.getZIndexSignal(containerToToggle.id)();
+            if (currentZIndex === this.Z_INDEX_LAYERS.HIDDEN) {
+                this.containerService.setZIndex(containerToToggle.id, this.Z_INDEX_LAYERS.NORMAL);
+                console.log('✅ [FloatingContainerShortcuts] Container shown:', containerToToggle.id);
+            }
+            else {
+                this.containerService.setZIndex(containerToToggle.id, this.Z_INDEX_LAYERS.HIDDEN);
+                console.log('✅ [FloatingContainerShortcuts] Container hidden:', containerToToggle.id);
+            }
+        }
+        else {
+            console.warn('⚠️ [FloatingContainerShortcuts] No container to toggle');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FloatingContainerShortcutsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of cloud-ide-element
  * Here we can add what need to be exported from library