cloud-ide-layout 1.0.23 → 1.0.24

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-urOTUFvE.mjs → cloud-ide-layout-cloud-ide-layout-RD9NYgsO.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, computed, effect, Component, ElementRef, HostListener, ViewContainerRef, ViewChild, ViewChildren, InjectionToken, PLATFORM_ID } from '@angular/core';
+import { Injectable, inject, signal, computed, effect, Component, ElementRef, HostListener, ViewContainerRef, ViewChild, ViewChildren, InjectionToken, PLATFORM_ID, DestroyRef, Input, Directive } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, commonRoutesUrl, designConfigRoutesUrl } from 'cloud-ide-lms-model';
 import { Observable, throwError, of, BehaviorSubject, interval, take as take$1 } from 'rxjs';
@@ -13,6 +13,7 @@ import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/
 import { CloudIdeAuthService, authGuard } from 'cloud-ide-auth';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { merge } from 'lodash';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class CloudIdeLayoutService {
     constructor() { }
@@ -2651,8 +2652,8 @@ class CideLytSidedrawerWrapperComponent {
     }
     ngOnInit() {
         // Initialize the component map (You'd likely populate this from a config or service)
-        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-B4p_uGox.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-B-VlqH0O.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-GT7A-85i.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-B4u9LnTe.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -3024,7 +3025,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DtB5EqE3.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DEec7PZk.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -3281,6 +3282,550 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }] });
 
+class CideLytFloatingUploadService {
+    destroyRef = inject(DestroyRef);
+    // Private signals for state management
+    _uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "_uploadQueue" }] : []));
+    _isUploading = signal(false, ...(ngDevMode ? [{ debugName: "_isUploading" }] : []));
+    _uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "_uploadProgress" }] : []));
+    _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+    _currentUserId = signal('', ...(ngDevMode ? [{ debugName: "_currentUserId" }] : []));
+    // Public readonly signals
+    uploadQueue = this._uploadQueue.asReadonly();
+    isUploading = this._isUploading.asReadonly();
+    uploadProgress = this._uploadProgress.asReadonly();
+    isVisible = this._isVisible.asReadonly();
+    currentUserId = this._currentUserId.asReadonly();
+    // Computed values
+    hasUploads = computed(() => this._uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    pendingUploads = computed(() => this._uploadQueue().filter(upload => upload.status === 'pending'), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    activeUploads = computed(() => this._uploadQueue().filter(upload => upload.status === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
+    completedUploads = computed(() => this._uploadQueue().filter(upload => upload.status === 'completed'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => this._uploadQueue().filter(upload => upload.status === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
+    // BehaviorSubjects for external subscriptions
+    uploadQueueSubject = new BehaviorSubject([]);
+    isUploadingSubject = new BehaviorSubject(false);
+    uploadProgressSubject = new BehaviorSubject(0);
+    isVisibleSubject = new BehaviorSubject(false);
+    currentUserIdSubject = new BehaviorSubject('');
+    // Public observables
+    uploadQueue$ = this.uploadQueueSubject.asObservable();
+    isUploading$ = this.isUploadingSubject.asObservable();
+    uploadProgress$ = this.uploadProgressSubject.asObservable();
+    isVisible$ = this.isVisibleSubject.asObservable();
+    currentUserId$ = this.currentUserIdSubject.asObservable();
+    constructor() {
+        console.log('🚀 [FloatingUploadService] Service initialized');
+    }
+    /**
+     * Set the current user ID
+     */
+    setCurrentUserId(userId) {
+        console.log('👤 [FloatingUploadService] Setting user ID:', userId);
+        this._currentUserId.set(userId);
+        this.currentUserIdSubject.next(userId);
+    }
+    /**
+     * Add files to upload queue
+     */
+    addFilesToQueue(files) {
+        console.log('📁 [FloatingUploadService] Adding files to queue:', files.length);
+        const newUploads = files.map(file => ({
+            fileId: this.generateFileId(),
+            fileName: file.name,
+            progress: 0,
+            status: 'pending'
+        }));
+        const currentQueue = this._uploadQueue();
+        const updatedQueue = [...currentQueue, ...newUploads];
+        this._uploadQueue.set(updatedQueue);
+        this.uploadQueueSubject.next(updatedQueue);
+        this.updateVisibility();
+    }
+    /**
+     * Update upload status
+     */
+    updateUploadStatus(fileId, status, progress, error, uploadedFile) {
+        console.log('🔄 [FloatingUploadService] Updating upload status:', fileId, status, progress);
+        const currentQueue = this._uploadQueue();
+        const updatedQueue = currentQueue.map(upload => upload.fileId === fileId
+            ? { ...upload, status, progress, error, uploadedFile }
+            : upload);
+        this._uploadQueue.set(updatedQueue);
+        this.uploadQueueSubject.next(updatedQueue);
+        this.updateUploadingState();
+        this.updateVisibility();
+    }
+    /**
+     * Cancel upload
+     */
+    cancelUpload(fileId) {
+        console.log('🚫 [FloatingUploadService] Cancelling upload:', fileId);
+        this.updateUploadStatus(fileId, 'cancelled', 0);
+    }
+    /**
+     * Remove upload from queue
+     */
+    removeUpload(fileId) {
+        console.log('🗑️ [FloatingUploadService] Removing upload:', fileId);
+        const currentQueue = this._uploadQueue();
+        const updatedQueue = currentQueue.filter(upload => upload.fileId !== fileId);
+        this._uploadQueue.set(updatedQueue);
+        this.uploadQueueSubject.next(updatedQueue);
+        this.updateUploadingState();
+        this.updateVisibility();
+    }
+    /**
+     * Clear all uploads
+     */
+    clearAllUploads() {
+        console.log('🧹 [FloatingUploadService] Clearing all uploads');
+        this._uploadQueue.set([]);
+        this.uploadQueueSubject.next([]);
+        this._isUploading.set(false);
+        this.isUploadingSubject.next(false);
+        this._uploadProgress.set(0);
+        this.uploadProgressSubject.next(0);
+        this._isVisible.set(false);
+        this.isVisibleSubject.next(false);
+    }
+    /**
+     * Clear completed uploads
+     */
+    clearCompletedUploads() {
+        console.log('✅ [FloatingUploadService] Clearing completed uploads');
+        const currentQueue = this._uploadQueue();
+        const updatedQueue = currentQueue.filter(upload => upload.status !== 'completed');
+        this._uploadQueue.set(updatedQueue);
+        this.uploadQueueSubject.next(updatedQueue);
+        this.updateUploadingState();
+        this.updateVisibility();
+    }
+    /**
+     * Handle all uploads complete
+     */
+    handleAllUploadsComplete(event) {
+        console.log('🎉 [FloatingUploadService] All uploads complete:', event);
+        // Update all pending/uploading files to completed
+        const currentQueue = this._uploadQueue();
+        const updatedQueue = currentQueue.map(upload => {
+            if (upload.status === 'pending' || upload.status === 'uploading') {
+                return { ...upload, status: 'completed', progress: 100 };
+            }
+            return upload;
+        });
+        this._uploadQueue.set(updatedQueue);
+        this.uploadQueueSubject.next(updatedQueue);
+        this.updateUploadingState();
+    }
+    /**
+     * Show the floating uploader
+     */
+    show() {
+        console.log('👁️ [FloatingUploadService] Showing floating uploader');
+        this._isVisible.set(true);
+        this.isVisibleSubject.next(true);
+    }
+    /**
+     * Hide the floating uploader
+     */
+    hide() {
+        console.log('🙈 [FloatingUploadService] Hiding floating uploader');
+        this._isVisible.set(false);
+        this.isVisibleSubject.next(false);
+    }
+    /**
+     * Update uploading state based on queue
+     */
+    updateUploadingState() {
+        const activeUploads = this.activeUploads();
+        const isUploading = activeUploads.length > 0;
+        this._isUploading.set(isUploading);
+        this.isUploadingSubject.next(isUploading);
+        if (isUploading) {
+            const totalProgress = activeUploads.reduce((sum, upload) => sum + upload.progress, 0);
+            const averageProgress = Math.round(totalProgress / activeUploads.length);
+            this._uploadProgress.set(averageProgress);
+            this.uploadProgressSubject.next(averageProgress);
+        }
+        else {
+            this._uploadProgress.set(0);
+            this.uploadProgressSubject.next(0);
+        }
+    }
+    /**
+     * Update visibility based on upload state
+     */
+    updateVisibility() {
+        const hasActiveUploads = this.activeUploads().length > 0;
+        const hasPendingUploads = this.pendingUploads().length > 0;
+        const hasCompletedUploads = this.completedUploads().length > 0;
+        const hasFailedUploads = this.failedUploads().length > 0;
+        // Show if there are active, pending, or recent completed/failed uploads
+        const shouldShow = hasActiveUploads || hasPendingUploads || hasCompletedUploads || hasFailedUploads;
+        if (shouldShow && !this._isVisible()) {
+            this.show();
+        }
+        else if (!shouldShow && this._isVisible()) {
+            this.hide();
+        }
+    }
+    /**
+     * Generate unique file ID
+     */
+    generateFileId() {
+        return `upload_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Get upload by ID
+     */
+    getUploadById(fileId) {
+        return this._uploadQueue().find(upload => upload.fileId === fileId);
+    }
+    /**
+     * Get upload statistics
+     */
+    getUploadStats() {
+        const queue = this._uploadQueue();
+        return {
+            total: queue.length,
+            pending: queue.filter(u => u.status === 'pending').length,
+            uploading: queue.filter(u => u.status === 'uploading').length,
+            completed: queue.filter(u => u.status === 'completed').length,
+            failed: queue.filter(u => u.status === 'error').length,
+            cancelled: queue.filter(u => u.status === 'cancelled').length
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytFloatingFileUploaderComponent {
+    destroyRef = inject(DestroyRef);
+    floatingUploadService = inject(CideLytFloatingUploadService);
+    // Signals for reactive state
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    isMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
+    uploadQueue = signal([], ...(ngDevMode ? [{ debugName: "uploadQueue" }] : []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
+    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    currentUserId = signal('', ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    // Computed values
+    hasUploads = computed(() => this.uploadQueue().length > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    pendingUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'pending'), ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    activeUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'uploading'), ...(ngDevMode ? [{ debugName: "activeUploads" }] : []));
+    completedUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'completed'), ...(ngDevMode ? [{ debugName: "completedUploads" }] : []));
+    failedUploads = computed(() => this.uploadQueue().filter(upload => upload.status === 'error'), ...(ngDevMode ? [{ debugName: "failedUploads" }] : []));
+    // Animation states
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    constructor() {
+        console.log('🚀 [FloatingFileUploader] Component initialized');
+    }
+    ngOnInit() {
+        // Subscribe to upload service state changes
+        this.floatingUploadService.uploadQueue$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(queue => {
+            this.uploadQueue.set(queue);
+            this.updateVisibility();
+        });
+        this.floatingUploadService.isUploading$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(isUploading => {
+            this.isUploading.set(isUploading);
+        });
+        this.floatingUploadService.uploadProgress$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(progress => {
+            this.uploadProgress.set(progress);
+        });
+        this.floatingUploadService.isVisible$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(visible => {
+            this.isVisible.set(visible);
+        });
+        this.floatingUploadService.currentUserId$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(userId => {
+            this.currentUserId.set(userId);
+        });
+    }
+    ngOnDestroy() {
+        console.log('🧹 [FloatingFileUploader] Component destroyed');
+    }
+    /**
+     * Update visibility based on upload state
+     */
+    updateVisibility() {
+        const hasActiveUploads = this.activeUploads().length > 0;
+        const hasPendingUploads = this.pendingUploads().length > 0;
+        const hasCompletedUploads = this.completedUploads().length > 0;
+        const hasFailedUploads = this.failedUploads().length > 0;
+        // Show if there are active, pending, or recent completed/failed uploads
+        const shouldShow = hasActiveUploads || hasPendingUploads || hasCompletedUploads || hasFailedUploads;
+        if (shouldShow && !this.isVisible()) {
+            this.showWithAnimation();
+        }
+        else if (!shouldShow && this.isVisible()) {
+            this.hideWithAnimation();
+        }
+    }
+    /**
+     * Show with animation
+     */
+    showWithAnimation() {
+        this.isAnimating.set(true);
+        this.isVisible.set(true);
+        // Remove animation class after animation completes
+        setTimeout(() => {
+            this.isAnimating.set(false);
+        }, 300);
+    }
+    /**
+     * Hide with animation
+     */
+    hideWithAnimation() {
+        this.isAnimating.set(true);
+        // Wait for animation to complete before hiding
+        setTimeout(() => {
+            this.isVisible.set(false);
+            this.isAnimating.set(false);
+        }, 300);
+    }
+    /**
+     * Toggle minimize state
+     */
+    toggleMinimize() {
+        this.isMinimized.set(!this.isMinimized());
+    }
+    /**
+     * Close the floating uploader
+     */
+    close() {
+        this.floatingUploadService.clearAllUploads();
+        this.hideWithAnimation();
+    }
+    /**
+     * Handle file upload completion
+     */
+    onUploadComplete(event) {
+        console.log('✅ [FloatingFileUploader] Upload completed:', event);
+        this.floatingUploadService.updateUploadStatus(event.fileId, 'completed', 100, undefined, event.uploadedFile);
+    }
+    /**
+     * Handle upload error
+     */
+    onUploadError(event) {
+        console.error('❌ [FloatingFileUploader] Upload error:', event);
+        this.floatingUploadService.updateUploadStatus(event.fileId, 'error', 0, event.error);
+    }
+    /**
+     * Handle upload cancellation
+     */
+    onUploadCancelled(fileId) {
+        console.log('🚫 [FloatingFileUploader] Upload cancelled:', fileId);
+        this.floatingUploadService.cancelUpload(fileId);
+    }
+    /**
+     * Handle all uploads complete
+     */
+    onAllUploadsComplete(event) {
+        console.log('🎉 [FloatingFileUploader] All uploads complete:', event);
+        this.floatingUploadService.handleAllUploadsComplete(event);
+    }
+    /**
+     * Get status icon
+     */
+    getStatusIcon(status) {
+        switch (status) {
+            case 'pending': return 'schedule';
+            case 'uploading': return 'cloud_upload';
+            case 'completed': return 'check_circle';
+            case 'error': return 'error';
+            case 'cancelled': return 'cancel';
+            default: return 'help';
+        }
+    }
+    /**
+     * Get status class
+     */
+    getStatusClass(status) {
+        switch (status) {
+            case 'pending': return 'status-pending';
+            case 'uploading': return 'status-uploading';
+            case 'completed': return 'status-completed';
+            case 'error': return 'status-error';
+            case 'cancelled': return 'status-cancelled';
+            default: return 'status-unknown';
+        }
+    }
+    /**
+     * Get file size display
+     */
+    getFileSizeDisplay(size) {
+        if (size === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(size) / Math.log(k));
+        return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    /**
+     * Get overall progress percentage
+     */
+    getOverallProgress() {
+        const uploads = this.uploadQueue();
+        if (uploads.length === 0)
+            return 0;
+        const totalProgress = uploads.reduce((sum, upload) => sum + upload.progress, 0);
+        return Math.round(totalProgress / uploads.length);
+    }
+    /**
+     * Get upload summary text
+     */
+    getUploadSummary() {
+        const active = this.activeUploads().length;
+        const completed = this.completedUploads().length;
+        const failed = this.failedUploads().length;
+        const pending = this.pendingUploads().length;
+        if (active > 0) {
+            return `${active} uploading`;
+        }
+        else if (completed > 0 && failed === 0) {
+            return `${completed} completed`;
+        }
+        else if (failed > 0) {
+            return `${completed} completed, ${failed} failed`;
+        }
+        else if (pending > 0) {
+            return `${pending} pending`;
+        }
+        return 'No uploads';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytFloatingFileUploaderComponent, isStandalone: true, selector: "cide-layout-floating-file-uploader", ngImport: i0, template: "<!-- Floating File Uploader Container -->\n@if (isVisible()) {\n<div class=\"floating-uploader\" \n     [class.minimized]=\"isMinimized()\" \n     [class.animating]=\"isAnimating()\"\n     [class.uploading]=\"isUploading()\">\n\n  <!-- Header -->\n  <div class=\"uploader-header\">\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    <!-- Overall Progress Bar -->\n    @if (isUploading()) {\n    <div class=\"overall-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\n      </div>\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\n    </div>\n    }\n\n    <!-- Upload Queue -->\n    @if (hasUploads()) {\n    <div class=\"upload-queue\">\n      @for (upload of uploadQueue(); track upload.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\n        \n        <!-- File Info -->\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ upload.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (upload.status) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('completed') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\n              }\n              @case ('cancelled') {\n              <span class=\"text-gray-600\">Cancelled</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (for uploading files) -->\n        @if (upload.status === 'uploading') {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\n          </div>\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (upload.status) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"onUploadCancelled(upload.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)=\"onUploadCancelled(upload.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('completed') {\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    }\n\n    <!-- Hidden file input for drag & drop -->\n    <div class=\"hidden-uploader\">\n      <input type=\"file\" multiple style=\"display: none;\" id=\"floating-file-input\">\n    </div>\n  </div>\n  }\n\n  <!-- Footer (always visible) -->\n  <div class=\"uploader-footer\">\n    <div class=\"footer-stats\">\n      @if (activeUploads().length > 0) {\n      <span class=\"stat uploading\">\n        <cide-ele-icon size=\"xs\">cloud_upload</cide-ele-icon>\n        {{ activeUploads().length }} uploading\n      </span>\n      }\n      @if (completedUploads().length > 0) {\n      <span class=\"stat completed\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        {{ completedUploads().length }} completed\n      </span>\n      }\n      @if (failedUploads().length > 0) {\n      <span class=\"stat failed\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        {{ failedUploads().length }} failed\n      </span>\n      }\n    </div>\n  </div>\n</div>\n}\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;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 .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 .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.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 .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 .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.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)}\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: CideLytFloatingFileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-layout-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     [class.uploading]=\"isUploading()\">\n\n  <!-- Header -->\n  <div class=\"uploader-header\">\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    <!-- Overall Progress Bar -->\n    @if (isUploading()) {\n    <div class=\"overall-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" [style.width.%]=\"getOverallProgress()\"></div>\n      </div>\n      <div class=\"progress-text\">{{ getOverallProgress() }}%</div>\n    </div>\n    }\n\n    <!-- Upload Queue -->\n    @if (hasUploads()) {\n    <div class=\"upload-queue\">\n      @for (upload of uploadQueue(); track upload.fileId) {\n      <div class=\"upload-item\" [class]=\"getStatusClass(upload.status)\">\n        \n        <!-- File Info -->\n        <div class=\"file-info\">\n          <cide-ele-icon class=\"status-icon\" size=\"xs\">{{ getStatusIcon(upload.status) }}</cide-ele-icon>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ upload.fileName }}</div>\n            <div class=\"file-status\">\n              @switch (upload.status) {\n              @case ('pending') {\n              <span class=\"text-yellow-600\">Waiting...</span>\n              }\n              @case ('uploading') {\n              <span class=\"text-blue-600\">Uploading...</span>\n              }\n              @case ('completed') {\n              <span class=\"text-green-600\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"text-red-600\">{{ upload.error || 'Failed' }}</span>\n              }\n              @case ('cancelled') {\n              <span class=\"text-gray-600\">Cancelled</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (for uploading files) -->\n        @if (upload.status === 'uploading') {\n        <div class=\"file-progress\">\n          <div class=\"progress-bar\">\n            <div class=\"progress-fill\" [style.width.%]=\"upload.progress\"></div>\n          </div>\n          <span class=\"progress-text\">{{ upload.progress }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"upload-actions\">\n          @switch (upload.status) {\n          @case ('pending') {\n          <button class=\"action-btn cancel-btn\" (click)=\"onUploadCancelled(upload.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)=\"onUploadCancelled(upload.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('completed') {\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    }\n\n    <!-- Hidden file input for drag & drop -->\n    <div class=\"hidden-uploader\">\n      <input type=\"file\" multiple style=\"display: none;\" id=\"floating-file-input\">\n    </div>\n  </div>\n  }\n\n  <!-- Footer (always visible) -->\n  <div class=\"uploader-footer\">\n    <div class=\"footer-stats\">\n      @if (activeUploads().length > 0) {\n      <span class=\"stat uploading\">\n        <cide-ele-icon size=\"xs\">cloud_upload</cide-ele-icon>\n        {{ activeUploads().length }} uploading\n      </span>\n      }\n      @if (completedUploads().length > 0) {\n      <span class=\"stat completed\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        {{ completedUploads().length }} completed\n      </span>\n      }\n      @if (failedUploads().length > 0) {\n      <span class=\"stat failed\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        {{ failedUploads().length }} failed\n      </span>\n      }\n    </div>\n  </div>\n</div>\n}\n", styles: [".floating-uploader{position:fixed;bottom:20px;right:20px;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 .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 .overall-progress{padding:12px 16px;border-bottom:1px solid #e2e8f0}.floating-uploader .uploader-content .overall-progress .progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin-bottom:4px}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{height:100%;background:#3b82f6;transition:width .3s ease}.floating-uploader .uploader-content .overall-progress .progress-text{font-size:12px;color:#64748b;text-align:center;display:block}.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 .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 .overall-progress{border-bottom-color:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar{background:#475569}.floating-uploader .uploader-content .overall-progress .progress-bar .progress-fill{background:#3b82f6}.floating-uploader .uploader-content .overall-progress .progress-text{color:#94a3b8}.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)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CideLytLayoutWithFloatingUploaderComponent {
+    destroyRef = inject(DestroyRef);
+    floatingUploadService = inject(CideLytFloatingUploadService);
+    // Signals for reactive state
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    uploadCount = signal(0, ...(ngDevMode ? [{ debugName: "uploadCount" }] : []));
+    // Computed values
+    hasUploads = computed(() => this.uploadCount() > 0, ...(ngDevMode ? [{ debugName: "hasUploads" }] : []));
+    constructor() {
+        console.log('🚀 [LayoutWithFloatingUploader] Component initialized');
+    }
+    ngOnInit() {
+        // Subscribe to floating upload service state
+        this.floatingUploadService.isVisible$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(visible => {
+            this.isVisible.set(visible);
+        });
+        this.floatingUploadService.uploadQueue$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(queue => {
+            this.uploadCount.set(queue.length);
+        });
+    }
+    ngOnDestroy() {
+        console.log('🧹 [LayoutWithFloatingUploader] Component destroyed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWithFloatingUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytLayoutWithFloatingUploaderComponent, isStandalone: true, selector: "cide-layout-with-floating-uploader", ngImport: i0, template: "<!-- Layout with Floating Uploader -->\r\n<div class=\"layout-container\">\r\n  <!-- Main Content Slot -->\r\n  <ng-content></ng-content>\r\n  \r\n  <!-- Floating File Uploader -->\r\n  <cide-layout-floating-file-uploader></cide-layout-floating-file-uploader>\r\n</div>\r\n\r\n", styles: [".layout-container{position:relative;width:100%;height:100%;min-height:100vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideLytFloatingFileUploaderComponent, selector: "cide-layout-floating-file-uploader" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWithFloatingUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-layout-with-floating-uploader', standalone: true, imports: [
+                        CommonModule,
+                        CideLytFloatingFileUploaderComponent
+                    ], template: "<!-- Layout with Floating Uploader -->\r\n<div class=\"layout-container\">\r\n  <!-- Main Content Slot -->\r\n  <ng-content></ng-content>\r\n  \r\n  <!-- Floating File Uploader -->\r\n  <cide-layout-floating-file-uploader></cide-layout-floating-file-uploader>\r\n</div>\r\n\r\n", styles: [".layout-container{position:relative;width:100%;height:100%;min-height:100vh}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CideLytFloatingUploadTriggerDirective {
+    elementRef = inject(ElementRef);
+    floatingUploadService = inject(CideLytFloatingUploadService);
+    userId = '';
+    constructor() {
+        console.log('🎯 [FloatingUploadTrigger] Directive initialized');
+    }
+    onFileChange(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files && files.length > 0) {
+            console.log('📁 [FloatingUploadTrigger] Files selected:', files.length);
+            // Set user ID if provided
+            if (this.userId) {
+                this.floatingUploadService.setCurrentUserId(this.userId);
+            }
+            // Add files to floating uploader queue
+            this.floatingUploadService.addFilesToQueue(Array.from(files));
+            // Reset the input to allow selecting the same files again
+            input.value = '';
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            console.log('📁 [FloatingUploadTrigger] Files dropped:', files.length);
+            // Set user ID if provided
+            if (this.userId) {
+                this.floatingUploadService.setCurrentUserId(this.userId);
+            }
+            // Add files to floating uploader queue
+            this.floatingUploadService.addFilesToQueue(Array.from(files));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingUploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFloatingUploadTriggerDirective, isStandalone: true, selector: "[cideFloatingUploadTrigger]", inputs: { userId: "userId" }, host: { listeners: { "change": "onFileChange($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingUploadTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cideFloatingUploadTrigger]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { userId: [{
+                type: Input
+            }], onFileChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of cloud-ide-layout
  */
@@ -3289,5 +3834,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, CloudIdeLayoutService as e, CloudIdeLayoutComponent as f, CideLytSharedService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, AppStateService as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, processThemeVariable as p, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-urOTUFvE.mjs.map
+export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, CloudIdeLayoutService as e, CloudIdeLayoutComponent as f, CideLytSharedService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, AppStateService as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingFileUploaderComponent as o, processThemeVariable as p, CideLytLayoutWithFloatingUploaderComponent as q, CideLytFloatingUploadService as r, setCSSVariable as s, themeFactory as t, CideLytFloatingUploadTriggerDirective as u };
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-RD9NYgsO.mjs.map