cloud-ide-element 1.0.12 → 1.0.14

package/fesm2022/cloud-ide-element.mjs

@@ -1482,12 +1482,12 @@ class CideEleButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, deps: [{ token: CideElementsService }, { token: i2$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-justify-around tw-flex" }, usesOnChanges: true, ngImport: i0, template: "<!-- Button content container -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n    <span class=\"tw-icon-container tw-mr-2\">\r\n      <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n    <cide-ele-spinner\r\n      class=\"tw-inline-block tw-my-1 tw-mr-2\" \r\n      size=\"xs\"\r\n      [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\">\r\n    </cide-ele-spinner>\r\n  }\r\n  \r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n    <span>{{ label }}</span>\r\n  } @else {\r\n    <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n    <span class=\"tw-icon-container tw-ml-2\">\r\n      <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n    <span class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n  }\r\n</div>\r\n", styles: [":host{position:relative;background-color:var(--cide-theme-color-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-theme-color-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.75rem;padding:.2rem .4rem}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-theme-secondary-color, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-theme-secondary-color-hover, #374151)}:host.success{background-color:var(--cide-theme-success-color, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-theme-success-color-hover, #059669)}:host.danger{background-color:var(--cide-theme-danger-color, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-theme-danger-color-hover, #dc2626)}:host.warning{background-color:var(--cide-theme-warning-color, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-theme-warning-color-hover, #d97706)}:host.info{background-color:var(--cide-theme-info-color, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-theme-info-color-hover, #2563eb)}:host.outline{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:1px solid var(--cide-theme-color-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-theme-secondary-color, #4b5563);border-color:var(--cide-theme-secondary-color, #4b5563)}:host.outline.success{color:var(--cide-theme-success-color, #10b981);border-color:var(--cide-theme-success-color, #10b981)}:host.outline.danger{color:var(--cide-theme-danger-color, #ef4444);border-color:var(--cide-theme-danger-color, #ef4444)}:host.outline.warning{color:var(--cide-theme-warning-color, #f59e0b);border-color:var(--cide-theme-warning-color, #f59e0b)}:host.outline.info{color:var(--cide-theme-info-color, #3b82f6);border-color:var(--cide-theme-info-color, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.text.success{color:var(--cide-theme-success-color, #10b981)}:host.text.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.text.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.text.info{color:var(--cide-theme-info-color, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-theme-color-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.link.success{color:var(--cide-theme-success-color, #10b981)}:host.link.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.link.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.link.info{color:var(--cide-theme-info-color, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "<!-- Button content container -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n  <!-- Left icon -->\r\n  @if (leftIcon) {\r\n    <span class=\"tw-icon-container tw-mr-2\">\r\n      <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Loading spinner -->\r\n  @if (loading) {\r\n    <cide-ele-spinner\r\n      class=\"tw-inline-block tw-my-1 tw-mr-2\" \r\n      size=\"xs\"\r\n      [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\">\r\n    </cide-ele-spinner>\r\n  }\r\n  \r\n  <!-- Button label or content -->\r\n  @if (label) {\r\n    <span>{{ label }}</span>\r\n  } @else {\r\n    <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Right icon -->\r\n  @if (rightIcon) {\r\n    <span class=\"tw-icon-container tw-ml-2\">\r\n      <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n    </span>\r\n  }\r\n  \r\n  <!-- Spacer for spinner when loading to maintain button width -->\r\n  @if (loading) {\r\n    <span class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n  }\r\n</div>\r\n", styles: [":host{position:relative;background-color:var(--cide-theme-color-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-theme-color-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.75rem;padding:.2rem .4rem}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-theme-secondary-color, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-theme-secondary-color-hover, #374151)}:host.success{background-color:var(--cide-theme-success-color, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-theme-success-color-hover, #059669)}:host.danger{background-color:var(--cide-theme-danger-color, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-theme-danger-color-hover, #dc2626)}:host.warning{background-color:var(--cide-theme-warning-color, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-theme-warning-color-hover, #d97706)}:host.info{background-color:var(--cide-theme-info-color, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-theme-info-color-hover, #2563eb)}:host.outline{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:1px solid var(--cide-theme-color-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-theme-secondary-color, #4b5563);border-color:var(--cide-theme-secondary-color, #4b5563)}:host.outline.success{color:var(--cide-theme-success-color, #10b981);border-color:var(--cide-theme-success-color, #10b981)}:host.outline.danger{color:var(--cide-theme-danger-color, #ef4444);border-color:var(--cide-theme-danger-color, #ef4444)}:host.outline.warning{color:var(--cide-theme-warning-color, #f59e0b);border-color:var(--cide-theme-warning-color, #f59e0b)}:host.outline.info{color:var(--cide-theme-info-color, #3b82f6);border-color:var(--cide-theme-info-color, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.text.success{color:var(--cide-theme-success-color, #10b981)}:host.text.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.text.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.text.info{color:var(--cide-theme-info-color, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-theme-color-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.link.success{color:var(--cide-theme-success-color, #10b981)}:host.link.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.link.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.link.info{color:var(--cide-theme-info-color, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[cideEleButton], a[cideEleButton]', standalone: true, imports: [CommonModule, CideSpinnerComponent], host: {
-                        'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-justify-around tw-flex',
+                        'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center',
                         '[class.cide-button-disabled]': 'disabled || loading',
                         '[attr.disabled]': '(disabled || loading) ? true : null',
                         '[class.primary]': 'variant === "primary"',
@@ -3375,841 +3375,361 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class KeyboardShortcutService {
-    shortcuts = new Map();
-    overrides = new Map();
-    keydownListener;
-    constructor() {
-        this.setupGlobalListener();
+class CideEleFloatingContainerService {
+    injector;
+    containers = signal(new Map(), ...(ngDevMode ? [{ debugName: "containers" }] : []));
+    nextZIndex = signal(1000, ...(ngDevMode ? [{ debugName: "nextZIndex" }] : []));
+    instanceCounter = signal(0, ...(ngDevMode ? [{ debugName: "instanceCounter" }] : []));
+    // Dynamic component management
+    componentRegistry = new Map();
+    activeComponents = new Map();
+    constructor(injector) {
+        this.injector = injector;
+        // Keyboard shortcuts are registered by FloatingContainerShortcutsService independently
     }
-    ngOnDestroy() {
-        this.removeGlobalListener();
+    // Computed properties
+    visibleContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isVisible), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
+    minimizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMinimized), ...(ngDevMode ? [{ debugName: "minimizedContainers" }] : []));
+    maximizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMaximized), ...(ngDevMode ? [{ debugName: "maximizedContainers" }] : []));
+    // Container management methods
+    show(config) {
+        const containerId = config.id || this.generateId();
+        const instanceId = this.generateInstanceId(config.componentId || 'default');
+        // Get the highest z-index and add 1 to bring new container to front
+        const maxZIndex = this.getMaxZIndex();
+        const zIndex = maxZIndex + 1;
+        const now = new Date();
+        const container = {
+            id: containerId,
+            config: { ...config, id: containerId },
+            isVisible: true,
+            isMinimized: false,
+            isMaximized: false,
+            zIndex,
+            instanceId,
+            componentType: config.componentId || 'default',
+            createdAt: now,
+            lastAccessed: now
+        };
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            newContainers.set(containerId, container);
+            return newContainers;
+        });
+        this.nextZIndex.update(z => z + 1);
+        return containerId;
     }
-    /**
-     * Register a new keyboard shortcut
-     */
-    register(shortcut) {
-        this.shortcuts.set(shortcut.id, shortcut);
-        console.log(`⌨️ [KeyboardShortcut] Registered shortcut: ${shortcut.id} (${this.getKeyDescription(shortcut)})`);
+    hide(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isVisible = false;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
     }
     /**
-     * Override an existing shortcut with new key combination
+     * Get the maximum z-index among all visible containers
      */
-    override(shortcutId, newKey, options) {
-        const originalShortcut = this.shortcuts.get(shortcutId);
-        if (!originalShortcut) {
-            console.warn(`⚠️ [KeyboardShortcut] Cannot override shortcut '${shortcutId}' - not found`);
-            return;
+    getMaxZIndex() {
+        const containers = this.containers();
+        let maxZIndex = 1000; // Base z-index
+        for (const container of containers.values()) {
+            if (container.isVisible && container.zIndex > maxZIndex) {
+                maxZIndex = container.zIndex;
+            }
         }
-        const override = {
-            shortcutId,
-            newKey,
-            newCtrlKey: options?.ctrlKey,
-            newAltKey: options?.altKey,
-            newShiftKey: options?.shiftKey,
-            newMetaKey: options?.metaKey
-        };
-        this.overrides.set(shortcutId, override);
-        console.log(`🔄 [KeyboardShortcut] Override registered for '${shortcutId}': ${this.getKeyDescription({ ...originalShortcut, ...options, key: newKey })}`);
-    }
-    /**
-     * Remove a shortcut
-     */
-    unregister(shortcutId) {
-        this.shortcuts.delete(shortcutId);
-        this.overrides.delete(shortcutId);
-        console.log(`🗑️ [KeyboardShortcut] Removed shortcut: ${shortcutId}`);
+        return maxZIndex;
     }
     /**
-     * Remove override for a shortcut (restore original key combination)
+     * Bring a container to the front (highest z-index)
      */
-    removeOverride(shortcutId) {
-        this.overrides.delete(shortcutId);
-        console.log(`🔄 [KeyboardShortcut] Override removed for: ${shortcutId}`);
+    bringToFront(containerId) {
+        const maxZIndex = this.getMaxZIndex();
+        const newZIndex = maxZIndex + 1;
+        console.log(`🎯 [FloatingContainer] Bringing container '${containerId}' to front`);
+        console.log(`🎯 [FloatingContainer] Current max z-index: ${maxZIndex}, new z-index: ${newZIndex}`);
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                const oldZIndex = container.zIndex;
+                container.zIndex = newZIndex;
+                container.lastAccessed = new Date();
+                newContainers.set(containerId, container);
+                console.log(`🎯 [FloatingContainer] Container '${containerId}' z-index updated: ${oldZIndex} → ${newZIndex}`);
+            }
+            else {
+                console.warn(`⚠️ [FloatingContainer] Container '${containerId}' not found!`);
+            }
+            return newContainers;
+        });
     }
-    /**
-     * Get all registered shortcuts
-     */
-    getAllShortcuts() {
-        return Array.from(this.shortcuts.values());
+    minimize(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isMinimized = !container.isMinimized;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
     }
-    /**
-     * Get shortcuts by category or filter
-     */
-    getShortcuts(filter) {
-        const shortcuts = this.getAllShortcuts();
-        return filter ? shortcuts.filter(filter) : shortcuts;
+    maximize(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.isMaximized = !container.isMaximized;
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
+        });
     }
-    /**
-     * Check if a shortcut is registered
-     */
-    hasShortcut(shortcutId) {
-        return this.shortcuts.has(shortcutId);
+    getContainer(containerId) {
+        return this.containers().get(containerId);
     }
-    /**
-     * Get shortcut information
-     */
-    getShortcut(shortcutId) {
-        return this.shortcuts.get(shortcutId);
+    isVisible(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isVisible : false;
     }
-    /**
-     * Clear all shortcuts
-     */
-    clearAll() {
-        this.shortcuts.clear();
-        this.overrides.clear();
-        console.log(`🧹 [KeyboardShortcut] All shortcuts cleared`);
+    isMinimized(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isMinimized : false;
     }
-    /**
-     * Set up global keyboard listener
-     */
-    setupGlobalListener() {
-        this.keydownListener = (event) => {
-            this.handleKeydown(event);
-        };
-        document.addEventListener('keydown', this.keydownListener);
-        console.log(`🎧 [KeyboardShortcut] Global keyboard listener attached`);
+    isMaximized(containerId) {
+        const container = this.getContainer(containerId);
+        return container ? container.isMaximized : false;
     }
-    /**
-     * Remove global keyboard listener
-     */
-    removeGlobalListener() {
-        if (this.keydownListener) {
-            document.removeEventListener('keydown', this.keydownListener);
-            this.keydownListener = undefined;
-            console.log(`🎧 [KeyboardShortcut] Global keyboard listener removed`);
-        }
+    hideAll() {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            for (const [id, container] of newContainers) {
+                container.isVisible = false;
+                newContainers.set(id, container);
+            }
+            return newContainers;
+        });
     }
-    /**
-     * Handle keydown events
-     */
-    handleKeydown(event) {
-        for (const [shortcutId, shortcut] of this.shortcuts) {
-            if (this.matchesShortcut(event, shortcut)) {
-                // Check for override
-                const override = this.overrides.get(shortcutId);
-                if (override && !this.matchesOverride(event, override)) {
-                    continue; // Skip if override doesn't match
-                }
-                if (shortcut.preventDefault !== false) {
-                    event.preventDefault();
-                }
-                if (shortcut.stopPropagation) {
-                    event.stopPropagation();
+    minimizeAll() {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            for (const [id, container] of newContainers) {
+                if (container.isVisible) {
+                    container.isMinimized = true;
+                    newContainers.set(id, container);
                 }
-                console.log(`⌨️ [KeyboardShortcut] Executing shortcut: ${shortcutId}`);
-                shortcut.action();
-                break; // Only execute one shortcut per keydown
             }
-        }
+            return newContainers;
+        });
     }
-    /**
-     * Check if event matches shortcut
-     */
-    matchesShortcut(event, shortcut) {
-        return event.key === shortcut.key &&
-            (shortcut.ctrlKey === undefined || event.ctrlKey === shortcut.ctrlKey) &&
-            (shortcut.altKey === undefined || event.altKey === shortcut.altKey) &&
-            (shortcut.shiftKey === undefined || event.shiftKey === shortcut.shiftKey) &&
-            (shortcut.metaKey === undefined || event.metaKey === shortcut.metaKey);
+    generateId() {
+        return `floating-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     }
-    /**
-     * Check if event matches override
-     */
-    matchesOverride(event, override) {
-        return event.key === override.newKey &&
-            (override.newCtrlKey === undefined || event.ctrlKey === override.newCtrlKey) &&
-            (override.newAltKey === undefined || event.altKey === override.newAltKey) &&
-            (override.newShiftKey === undefined || event.shiftKey === override.newShiftKey) &&
-            (override.newMetaKey === undefined || event.metaKey === override.newMetaKey);
+    generateInstanceId(componentType) {
+        const counter = this.instanceCounter() + 1;
+        this.instanceCounter.update(c => c + 1);
+        return `${componentType}-instance-${counter}-${Date.now()}`;
     }
-    /**
-     * Get human-readable key description
-     */
-    getKeyDescription(shortcut) {
-        const modifiers = [];
-        if (shortcut.ctrlKey)
-            modifiers.push('Ctrl');
-        if (shortcut.altKey)
-            modifiers.push('Alt');
-        if (shortcut.shiftKey)
-            modifiers.push('Shift');
-        if (shortcut.metaKey)
-            modifiers.push('Meta');
-        return [...modifiers, shortcut.key].join(' + ');
+    // Multiple instance management methods
+    getInstancesByComponentType(componentType) {
+        return Array.from(this.containers().values())
+            .filter(container => container.componentType === componentType);
     }
-    /**
-     * Get key description for a shortcut ID
-     */
-    getKeyDescriptionForShortcut(shortcutId) {
-        const shortcut = this.shortcuts.get(shortcutId);
-        if (!shortcut)
-            return 'Not found';
-        const override = this.overrides.get(shortcutId);
-        if (override) {
-            return this.getKeyDescription({
-                key: override.newKey,
-                ctrlKey: override.newCtrlKey,
-                altKey: override.newAltKey,
-                shiftKey: override.newShiftKey,
-                metaKey: override.newMetaKey
-            });
-        }
-        return this.getKeyDescription(shortcut);
+    getActiveInstancesByComponentType(componentType) {
+        return Array.from(this.containers().values())
+            .filter(container => container.componentType === componentType && container.isVisible);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], 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();
+    getInstanceCount(componentType) {
+        return this.getInstancesByComponentType(componentType).length;
     }
-    /**
-     * 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
+    getActiveInstanceCount(componentType) {
+        return this.getActiveInstancesByComponentType(componentType).length;
+    }
+    // Close all instances of a component type
+    closeAllInstancesOfType(componentType) {
+        const instances = this.getInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.hide(instance.id);
         });
-        // 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
+    }
+    // Minimize all instances of a component type
+    minimizeAllInstancesOfType(componentType) {
+        const instances = this.getActiveInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.minimize(instance.id);
         });
-        // 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
+    }
+    // Bring all instances of a component type to front
+    bringAllInstancesToFront(componentType) {
+        const instances = this.getActiveInstancesByComponentType(componentType);
+        instances.forEach(instance => {
+            this.bringToFront(instance.id);
         });
-        // 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
+    }
+    // Get instance by unique instance ID
+    getInstanceByInstanceId(instanceId) {
+        return Array.from(this.containers().values())
+            .find(container => container.instanceId === instanceId);
+    }
+    // Update last accessed time
+    updateLastAccessed(containerId) {
+        this.containers.update(containers => {
+            const newContainers = new Map(containers);
+            const container = newContainers.get(containerId);
+            if (container) {
+                container.lastAccessed = new Date();
+                newContainers.set(containerId, container);
+            }
+            return newContainers;
         });
-        console.log('✅ [FloatingContainerShortcuts] Default shortcuts registered');
     }
+    // ===== DYNAMIC COMPONENT MANAGEMENT =====
     /**
-     * Register number shortcuts (Alt + 1, Alt + 2, etc.)
+     * Register a component for dynamic loading
      */
-    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
-            });
-        }
+    registerComponent(componentId, componentType) {
+        this.componentRegistry.set(componentId, componentType);
     }
     /**
-     * Open new floating container
+     * Unregister a component
      */
-    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);
+    unregisterComponent(componentId) {
+        this.componentRegistry.delete(componentId);
     }
     /**
-     * Focus previous container
+     * Get registered component type
      */
-    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);
-        }
+    getComponentType(componentId) {
+        return this.componentRegistry.get(componentId);
     }
     /**
-     * Hide all containers
+     * Check if component is registered
      */
-    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');
+    isComponentRegistered(componentId) {
+        return this.componentRegistry.has(componentId);
     }
     /**
-     * Show all containers
+     * Get registered component IDs
      */
-    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');
+    getRegisteredComponentIds() {
+        return Array.from(this.componentRegistry.keys());
     }
     /**
-     * Minimize all containers
+     * Create and load component dynamically
      */
-    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');
+    loadComponent(componentId, viewContainer, config) {
+        const componentType = this.componentRegistry.get(componentId);
+        if (!componentType) {
+            return null;
+        }
+        try {
+            viewContainer.clear();
+            const componentRef = viewContainer.createComponent(componentType, {
+                injector: this.injector
+            });
+            // Set inputs if provided
+            if (config?.inputs) {
+                Object.keys(config.inputs).forEach(key => {
+                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
+                        componentRef.instance[key] = config.inputs[key];
+                    }
+                });
+            }
+            // Set outputs if provided
+            if (config?.outputs) {
+                Object.keys(config.outputs).forEach(key => {
+                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
+                        const output = componentRef.instance[key];
+                        if (output && typeof output.subscribe === 'function') {
+                            output.subscribe(config.outputs[key]);
+                        }
+                    }
+                });
+            }
+            this.activeComponents.set(componentId, componentRef);
+            return componentRef;
+        }
+        catch (error) {
+            return null;
+        }
     }
     /**
-     * Focus container by index
+     * Destroy component
      */
-    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);
+    destroyComponent(componentId) {
+        const componentRef = this.activeComponents.get(componentId);
+        if (componentRef) {
+            componentRef.destroy();
+            this.activeComponents.delete(componentId);
         }
     }
     /**
-     * Open file uploader
+     * Get active component count
      */
-    openFileUploader() {
-        console.log('🎯 [FloatingContainerShortcuts] Opening file uploader');
-        // Implement file uploader opening logic here
-        console.log('✅ [FloatingContainerShortcuts] File uploader opened');
+    getActiveComponentCount() {
+        return this.activeComponents.size;
     }
     /**
-     * Open entity rights sharing
+     * Clear all active components
      */
-    openEntityRightsSharing() {
-        console.log('🎯 [FloatingContainerShortcuts] Opening entity rights sharing');
-        // Implement entity rights sharing opening logic here
-        console.log('✅ [FloatingContainerShortcuts] Entity rights sharing opened');
+    clearActiveComponents() {
+        this.activeComponents.forEach(componentRef => componentRef.destroy());
+        this.activeComponents.clear();
     }
+    // ===== CONTAINER MANAGER FUNCTIONALITY =====
     /**
-     * Duplicate current container
+     * Get config signal for a 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');
-        }
+    getConfigSignal(config) {
+        return signal(config);
     }
     /**
-     * Close current container
+     * Get minimized signal for a 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');
-        }
+    getMinimizedSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            return container?.isMinimized || false;
+        });
     }
     /**
-     * Toggle container visibility
+     * Get maximized signal for a container
      */
-    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: () => [] });
-
-class CideEleFloatingContainerService {
-    injector;
-    shortcutsService;
-    containers = signal(new Map(), ...(ngDevMode ? [{ debugName: "containers" }] : []));
-    nextZIndex = signal(1000, ...(ngDevMode ? [{ debugName: "nextZIndex" }] : []));
-    instanceCounter = signal(0, ...(ngDevMode ? [{ debugName: "instanceCounter" }] : []));
-    // Dynamic component management
-    componentRegistry = new Map();
-    activeComponents = new Map();
-    constructor(injector, shortcutsService) {
-        this.injector = injector;
-        this.shortcutsService = shortcutsService;
-        // Keyboard shortcuts are automatically registered by FloatingContainerShortcutsService
-        console.log('🎯 [FloatingContainerService] Shortcuts service injected and shortcuts registered');
-    }
-    // Computed properties
-    visibleContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isVisible), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
-    minimizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMinimized), ...(ngDevMode ? [{ debugName: "minimizedContainers" }] : []));
-    maximizedContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isMaximized), ...(ngDevMode ? [{ debugName: "maximizedContainers" }] : []));
-    // Container management methods
-    show(config) {
-        const containerId = config.id || this.generateId();
-        const instanceId = this.generateInstanceId(config.componentId || 'default');
-        // Get the highest z-index and add 1 to bring new container to front
-        const maxZIndex = this.getMaxZIndex();
-        const zIndex = maxZIndex + 1;
-        const now = new Date();
-        const container = {
-            id: containerId,
-            config: { ...config, id: containerId },
-            isVisible: true,
-            isMinimized: false,
-            isMaximized: false,
-            zIndex,
-            instanceId,
-            componentType: config.componentId || 'default',
-            createdAt: now,
-            lastAccessed: now
-        };
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            newContainers.set(containerId, container);
-            return newContainers;
+    getMaximizedSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            return container?.isMaximized || false;
         });
-        this.nextZIndex.update(z => z + 1);
-        return containerId;
     }
-    hide(containerId) {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            const container = newContainers.get(containerId);
-            if (container) {
-                container.isVisible = false;
-                newContainers.set(containerId, container);
-            }
-            return newContainers;
+    getZIndexSignal(containerId) {
+        return computed(() => {
+            const container = this.getContainer(containerId);
+            const zIndex = container?.zIndex || 1000;
+            console.log(`🎯 [FloatingContainer] Z-index signal for '${containerId}': ${zIndex}`);
+            return zIndex;
         });
     }
     /**
-     * Get the maximum z-index among all visible containers
-     */
-    getMaxZIndex() {
-        const containers = this.containers();
-        let maxZIndex = 1000; // Base z-index
-        for (const container of containers.values()) {
-            if (container.isVisible && container.zIndex > maxZIndex) {
-                maxZIndex = container.zIndex;
-            }
-        }
-        return maxZIndex;
-    }
-    /**
-     * Bring a container to the front (highest z-index)
+     * Set z-index for a specific container
      */
-    bringToFront(containerId) {
-        const maxZIndex = this.getMaxZIndex();
-        const newZIndex = maxZIndex + 1;
-        console.log(`🎯 [FloatingContainer] Bringing container '${containerId}' to front`);
-        console.log(`🎯 [FloatingContainer] Current max z-index: ${maxZIndex}, new z-index: ${newZIndex}`);
+    setZIndex(containerId, zIndex) {
+        console.log(`🎯 [FloatingContainer] Setting z-index for '${containerId}' to ${zIndex}`);
         this.containers.update(containers => {
             const newContainers = new Map(containers);
             const container = newContainers.get(containerId);
             if (container) {
                 const oldZIndex = container.zIndex;
-                container.zIndex = newZIndex;
+                container.zIndex = zIndex;
                 container.lastAccessed = new Date();
                 newContainers.set(containerId, container);
-                console.log(`🎯 [FloatingContainer] Container '${containerId}' z-index updated: ${oldZIndex} → ${newZIndex}`);
+                console.log(`🎯 [FloatingContainer] Container '${containerId}' z-index updated: ${oldZIndex} → ${zIndex}`);
             }
             else {
-                console.warn(`⚠️ [FloatingContainer] Container '${containerId}' not found!`);
-            }
-            return newContainers;
-        });
-    }
-    minimize(containerId) {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            const container = newContainers.get(containerId);
-            if (container) {
-                container.isMinimized = !container.isMinimized;
-                newContainers.set(containerId, container);
-            }
-            return newContainers;
-        });
-    }
-    maximize(containerId) {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            const container = newContainers.get(containerId);
-            if (container) {
-                container.isMaximized = !container.isMaximized;
-                newContainers.set(containerId, container);
-            }
-            return newContainers;
-        });
-    }
-    getContainer(containerId) {
-        return this.containers().get(containerId);
-    }
-    isVisible(containerId) {
-        const container = this.getContainer(containerId);
-        return container ? container.isVisible : false;
-    }
-    isMinimized(containerId) {
-        const container = this.getContainer(containerId);
-        return container ? container.isMinimized : false;
-    }
-    isMaximized(containerId) {
-        const container = this.getContainer(containerId);
-        return container ? container.isMaximized : false;
-    }
-    hideAll() {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            for (const [id, container] of newContainers) {
-                container.isVisible = false;
-                newContainers.set(id, container);
-            }
-            return newContainers;
-        });
-    }
-    minimizeAll() {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            for (const [id, container] of newContainers) {
-                if (container.isVisible) {
-                    container.isMinimized = true;
-                    newContainers.set(id, container);
-                }
-            }
-            return newContainers;
-        });
-    }
-    generateId() {
-        return `floating-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    generateInstanceId(componentType) {
-        const counter = this.instanceCounter() + 1;
-        this.instanceCounter.update(c => c + 1);
-        return `${componentType}-instance-${counter}-${Date.now()}`;
-    }
-    // Multiple instance management methods
-    getInstancesByComponentType(componentType) {
-        return Array.from(this.containers().values())
-            .filter(container => container.componentType === componentType);
-    }
-    getActiveInstancesByComponentType(componentType) {
-        return Array.from(this.containers().values())
-            .filter(container => container.componentType === componentType && container.isVisible);
-    }
-    getInstanceCount(componentType) {
-        return this.getInstancesByComponentType(componentType).length;
-    }
-    getActiveInstanceCount(componentType) {
-        return this.getActiveInstancesByComponentType(componentType).length;
-    }
-    // Close all instances of a component type
-    closeAllInstancesOfType(componentType) {
-        const instances = this.getInstancesByComponentType(componentType);
-        instances.forEach(instance => {
-            this.hide(instance.id);
-        });
-    }
-    // Minimize all instances of a component type
-    minimizeAllInstancesOfType(componentType) {
-        const instances = this.getActiveInstancesByComponentType(componentType);
-        instances.forEach(instance => {
-            this.minimize(instance.id);
-        });
-    }
-    // Bring all instances of a component type to front
-    bringAllInstancesToFront(componentType) {
-        const instances = this.getActiveInstancesByComponentType(componentType);
-        instances.forEach(instance => {
-            this.bringToFront(instance.id);
-        });
-    }
-    // Get instance by unique instance ID
-    getInstanceByInstanceId(instanceId) {
-        return Array.from(this.containers().values())
-            .find(container => container.instanceId === instanceId);
-    }
-    // Update last accessed time
-    updateLastAccessed(containerId) {
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            const container = newContainers.get(containerId);
-            if (container) {
-                container.lastAccessed = new Date();
-                newContainers.set(containerId, container);
-            }
-            return newContainers;
-        });
-    }
-    // ===== DYNAMIC COMPONENT MANAGEMENT =====
-    /**
-     * Register a component for dynamic loading
-     */
-    registerComponent(componentId, componentType) {
-        this.componentRegistry.set(componentId, componentType);
-    }
-    /**
-     * Unregister a component
-     */
-    unregisterComponent(componentId) {
-        this.componentRegistry.delete(componentId);
-    }
-    /**
-     * Get registered component type
-     */
-    getComponentType(componentId) {
-        return this.componentRegistry.get(componentId);
-    }
-    /**
-     * Check if component is registered
-     */
-    isComponentRegistered(componentId) {
-        return this.componentRegistry.has(componentId);
-    }
-    /**
-     * Get registered component IDs
-     */
-    getRegisteredComponentIds() {
-        return Array.from(this.componentRegistry.keys());
-    }
-    /**
-     * Create and load component dynamically
-     */
-    loadComponent(componentId, viewContainer, config) {
-        const componentType = this.componentRegistry.get(componentId);
-        if (!componentType) {
-            return null;
-        }
-        try {
-            viewContainer.clear();
-            const componentRef = viewContainer.createComponent(componentType, {
-                injector: this.injector
-            });
-            // Set inputs if provided
-            if (config?.inputs) {
-                Object.keys(config.inputs).forEach(key => {
-                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
-                        componentRef.instance[key] = config.inputs[key];
-                    }
-                });
-            }
-            // Set outputs if provided
-            if (config?.outputs) {
-                Object.keys(config.outputs).forEach(key => {
-                    if (componentRef.instance && typeof componentRef.instance === 'object' && key in componentRef.instance) {
-                        const output = componentRef.instance[key];
-                        if (output && typeof output.subscribe === 'function') {
-                            output.subscribe(config.outputs[key]);
-                        }
-                    }
-                });
-            }
-            this.activeComponents.set(componentId, componentRef);
-            return componentRef;
-        }
-        catch (error) {
-            return null;
-        }
-    }
-    /**
-     * Destroy component
-     */
-    destroyComponent(componentId) {
-        const componentRef = this.activeComponents.get(componentId);
-        if (componentRef) {
-            componentRef.destroy();
-            this.activeComponents.delete(componentId);
-        }
-    }
-    /**
-     * Get active component count
-     */
-    getActiveComponentCount() {
-        return this.activeComponents.size;
-    }
-    /**
-     * Clear all active components
-     */
-    clearActiveComponents() {
-        this.activeComponents.forEach(componentRef => componentRef.destroy());
-        this.activeComponents.clear();
-    }
-    // ===== CONTAINER MANAGER FUNCTIONALITY =====
-    /**
-     * Get config signal for a container
-     */
-    getConfigSignal(config) {
-        return signal(config);
-    }
-    /**
-     * Get minimized signal for a container
-     */
-    getMinimizedSignal(containerId) {
-        return computed(() => {
-            const container = this.getContainer(containerId);
-            return container?.isMinimized || false;
-        });
-    }
-    /**
-     * Get maximized signal for a container
-     */
-    getMaximizedSignal(containerId) {
-        return computed(() => {
-            const container = this.getContainer(containerId);
-            return container?.isMaximized || false;
-        });
-    }
-    getZIndexSignal(containerId) {
-        return computed(() => {
-            const container = this.getContainer(containerId);
-            const zIndex = container?.zIndex || 1000;
-            console.log(`🎯 [FloatingContainer] Z-index signal for '${containerId}': ${zIndex}`);
-            return zIndex;
-        });
-    }
-    /**
-     * Set z-index for a specific container
-     */
-    setZIndex(containerId, zIndex) {
-        console.log(`🎯 [FloatingContainer] Setting z-index for '${containerId}' to ${zIndex}`);
-        this.containers.update(containers => {
-            const newContainers = new Map(containers);
-            const container = newContainers.get(containerId);
-            if (container) {
-                const oldZIndex = container.zIndex;
-                container.zIndex = zIndex;
-                container.lastAccessed = new Date();
-                newContainers.set(containerId, container);
-                console.log(`🎯 [FloatingContainer] Container '${containerId}' z-index updated: ${oldZIndex} → ${zIndex}`);
-            }
-            else {
-                console.warn(`⚠️ [FloatingContainer] Container '${containerId}' not found for z-index update!`);
+                console.warn(`⚠️ [FloatingContainer] Container '${containerId}' not found for z-index update!`);
             }
             return newContainers;
         });
@@ -4254,7 +3774,7 @@ class CideEleFloatingContainerService {
     onMaximize(containerId) {
         this.maximize(containerId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, deps: [{ token: i0.Injector }, { token: FloatingContainerShortcutsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerService, decorators: [{
@@ -4262,7 +3782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: FloatingContainerShortcutsService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }] });
 
 class CideEleFloatingFileUploaderService {
     containerService = inject(CideEleFloatingContainerService);
@@ -5468,6 +4988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class CideEleFloatingFileUploaderComponent {
     destroyRef = inject(DestroyRef);
     fileManagerService = inject(CideEleFileManagerService);
+    fileInputRef;
     // Input data from floating container
     data = {};
     // Signals for reactive state (simplified for floating container)
@@ -5863,10 +5384,8 @@ class CideEleFloatingFileUploaderComponent {
      * Trigger file input click
      */
     triggerFileInput() {
-        // Use ViewChild or querySelector with specific selector to target only this component's file input
-        const fileInput = document.querySelector('.floating-uploader input[type="file"]');
-        if (fileInput) {
-            fileInput.click();
+        if (this.fileInputRef?.nativeElement) {
+            this.fileInputRef.nativeElement.click();
         }
     }
     /**
@@ -5899,15 +5418,18 @@ 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=\"tw-w-full tw-h-full tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg 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-2\">\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-3 tw-rounded-lg 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-py-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  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\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        <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        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\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" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg 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-2 tw-max-h-[60vh] tw-overflow-y-auto tw-pr-1\">\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-3 tw-rounded-lg tw-transition-colors tw-duration-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\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-py-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  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\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        <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        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\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=\"tw-w-full tw-h-full tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg 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-2\">\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-3 tw-rounded-lg 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-py-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  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\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        <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        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}" }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
+                    ], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg 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-2 tw-max-h-[60vh] tw-overflow-y-auto tw-pr-1\">\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-3 tw-rounded-lg tw-transition-colors tw-duration-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\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-py-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  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\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        <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        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}" }]
+        }], ctorParameters: () => [], propDecorators: { fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], data: [{
                 type: Input
             }] } });
 
@@ -6065,7 +5587,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
-/**
+class KeyboardShortcutService {
+    shortcuts = new Map();
+    overrides = new Map();
+    keydownListener;
+    constructor() {
+        this.setupGlobalListener();
+    }
+    ngOnDestroy() {
+        this.removeGlobalListener();
+    }
+    /**
+     * Register a new keyboard shortcut
+     */
+    register(shortcut) {
+        this.shortcuts.set(shortcut.id, shortcut);
+        console.log(`⌨️ [KeyboardShortcut] Registered shortcut: ${shortcut.id} (${this.getKeyDescription(shortcut)})`);
+    }
+    /**
+     * Override an existing shortcut with new key combination
+     */
+    override(shortcutId, newKey, options) {
+        const originalShortcut = this.shortcuts.get(shortcutId);
+        if (!originalShortcut) {
+            console.warn(`⚠️ [KeyboardShortcut] Cannot override shortcut '${shortcutId}' - not found`);
+            return;
+        }
+        const override = {
+            shortcutId,
+            newKey,
+            newCtrlKey: options?.ctrlKey,
+            newAltKey: options?.altKey,
+            newShiftKey: options?.shiftKey,
+            newMetaKey: options?.metaKey
+        };
+        this.overrides.set(shortcutId, override);
+        console.log(`🔄 [KeyboardShortcut] Override registered for '${shortcutId}': ${this.getKeyDescription({ ...originalShortcut, ...options, key: newKey })}`);
+    }
+    /**
+     * Remove a shortcut
+     */
+    unregister(shortcutId) {
+        this.shortcuts.delete(shortcutId);
+        this.overrides.delete(shortcutId);
+        console.log(`🗑️ [KeyboardShortcut] Removed shortcut: ${shortcutId}`);
+    }
+    /**
+     * Remove override for a shortcut (restore original key combination)
+     */
+    removeOverride(shortcutId) {
+        this.overrides.delete(shortcutId);
+        console.log(`🔄 [KeyboardShortcut] Override removed for: ${shortcutId}`);
+    }
+    /**
+     * Get all registered shortcuts
+     */
+    getAllShortcuts() {
+        return Array.from(this.shortcuts.values());
+    }
+    /**
+     * Get shortcuts by category or filter
+     */
+    getShortcuts(filter) {
+        const shortcuts = this.getAllShortcuts();
+        return filter ? shortcuts.filter(filter) : shortcuts;
+    }
+    /**
+     * Check if a shortcut is registered
+     */
+    hasShortcut(shortcutId) {
+        return this.shortcuts.has(shortcutId);
+    }
+    /**
+     * Get shortcut information
+     */
+    getShortcut(shortcutId) {
+        return this.shortcuts.get(shortcutId);
+    }
+    /**
+     * Clear all shortcuts
+     */
+    clearAll() {
+        this.shortcuts.clear();
+        this.overrides.clear();
+        console.log(`🧹 [KeyboardShortcut] All shortcuts cleared`);
+    }
+    /**
+     * Set up global keyboard listener
+     */
+    setupGlobalListener() {
+        this.keydownListener = (event) => {
+            this.handleKeydown(event);
+        };
+        document.addEventListener('keydown', this.keydownListener);
+        console.log(`🎧 [KeyboardShortcut] Global keyboard listener attached`);
+    }
+    /**
+     * Remove global keyboard listener
+     */
+    removeGlobalListener() {
+        if (this.keydownListener) {
+            document.removeEventListener('keydown', this.keydownListener);
+            this.keydownListener = undefined;
+            console.log(`🎧 [KeyboardShortcut] Global keyboard listener removed`);
+        }
+    }
+    /**
+     * Handle keydown events
+     */
+    handleKeydown(event) {
+        for (const [shortcutId, shortcut] of this.shortcuts) {
+            if (this.matchesShortcut(event, shortcut)) {
+                // Check for override
+                const override = this.overrides.get(shortcutId);
+                if (override && !this.matchesOverride(event, override)) {
+                    continue; // Skip if override doesn't match
+                }
+                if (shortcut.preventDefault !== false) {
+                    event.preventDefault();
+                }
+                if (shortcut.stopPropagation) {
+                    event.stopPropagation();
+                }
+                console.log(`⌨️ [KeyboardShortcut] Executing shortcut: ${shortcutId}`);
+                shortcut.action();
+                break; // Only execute one shortcut per keydown
+            }
+        }
+    }
+    /**
+     * Check if event matches shortcut
+     */
+    matchesShortcut(event, shortcut) {
+        return event.key === shortcut.key &&
+            (shortcut.ctrlKey === undefined || event.ctrlKey === shortcut.ctrlKey) &&
+            (shortcut.altKey === undefined || event.altKey === shortcut.altKey) &&
+            (shortcut.shiftKey === undefined || event.shiftKey === shortcut.shiftKey) &&
+            (shortcut.metaKey === undefined || event.metaKey === shortcut.metaKey);
+    }
+    /**
+     * Check if event matches override
+     */
+    matchesOverride(event, override) {
+        return event.key === override.newKey &&
+            (override.newCtrlKey === undefined || event.ctrlKey === override.newCtrlKey) &&
+            (override.newAltKey === undefined || event.altKey === override.newAltKey) &&
+            (override.newShiftKey === undefined || event.shiftKey === override.newShiftKey) &&
+            (override.newMetaKey === undefined || event.metaKey === override.newMetaKey);
+    }
+    /**
+     * Get human-readable key description
+     */
+    getKeyDescription(shortcut) {
+        const modifiers = [];
+        if (shortcut.ctrlKey)
+            modifiers.push('Ctrl');
+        if (shortcut.altKey)
+            modifiers.push('Alt');
+        if (shortcut.shiftKey)
+            modifiers.push('Shift');
+        if (shortcut.metaKey)
+            modifiers.push('Meta');
+        return [...modifiers, shortcut.key].join(' + ');
+    }
+    /**
+     * Get key description for a shortcut ID
+     */
+    getKeyDescriptionForShortcut(shortcutId) {
+        const shortcut = this.shortcuts.get(shortcutId);
+        if (!shortcut)
+            return 'Not found';
+        const override = this.overrides.get(shortcutId);
+        if (override) {
+            return this.getKeyDescription({
+                key: override.newKey,
+                ctrlKey: override.newCtrlKey,
+                altKey: override.newAltKey,
+                shiftKey: override.newShiftKey,
+                metaKey: override.newMetaKey
+            });
+        }
+        return this.getKeyDescription(shortcut);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardShortcutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
 <!-- Basic horizontal (left-right) layout -->
 <div class="panel-container">
     <div class="left-panel">
@@ -10654,8 +10368,294 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ng
   ` }]
             }], ctorParameters: null, propDecorators: null }) });
 
+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: () => [] });
+
 class CideEleFloatingFeaturesService {
     containerService = inject(CideEleFloatingContainerService);
+    shortcutsService = inject(FloatingContainerShortcutsService);
     constructor() {
         // File uploader is handled by its own dedicated service
         // Entity rights sharing is handled by its own dedicated service