npm - cloud-ide-element - Versions diffs - 1.0.120 → 1.0.121 - Mend

cloud-ide-element 1.0.120 → 1.0.121

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/cloud-ide-element.mjs +298 -474
package/fesm2022/cloud-ide-element.mjs.map +1 -1
package/index.d.ts +76 -141
package/package.json +1 -1

package/fesm2022/cloud-ide-element.mjs CHANGED Viewed

@@ -5015,6 +5015,16 @@ 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 removed - handled by floating container
@@ -5409,14 +5419,14 @@ class CideEleFloatingFileUploaderComponent {
         });
     }
     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: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"file-uploader-content\">\n    <!-- Simple header without window controls (floating container handles these) -->\n    <div class=\"uploader-header\">\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  <!-- Content -->\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</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: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"file-uploader-content\">\n    <!-- Simple header without window controls (floating container handles these) -->\n    <div class=\"uploader-header\">\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  <!-- Content -->\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</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
             }] } });
@@ -5767,477 +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: () => [] });
-class AppShortcutService {
-    keyboardShortcutService = inject(KeyboardShortcutService);
-    registeredShortcuts = new Map();
-    /**
-     * Register shortcuts from app component
-     * @param shortcuts Array of shortcut configurations
-     */
-    registerShortcuts(shortcuts) {
-        console.log('🎯 [AppShortcut] Registering app shortcuts:', shortcuts.length);
-        shortcuts.forEach(config => {
-            const shortcutId = `app-${config.eventName}`;
-            // Convert AppShortcutConfig to KeyboardShortcut format
-            this.keyboardShortcutService.register({
-                id: shortcutId,
-                key: config.key,
-                ctrlKey: config.ctrlKey,
-                altKey: config.altKey,
-                shiftKey: config.shiftKey,
-                metaKey: config.metaKey,
-                description: config.description,
-                action: () => {
-                    console.log(`🎯 [AppShortcut] Executing app shortcut: ${config.eventName}`);
-                    this.executeAppEvent(config.eventName);
-                },
-                preventDefault: config.preventDefault !== false,
-                stopPropagation: config.stopPropagation || false
-            });
-            // Store the configuration
-            this.registeredShortcuts.set(shortcutId, config);
-            console.log(`✅ [AppShortcut] Registered shortcut: ${shortcutId} (${this.getKeyDescription(config)})`);
-        });
-    }
-    /**
-     * Unregister shortcuts by event names
-     * @param eventNames Array of event names to unregister
-     */
-    unregisterShortcuts(eventNames) {
-        console.log('🗑️ [AppShortcut] Unregistering app shortcuts:', eventNames);
-        eventNames.forEach(eventName => {
-            const shortcutId = `app-${eventName}`;
-            if (this.registeredShortcuts.has(shortcutId)) {
-                this.keyboardShortcutService.unregister(shortcutId);
-                this.registeredShortcuts.delete(shortcutId);
-                console.log(`✅ [AppShortcut] Unregistered shortcut: ${shortcutId}`);
-            }
-            else {
-                console.warn(`⚠️ [AppShortcut] Shortcut not found: ${shortcutId}`);
-            }
-        });
-    }
-    /**
-     * Get all registered app shortcuts
-     */
-    getRegisteredShortcuts() {
-        return Array.from(this.registeredShortcuts.values());
-    }
-    /**
-     * Check if a shortcut is registered
-     * @param eventName Event name to check
-     */
-    isShortcutRegistered(eventName) {
-        const shortcutId = `app-${eventName}`;
-        return this.registeredShortcuts.has(shortcutId);
-    }
-    /**
-     * Update an existing shortcut
-     * @param eventName Event name to update
-     * @param newConfig New shortcut configuration
-     */
-    updateShortcut(eventName, newConfig) {
-        const shortcutId = `app-${eventName}`;
-        if (this.registeredShortcuts.has(shortcutId)) {
-            // Unregister old shortcut
-            this.keyboardShortcutService.unregister(shortcutId);
-            // Register new shortcut
-            this.keyboardShortcutService.register({
-                id: shortcutId,
-                key: newConfig.key,
-                ctrlKey: newConfig.ctrlKey,
-                altKey: newConfig.altKey,
-                shiftKey: newConfig.shiftKey,
-                metaKey: newConfig.metaKey,
-                description: newConfig.description,
-                action: () => {
-                    console.log(`🎯 [AppShortcut] Executing updated app shortcut: ${eventName}`);
-                    this.executeAppEvent(eventName);
-                },
-                preventDefault: newConfig.preventDefault !== false,
-                stopPropagation: newConfig.stopPropagation || false
-            });
-            // Update stored configuration
-            this.registeredShortcuts.set(shortcutId, newConfig);
-            console.log(`🔄 [AppShortcut] Updated shortcut: ${shortcutId}`);
-        }
-        else {
-            console.warn(`⚠️ [AppShortcut] Shortcut not found for update: ${shortcutId}`);
-        }
-    }
-    /**
-     * Clear all app shortcuts
-     */
-    clearAllShortcuts() {
-        console.log('🧹 [AppShortcut] Clearing all app shortcuts');
-        const shortcutIds = Array.from(this.registeredShortcuts.keys());
-        shortcutIds.forEach(shortcutId => {
-            this.keyboardShortcutService.unregister(shortcutId);
-        });
-        this.registeredShortcuts.clear();
-        console.log('✅ [AppShortcut] All app shortcuts cleared');
-    }
-    /**
-     * Get shortcut information for help/documentation
-     */
-    getShortcutHelp() {
-        return Array.from(this.registeredShortcuts.values()).map(config => ({
-            eventName: config.eventName,
-            description: config.description,
-            keys: this.getKeyDescription(config)
-        }));
-    }
-    /**
-     * Execute app event (this would be implemented by the app component)
-     * @param eventName Name of the event to execute
-     */
-    executeAppEvent(eventName) {
-        // This method should be overridden by the app component
-        // or connected to an event emitter system
-        console.log(`🎯 [AppShortcut] Executing app event: ${eventName}`);
-        // Emit custom event that the app component can listen to
-        const customEvent = new CustomEvent('app-shortcut-triggered', {
-            detail: { eventName }
-        });
-        window.dispatchEvent(customEvent);
-    }
-    /**
-     * Get human-readable key description
-     */
-    getKeyDescription(config) {
-        const modifiers = [];
-        if (config.ctrlKey)
-            modifiers.push('Ctrl');
-        if (config.altKey)
-            modifiers.push('Alt');
-        if (config.shiftKey)
-            modifiers.push('Shift');
-        if (config.metaKey)
-            modifiers.push('Meta');
-        return [...modifiers, config.key].join(' + ');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppShortcutService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppShortcutService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
 /**
 <!-- Basic horizontal (left-right) layout -->
 <div class="panel-container">
@@ -11074,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
@@ -11083,5 +10907,5 @@ var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
-export { AppShortcutService, CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
+export { CideCoreFileManagerService, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map