@memberjunction/ng-explorer-core 2.121.0 → 2.122.0

package/dist/lib/shell/components/tabs/tab-container.component.js

@@ -0,0 +1,920 @@
+import { Component, ViewChild, createComponent, ViewEncapsulation } from '@angular/core';
+import { MJGlobal } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { ResourceData } from '@memberjunction/core-entities';
+import { LogError, Metadata } from '@memberjunction/core';
+import { ComponentCacheManager } from './component-cache-manager';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-base-application";
+import * as i2 from "@angular/common";
+const _c0 = ["glContainer"];
+const _c1 = ["directContentContainer"];
+function TabContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 3, 0);
+} }
+function TabContainerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 4, 1);
+} }
+function TabContainerComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
+    i0.ɵɵlistener("click", function TabContainerComponent_div_3_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextPin()); });
+    i0.ɵɵelement(2, "i", 8);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(5, "div", 9);
+    i0.ɵɵelementStart(6, "div", 7);
+    i0.ɵɵlistener("click", function TabContainerComponent_div_3_Template_div_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextClose()); });
+    i0.ɵɵelement(7, "i", 10);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "Close Tab");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 7);
+    i0.ɵɵlistener("click", function TabContainerComponent_div_3_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseOthers()); });
+    i0.ɵɵelement(11, "i", 11);
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13, "Close Others");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 7);
+    i0.ɵɵlistener("click", function TabContainerComponent_div_3_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCloseToRight()); });
+    i0.ɵɵelement(15, "i", 12);
+    i0.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17, "Close to Right");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r1.contextMenuX, "px")("top", ctx_r1.contextMenuY, "px");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.isContextTabPinned ? "Unpin Tab" : "Pin Tab");
+} }
+/**
+ * Container for Golden Layout tabs with app-colored styling.
+ *
+ * Handles:
+ * - Golden Layout initialization
+ * - Tab creation and styling
+ * - Lazy loading of tab content
+ * - Context menu for pin/close
+ * - Layout persistence
+ */
+export class TabContainerComponent {
+    layoutManager;
+    workspaceManager;
+    appManager;
+    appRef;
+    environmentInjector;
+    cdr;
+    glContainer;
+    directContentContainer;
+    subscriptions = [];
+    layoutInitialized = false;
+    // Track component references for cleanup (legacy - keep for backward compat during transition)
+    componentRefs = new Map();
+    // NEW: Smart component cache for preserving state across tab switches
+    cacheManager;
+    // Single-resource mode: render component directly without Golden Layout
+    // This avoids the 20px height issue when GL header is hidden
+    useSingleResourceMode = false;
+    singleResourceComponentRef = null;
+    previousTabBarVisible = null;
+    currentSingleResourceSignature = null; // Track loaded content signature to avoid unnecessary reloads
+    isCreatingInitialTabs = false; // Flag to prevent syncTabsWithConfiguration during initial tab creation
+    // Context menu state
+    contextMenuVisible = false;
+    contextMenuX = 0;
+    contextMenuY = 0;
+    contextMenuTabId = null;
+    constructor(layoutManager, workspaceManager, appManager, appRef, environmentInjector, cdr) {
+        this.layoutManager = layoutManager;
+        this.workspaceManager = workspaceManager;
+        this.appManager = appManager;
+        this.appRef = appRef;
+        this.environmentInjector = environmentInjector;
+        this.cdr = cdr;
+        // Initialize component cache manager
+        this.cacheManager = new ComponentCacheManager(this.appRef);
+    }
+    ngOnInit() {
+        // Subscribe to tab events
+        this.subscriptions.push(this.layoutManager.TabShown.subscribe(event => {
+            this.onTabShown(event);
+        }), this.layoutManager.TabClosed.subscribe(tabId => {
+            this.cleanupTabComponent(tabId);
+            this.workspaceManager.CloseTab(tabId);
+        }), this.layoutManager.LayoutChanged.subscribe(event => {
+            const layout = this.layoutManager.SaveLayout();
+            this.workspaceManager.UpdateLayout(layout);
+        }), this.layoutManager.ActiveTab.subscribe(tabId => {
+            if (tabId) {
+                this.workspaceManager.SetActiveTab(tabId);
+            }
+        }), this.layoutManager.TabDoubleClicked.subscribe(tabId => {
+            this.workspaceManager.TogglePin(tabId);
+        }), this.layoutManager.TabRightClicked.subscribe(event => {
+            this.showContextMenu(event.x, event.y, event.tabId);
+        }));
+        // Subscribe to configuration changes to sync tabs
+        this.subscriptions.push(this.workspaceManager.Configuration.subscribe(config => {
+            if (config) {
+                if (this.useSingleResourceMode) {
+                    // In single-resource mode, reload content if the tab content changed
+                    // The same tab ID can have different content (tab gets reused)
+                    const activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
+                    if (activeTab) {
+                        const signature = this.getTabContentSignature(activeTab);
+                        if (signature !== this.currentSingleResourceSignature) {
+                            this.loadSingleResourceContent();
+                        }
+                    }
+                }
+                else if (this.layoutInitialized && !this.isCreatingInitialTabs) {
+                    // In multi-tab mode, sync with Golden Layout
+                    // Skip during initial tab creation to avoid race condition (tabs would be created twice)
+                    this.syncTabsWithConfiguration(config.tabs);
+                }
+            }
+        }));
+        // Subscribe to tab bar visibility changes for single-resource mode
+        this.subscriptions.push(this.workspaceManager.TabBarVisible.subscribe(tabBarVisible => {
+            this.handleTabBarVisibilityChange(tabBarVisible);
+        }));
+    }
+    ngAfterViewInit() {
+        // Initialize Golden Layout only if we're not in single-resource mode
+        if (!this.useSingleResourceMode) {
+            this.initializeGoldenLayout();
+        }
+        else {
+            // In single-resource mode, load content directly
+            this.loadSingleResourceContent();
+        }
+    }
+    /**
+     * Initialize Golden Layout and load tabs
+     * @param forceCreateTabs - If true, always creates tabs fresh from config.tabs instead of restoring saved layout
+     */
+    initializeGoldenLayout(forceCreateTabs = false) {
+        if (!this.glContainer?.nativeElement) {
+            console.warn('Golden Layout container not available, waiting...');
+            setTimeout(() => this.initializeGoldenLayout(forceCreateTabs), 50);
+            return;
+        }
+        if (this.layoutInitialized) {
+            return; // Already initialized
+        }
+        // Initialize Golden Layout
+        this.layoutManager.Initialize(this.glContainer.nativeElement);
+        // Mark layout as initialized
+        this.layoutInitialized = true;
+        // Load tabs from configuration
+        const config = this.workspaceManager.GetConfiguration();
+        if (!config || config.tabs.length === 0) {
+            return;
+        }
+        // Check if we have a saved layout structure with actual content
+        const hasSavedLayout = config.layout?.root?.content && config.layout.root.content.length > 0;
+        if (hasSavedLayout && !forceCreateTabs) {
+            // RESTORE SAVED LAYOUT - preserves drag/drop arrangements (stacks, columns, rows)
+            // This is the single source of truth for visual arrangement
+            console.log('[TabContainer.initializeGoldenLayout] Restoring saved layout structure');
+            this.layoutManager.LoadLayout(config.layout);
+            // Focus active tab and ensure proper sizing
+            setTimeout(() => {
+                if (config.activeTabId) {
+                    this.layoutManager.FocusTab(config.activeTabId);
+                }
+            }, 50);
+        }
+        else {
+            // CREATE FRESH - no saved layout or forceCreateTabs=true
+            // Use config.tabs sorted by sequence to build a simple single-stack layout
+            console.log(`[TabContainer.initializeGoldenLayout] Creating ${config.tabs.length} tabs from config (sorted by sequence)`);
+            const sortedTabs = [...config.tabs].sort((a, b) => a.sequence - b.sequence);
+            this.isCreatingInitialTabs = true;
+            try {
+                sortedTabs.forEach(tab => {
+                    this.createTab(tab);
+                });
+            }
+            finally {
+                this.isCreatingInitialTabs = false;
+            }
+            setTimeout(() => {
+                if (config.activeTabId) {
+                    this.layoutManager.FocusTab(config.activeTabId);
+                }
+            }, 50);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        // Cleanup single-resource mode component if exists
+        this.cleanupSingleResourceComponent();
+        // Clear the component cache (destroys all components)
+        this.cacheManager.clearCache();
+        // Cleanup any legacy componentRefs
+        this.componentRefs.forEach((ref, tabId) => {
+            this.appRef.detachView(ref.hostView);
+            ref.destroy();
+        });
+        this.componentRefs.clear();
+    }
+    /**
+     * Handle changes to tab bar visibility - switches between single-resource and multi-tab modes
+     */
+    handleTabBarVisibilityChange(tabBarVisible) {
+        // Skip if no change
+        if (this.previousTabBarVisible === tabBarVisible) {
+            return;
+        }
+        this.previousTabBarVisible = tabBarVisible;
+        // Determine if we should use single-resource mode
+        const shouldUseSingleResourceMode = !tabBarVisible;
+        if (shouldUseSingleResourceMode !== this.useSingleResourceMode) {
+            console.log(`🔄 Switching to ${shouldUseSingleResourceMode ? 'single-resource' : 'multi-tab'} mode`);
+            this.useSingleResourceMode = shouldUseSingleResourceMode;
+            this.cdr.detectChanges();
+            if (this.useSingleResourceMode) {
+                // Transitioning to single-resource mode
+                // **CRITICAL FIX**: Wait for the template to render directContentContainer
+                // before trying to load content. detectChanges() only marks dirty, doesn't render immediately.
+                setTimeout(() => {
+                    // First, destroy Golden Layout if it was initialized (prevents stale state)
+                    if (this.layoutInitialized) {
+                        console.log('[TabContainer] Destroying Golden Layout when transitioning to single-resource mode');
+                        this.layoutManager.Destroy();
+                        this.layoutInitialized = false;
+                    }
+                    // Load the active tab's content directly (now container will exist)
+                    this.loadSingleResourceContent();
+                }, 0);
+            }
+            else {
+                // Transitioning to multi-tab mode
+                // Pin the previously displayed tab (it was the "current" content in single-resource mode)
+                // This ensures we only have ONE temporary tab at a time
+                const config = this.workspaceManager.GetConfiguration();
+                if (config && config.tabs.length > 0) {
+                    // The new tab (just added via OpenTabForced) is now the activeTabId
+                    // All OTHER unpinned tabs should be pinned since they represent content
+                    // the user explicitly kept open
+                    const updatedTabs = config.tabs.map(tab => {
+                        // Pin all tabs except the newly active one (which is the temporary tab)
+                        if (tab.id !== config.activeTabId && !tab.isPinned) {
+                            return { ...tab, isPinned: true };
+                        }
+                        return tab;
+                    });
+                    // Only update if we actually changed something
+                    const hasChanges = updatedTabs.some((tab, i) => tab.isPinned !== config.tabs[i].isPinned);
+                    if (hasChanges) {
+                        this.workspaceManager.UpdateConfiguration({
+                            ...config,
+                            tabs: updatedTabs
+                        });
+                    }
+                }
+                // Clean up direct component, Golden Layout will handle tabs
+                this.cleanupSingleResourceComponent();
+                this.currentSingleResourceSignature = null; // Reset tracking
+                // Reset layout initialized flag since we're switching from single-resource mode
+                // The gl-container is a new DOM element (due to @if), so we need fresh initialization
+                this.layoutInitialized = false;
+                // Initialize Golden Layout - use setTimeout to allow the template to update first
+                // and ensure the gl-container div exists in the DOM
+                // IMPORTANT: Use forceCreateTabs=true to create tabs fresh from config.tabs
+                // instead of restoring potentially stale saved layout structure
+                setTimeout(() => {
+                    this.initializeGoldenLayout(true /* forceCreateTabs */);
+                }, 0);
+            }
+        }
+    }
+    /**
+     * Load content directly for single-resource mode (bypasses Golden Layout)
+     */
+    async loadSingleResourceContent() {
+        // Wait for next tick to ensure the container is rendered
+        await Promise.resolve();
+        const config = this.workspaceManager.GetConfiguration();
+        if (!config || config.tabs.length === 0) {
+            return;
+        }
+        // Get the active tab (or first tab)
+        const activeTab = config.tabs.find(t => t.id === config.activeTabId) || config.tabs[0];
+        if (!activeTab) {
+            return;
+        }
+        // Track which content we're loading (signature includes resource type and record ID)
+        const newSignature = this.getTabContentSignature(activeTab);
+        if (this.currentSingleResourceSignature === newSignature) {
+            // Content already loaded, no action needed
+            return;
+        }
+        this.currentSingleResourceSignature = newSignature;
+        // Get the container element
+        const container = this.directContentContainer?.nativeElement;
+        if (!container) {
+            console.warn('Direct content container not available yet, retrying...');
+            // Retry after view is updated
+            setTimeout(() => this.loadSingleResourceContent(), 50);
+            return;
+        }
+        // Create ResourceData from tab
+        const resourceData = await this.getResourceDataFromTab(activeTab);
+        if (!resourceData) {
+            LogError(`Unable to create ResourceData for tab: ${activeTab.title}`);
+            return;
+        }
+        // Get driver class for component lookup
+        const driverClass = resourceData.Configuration?.resourceTypeDriverClass || resourceData.ResourceType;
+        // **OPTIMIZATION: Check cache first to reuse existing loaded component**
+        const cached = this.cacheManager.getCachedComponent(driverClass, resourceData.ResourceRecordID || '', activeTab.applicationId);
+        if (cached) {
+            console.log(`♻️ Reusing cached component for single-resource mode: ${driverClass}`);
+            // Clean up previous single-resource component (if different)
+            this.cleanupSingleResourceComponent();
+            // Detach from tab tracking (it was attached to a tab in Golden Layout)
+            this.cacheManager.markAsDetached(activeTab.id);
+            // Reattach the cached wrapper element to single-resource container
+            cached.wrapperElement.style.height = "100%"; // Ensure full height
+            container.appendChild(cached.wrapperElement);
+            // Store reference for cleanup
+            this.singleResourceComponentRef = cached.componentRef;
+            console.log('✅ Single-resource component transferred from cache (instant!)');
+            return;
+        }
+        // **Fallback: Create new component if not in cache**
+        console.log(`📦 Creating new component for single-resource mode: ${driverClass}`);
+        // Get the component registration
+        const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
+        if (!resourceReg) {
+            LogError(`Unable to find resource registration for driver class: ${driverClass}`);
+            return;
+        }
+        // Clean up previous component if any
+        this.cleanupSingleResourceComponent();
+        // Create the component dynamically
+        const componentRef = createComponent(resourceReg.SubClass, {
+            environmentInjector: this.environmentInjector
+        });
+        // Attach to Angular's change detection
+        this.appRef.attachView(componentRef.hostView);
+        // Set the resource data on the component
+        const instance = componentRef.instance;
+        instance.Data = resourceData;
+        // Wire up events
+        instance.LoadCompleteEvent = () => {
+            console.log('✅ Single-resource component loaded');
+        };
+        // Get the native element and append to container
+        const nativeElement = componentRef.hostView.rootNodes[0];
+        container.appendChild(nativeElement);
+        // now make sure that the container's direct child is 100% height
+        if (container.children?.length > 0) {
+            container.children[0].style.height = "100%";
+        }
+        // Store reference for cleanup
+        this.singleResourceComponentRef = componentRef;
+    }
+    /**
+     * Clean up single-resource mode component
+     */
+    cleanupSingleResourceComponent() {
+        if (this.singleResourceComponentRef) {
+            this.appRef.detachView(this.singleResourceComponentRef.hostView);
+            this.singleResourceComponentRef.destroy();
+            this.singleResourceComponentRef = null;
+        }
+        // Clear the container
+        const container = this.directContentContainer?.nativeElement;
+        if (container) {
+            container.innerHTML = '';
+        }
+    }
+    /**
+     * Generate a signature for tab content to detect when content changes
+     * This is needed because in single-resource mode, the same tab ID can have different content
+     */
+    getTabContentSignature(tab) {
+        // Include key identifying fields that determine what component/content is shown
+        const parts = [
+            tab.applicationId,
+            tab.configuration?.resourceType || '',
+            tab.configuration?.driverClass || '',
+            tab.resourceRecordId || '',
+            tab.configuration?.route || ''
+        ];
+        return parts.join('|');
+    }
+    /**
+     * Create a tab in Golden Layout from workspace tab data
+     */
+    createTab(tab) {
+        const app = this.appManager.GetAppById(tab.applicationId);
+        const appColor = app?.GetColor() || '#757575';
+        const state = {
+            tabId: tab.id,
+            appId: tab.applicationId,
+            appColor,
+            title: tab.title,
+            route: tab.configuration['route'] || '',
+            isPinned: tab.isPinned,
+            isLoaded: false
+        };
+        this.layoutManager.AddTab(state);
+        // Load display name in background without loading full component
+        this.updateTabDisplayName(tab);
+    }
+    /**
+     * Handle tab shown event for lazy loading
+     */
+    async onTabShown(event) {
+        if (event.isFirstShow) {
+            // Load content for this tab
+            await this.loadTabContent(event.tabId, event.container);
+            this.layoutManager.MarkTabLoaded(event.tabId);
+        }
+    }
+    /**
+     * Load content into a tab container
+     * Uses component cache to reuse components for same resources
+     */
+    async loadTabContent(tabId, container) {
+        try {
+            const tab = this.workspaceManager.GetTab(tabId);
+            if (!tab) {
+                LogError(`Tab not found: ${tabId}`);
+                return;
+            }
+            // Get the container element from Golden Layout
+            const glContainer = container;
+            if (!glContainer?.element) {
+                LogError('Golden Layout container element not found');
+                return;
+            }
+            // Extract resource data from tab configuration
+            const resourceData = await this.getResourceDataFromTab(tab);
+            if (!resourceData) {
+                LogError(`Unable to create ResourceData for tab: ${tab.title}`);
+                return;
+            }
+            // Clear any existing content from the container (important for tab reuse)
+            glContainer.element.innerHTML = '';
+            // Get driver class for cache lookup (resolves to actual component class name)
+            const driverClass = resourceData.Configuration?.resourceTypeDriverClass || resourceData.ResourceType;
+            // Check if we have a cached component for this resource
+            const cached = this.cacheManager.getCachedComponent(driverClass, resourceData.ResourceRecordID || '', tab.applicationId);
+            if (cached) {
+                console.log(`♻️ Reusing cached component for ${resourceData.ResourceType} (driver: ${driverClass})`);
+                // Reattach the cached wrapper element
+                glContainer.element.appendChild(cached.wrapperElement);
+                // Mark as attached to this tab
+                this.cacheManager.markAsAttached(driverClass, resourceData.ResourceRecordID || '', tab.applicationId, tabId);
+                // Keep legacy componentRefs map updated
+                this.componentRefs.set(tabId, cached.componentRef);
+                // If resource is already loaded, update tab title immediately
+                const instance = cached.componentRef.instance;
+                if (instance.LoadComplete) {
+                    this.updateTabTitleFromResource(tabId, instance, resourceData);
+                }
+                return;
+            }
+            // No cached component found - create new one
+            console.log(`🆕 Creating new component for ${resourceData.ResourceType} using driver class: ${driverClass}`);
+            // Get the component registration using the driver class
+            const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
+            if (!resourceReg) {
+                LogError(`Unable to find resource registration for driver class: ${driverClass}`);
+                return;
+            }
+            // Create the component dynamically
+            const componentRef = createComponent(resourceReg.SubClass, {
+                environmentInjector: this.environmentInjector
+            });
+            // Attach to Angular's change detection
+            this.appRef.attachView(componentRef.hostView);
+            // Set the resource data on the component
+            const instance = componentRef.instance;
+            instance.Data = resourceData;
+            // Wire up events
+            instance.LoadCompleteEvent = () => {
+                // Tab content loaded - update tab title with resource display name
+                this.updateTabTitleFromResource(tabId, instance, resourceData);
+            };
+            instance.ResourceRecordSavedEvent = (entity) => {
+                // Update tab title if needed
+                if (entity && entity.Get && entity.Get('Name')) {
+                    // TODO: Implement UpdateTabTitle in WorkspaceStateManager
+                }
+            };
+            // Create a container div for the component
+            const componentElement = document.createElement('div');
+            componentElement.className = 'tab-content-wrapper';
+            componentElement.style.cssText = 'width: 100%; height: 100%;';
+            // Append the component's native element
+            const nativeElement = componentRef.hostView.rootNodes[0];
+            componentElement.appendChild(nativeElement);
+            // Add to Golden Layout container
+            glContainer.element.appendChild(componentElement);
+            // Cache the component for future reuse
+            this.cacheManager.cacheComponent(componentRef, componentElement, resourceData, tabId);
+            // Store reference for cleanup (legacy)
+            this.componentRefs.set(tabId, componentRef);
+        }
+        catch (e) {
+            LogError(e);
+        }
+    }
+    /**
+     * Update tab display name in background without loading full component
+     * This ensures all tabs show proper names immediately, not just when clicked
+     */
+    async updateTabDisplayName(tab) {
+        try {
+            // Only update display names for resource-based tabs
+            const resourceType = tab.configuration['resourceType'];
+            if (!resourceType) {
+                return;
+            }
+            // Get ResourceData from tab
+            const resourceData = await this.getResourceDataFromTab(tab);
+            if (!resourceData) {
+                return;
+            }
+            // Get the resource registration to access GetResourceDisplayName without loading full component
+            const driverClass = resourceData.Configuration?.resourceTypeDriverClass || resourceData.ResourceType;
+            const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, driverClass);
+            if (!resourceReg) {
+                return;
+            }
+            // Create a lightweight instance just to call GetResourceDisplayName
+            const tempInstance = new resourceReg.SubClass();
+            const displayName = await tempInstance.GetResourceDisplayName(resourceData);
+            if (displayName && displayName !== tab.title) {
+                console.log('[TabContainer.updateTabDisplayName] Updating tab title:', {
+                    tabId: tab.id,
+                    from: tab.title,
+                    to: displayName
+                });
+                // Update the tab title in Golden Layout
+                this.layoutManager.UpdateTabStyle(tab.id, { title: displayName });
+                // Update the tab title in workspace configuration for persistence
+                this.workspaceManager.UpdateTabTitle(tab.id, displayName);
+            }
+        }
+        catch (error) {
+            console.error('[TabContainer.updateTabDisplayName] Error updating tab display name:', error);
+        }
+    }
+    /**
+     * Update tab title with resource display name after resource loads
+     */
+    async updateTabTitleFromResource(tabId, resourceComponent, resourceData) {
+        try {
+            console.log('[TabContainer.updateTabTitleFromResource] Getting display name for tab:', tabId);
+            // Get the display name from the resource component
+            const displayName = await resourceComponent.GetResourceDisplayName(resourceData);
+            console.log('[TabContainer.updateTabTitleFromResource] Got display name:', displayName);
+            if (!displayName) {
+                console.log('[TabContainer.updateTabTitleFromResource] No display name returned, keeping current title');
+                return;
+            }
+            // Update the tab title in Golden Layout
+            this.layoutManager.UpdateTabStyle(tabId, { title: displayName });
+            console.log('[TabContainer.updateTabTitleFromResource] Updated Golden Layout tab title to:', displayName);
+            // Update the tab title in workspace configuration for persistence
+            this.workspaceManager.UpdateTabTitle(tabId, displayName);
+            console.log('[TabContainer.updateTabTitleFromResource] Updated workspace configuration tab title');
+        }
+        catch (error) {
+            console.error('[TabContainer.updateTabTitleFromResource] Error updating tab title:', error);
+        }
+    }
+    /**
+     * Convert tab configuration to ResourceData
+     */
+    async getResourceDataFromTab(tab) {
+        const config = tab.configuration;
+        // Extract resource type from configuration or route
+        let resourceType = config['resourceType'];
+        if (!resourceType && config['route']) {
+            // Parse route to determine resource type
+            resourceType = this.getResourceTypeFromRoute(config['route']);
+        }
+        if (!resourceType) {
+            console.error('[TabContainer.getResourceDataFromTab] No resourceType found in config or route');
+            return null;
+        }
+        // Determine the driver class to use for component instantiation
+        let driverClass = resourceType; // Default: use resourceType as driver class
+        // For Custom resource type, get DriverClass from configuration or ResourceType metadata
+        if (resourceType.toLowerCase() === 'custom') {
+            // Custom resource type uses NavItem's DriverClass
+            driverClass = config['driverClass'];
+            if (!driverClass) {
+                LogError('Custom resource type requires driverClass in configuration');
+                console.error('[TabContainer.getResourceDataFromTab] Missing driverClass for Custom resource type');
+                return null;
+            }
+        }
+        else {
+            // For standard resource types, look up DriverClass from metadata
+            const resourceTypeEntity = await this.getResourceTypeEntity(resourceType);
+            if (resourceTypeEntity?.DriverClass) {
+                driverClass = resourceTypeEntity.DriverClass;
+            }
+            // If no DriverClass in metadata, fall back to resourceType (backward compatibility)
+        }
+        // Include applicationId and driverClass in configuration
+        const resourceConfig = {
+            ...config,
+            applicationId: tab.applicationId,
+            resourceTypeDriverClass: driverClass // Store resolved driver class for component lookup
+        };
+        // Get ResourceRecordID from config or fall back to tab.resourceRecordId
+        // Important: Some tabs store the record ID in config['recordId'], others in tab.resourceRecordId
+        const resourceRecordId = config['recordId'] || tab.resourceRecordId || '';
+        const resourceData = new ResourceData({
+            ResourceTypeID: await this.getResourceTypeId(resourceType),
+            ResourceRecordID: resourceRecordId,
+            Configuration: resourceConfig
+        });
+        return resourceData;
+    }
+    static _resourceTypesDataset = null;
+    /**
+     * Get ResourceType entity by name (includes DriverClass field)
+     */
+    async getResourceTypeEntity(resourceType) {
+        const md = new Metadata();
+        const ds = TabContainerComponent._resourceTypesDataset || await md.GetDatasetByName("ResourceTypes");
+        if (!ds || !ds.Success || ds.Results.length === 0) {
+            return null;
+        }
+        if (!TabContainerComponent._resourceTypesDataset) {
+            TabContainerComponent._resourceTypesDataset = ds; // cache for next time
+        }
+        const result = ds.Results.find(r => r.Code.trim().toLowerCase() === 'resourcetypes');
+        if (result && result.Results?.length > 0) {
+            const rt = result.Results.find(rt => rt.Name.trim().toLowerCase() === resourceType.trim().toLowerCase());
+            return rt || null;
+        }
+        return null;
+    }
+    async getResourceTypeId(resourceType) {
+        const rt = await this.getResourceTypeEntity(resourceType);
+        if (rt) {
+            return rt.ID;
+        }
+        throw new Error(`ResourceType ID not found for type: ${resourceType}`);
+    }
+    /**
+     * Determine resource type from route
+     */
+    getResourceTypeFromRoute(route) {
+        // Parse route segments to determine resource type
+        const segments = route.split('/').filter(s => s);
+        if (segments.length === 0) {
+            return 'home';
+        }
+        // Common route patterns
+        if (route.includes('/record/')) {
+            return 'record';
+        }
+        if (route.includes('/view/')) {
+            return 'view';
+        }
+        if (route.includes('/dashboard/')) {
+            return 'dashboard';
+        }
+        if (route.includes('/report/')) {
+            return 'report';
+        }
+        if (route.includes('/search')) {
+            return 'search';
+        }
+        if (route.includes('/query/')) {
+            return 'query';
+        }
+        // Default based on first segment
+        return segments[0] || 'home';
+    }
+    /**
+     * Cleanup a tab's component
+     * Detaches from DOM but keeps in cache for potential reuse
+     */
+    cleanupTabComponent(tabId) {
+        // First, try to detach from cache (preserves component for reuse)
+        const cachedInfo = this.cacheManager.markAsDetached(tabId);
+        if (cachedInfo) {
+            console.log(`📎 Detached component from tab ${tabId}, available for reuse`);
+            // Remove from legacy componentRefs but keep in cache
+            this.componentRefs.delete(tabId);
+        }
+        else {
+            // Fallback: destroy if not in cache (shouldn't happen in normal flow)
+            const componentRef = this.componentRefs.get(tabId);
+            if (componentRef) {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+                this.componentRefs.delete(tabId);
+            }
+        }
+    }
+    /**
+     * Sync tabs with configuration changes
+     */
+    syncTabsWithConfiguration(tabs) {
+        // Get existing tab IDs from Golden Layout
+        const existingTabIds = this.layoutManager.GetAllTabIds();
+        // Get tab IDs from configuration
+        const configTabIds = tabs.map(tab => tab.id);
+        // Remove tabs that are no longer in configuration
+        existingTabIds.forEach(tabId => {
+            if (!configTabIds.includes(tabId)) {
+                console.log('[TabContainer.syncTabsWithConfiguration] Removing tab not in config:', tabId);
+                this.layoutManager.RemoveTab(tabId);
+            }
+        });
+        // Create tabs that don't exist yet
+        tabs.forEach(tab => {
+            if (!existingTabIds.includes(tab.id)) {
+                this.createTab(tab);
+            }
+            else {
+                // Check if tab content needs to be reloaded (app or resource type changed)
+                const existingComponentRef = this.componentRefs.get(tab.id);
+                if (existingComponentRef) {
+                    const existingResourceData = existingComponentRef.instance.Data;
+                    // For Custom resource types, also check driverClass to distinguish between different custom resources
+                    const existingDriverClass = existingResourceData?.Configuration?.driverClass || existingResourceData?.Configuration?.resourceTypeDriverClass;
+                    const newDriverClass = tab.configuration['driverClass'] || tab.configuration['resourceTypeDriverClass'];
+                    // Normalize record IDs for comparison (treat null/undefined as empty string)
+                    // IMPORTANT: Check both tab.resourceRecordId AND tab.configuration['recordId']
+                    // because for nav items, the recordId is stored in configuration, not resourceRecordId
+                    const existingRecordId = existingResourceData?.ResourceRecordID || '';
+                    const newRecordId = tab.resourceRecordId || tab.configuration['recordId'] || '';
+                    const needsReload = existingResourceData?.ResourceType !== tab.configuration['resourceType'] ||
+                        existingResourceData?.Configuration?.applicationId !== tab.applicationId ||
+                        existingRecordId !== newRecordId ||
+                        (tab.configuration['resourceType'] === 'Custom' && existingDriverClass !== newDriverClass);
+                    if (needsReload) {
+                        console.log('[TabContainer.syncTabsWithConfiguration] Tab content changed, reloading:', {
+                            tabId: tab.id,
+                            title: tab.title,
+                            existingRecordId,
+                            newRecordId,
+                            configRecordId: tab.configuration['recordId'],
+                            recordIdChanged: existingRecordId !== newRecordId
+                        });
+                        // Clean up old component
+                        this.cleanupTabComponent(tab.id);
+                        // Mark tab as not loaded so it will reload when shown
+                        this.layoutManager.MarkTabNotLoaded(tab.id);
+                        // Update display name in background
+                        this.updateTabDisplayName(tab);
+                        // If this tab is currently active, reload it immediately
+                        const config = this.workspaceManager.GetConfiguration();
+                        if (config?.activeTabId === tab.id) {
+                            const glContainer = this.layoutManager.GetContainer(tab.id);
+                            if (glContainer) {
+                                this.loadTabContent(tab.id, glContainer);
+                            }
+                        }
+                    }
+                }
+                // Update styling for existing tabs
+                const app = this.appManager.GetAppById(tab.applicationId);
+                this.layoutManager.UpdateTabStyle(tab.id, {
+                    isPinned: tab.isPinned,
+                    title: tab.title,
+                    appColor: app?.GetColor() || '#757575'
+                });
+            }
+        });
+        // Focus the active tab
+        const config = this.workspaceManager.GetConfiguration();
+        if (config?.activeTabId) {
+            this.layoutManager.FocusTab(config.activeTabId);
+        }
+    }
+    /**
+     * Show context menu
+     */
+    showContextMenu(x, y, tabId) {
+        this.contextMenuX = x;
+        this.contextMenuY = y;
+        this.contextMenuTabId = tabId;
+        this.contextMenuVisible = true;
+        // Close menu when clicking outside - use setTimeout to avoid immediate trigger
+        setTimeout(() => {
+            const clickHandler = (event) => {
+                const target = event.target;
+                if (!target.closest('.context-menu')) {
+                    this.hideContextMenu();
+                    document.removeEventListener('click', clickHandler);
+                    document.removeEventListener('keydown', keyHandler);
+                }
+            };
+            const keyHandler = (event) => {
+                if (event.key === 'Escape') {
+                    this.hideContextMenu();
+                    document.removeEventListener('click', clickHandler);
+                    document.removeEventListener('keydown', keyHandler);
+                }
+            };
+            document.addEventListener('click', clickHandler);
+            document.addEventListener('keydown', keyHandler);
+        }, 0);
+    }
+    /**
+     * Hide context menu
+     */
+    hideContextMenu() {
+        this.contextMenuVisible = false;
+        this.contextMenuTabId = null;
+    }
+    /**
+     * Check if context menu tab is pinned
+     */
+    get isContextTabPinned() {
+        if (!this.contextMenuTabId)
+            return false;
+        const tab = this.workspaceManager.GetTab(this.contextMenuTabId);
+        return tab?.isPinned || false;
+    }
+    /**
+     * Toggle pin from context menu
+     */
+    onContextPin() {
+        if (this.contextMenuTabId) {
+            this.workspaceManager.TogglePin(this.contextMenuTabId);
+        }
+        this.hideContextMenu();
+    }
+    /**
+     * Close tab from context menu
+     */
+    onContextClose() {
+        if (this.contextMenuTabId) {
+            this.layoutManager.RemoveTab(this.contextMenuTabId);
+        }
+        this.hideContextMenu();
+    }
+    /**
+     * Close all other tabs from context menu
+     */
+    onContextCloseOthers() {
+        console.log('[TabContainer.onContextCloseOthers] Called with tabId:', this.contextMenuTabId);
+        if (this.contextMenuTabId) {
+            const config = this.workspaceManager.GetConfiguration();
+            console.log('[TabContainer.onContextCloseOthers] Current tabs:', config?.tabs.length);
+            this.workspaceManager.CloseOtherTabs(this.contextMenuTabId);
+        }
+        this.hideContextMenu();
+    }
+    /**
+     * Close tabs to the right from context menu
+     */
+    onContextCloseToRight() {
+        console.log('[TabContainer.onContextCloseToRight] Called with tabId:', this.contextMenuTabId);
+        if (this.contextMenuTabId) {
+            const config = this.workspaceManager.GetConfiguration();
+            console.log('[TabContainer.onContextCloseToRight] Current tabs:', config?.tabs.length);
+            this.workspaceManager.CloseTabsToRight(this.contextMenuTabId);
+        }
+        this.hideContextMenu();
+    }
+    static ɵfac = function TabContainerComponent_Factory(t) { return new (t || TabContainerComponent)(i0.ɵɵdirectiveInject(i1.GoldenLayoutManager), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i1.ApplicationManager), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(i0.EnvironmentInjector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabContainerComponent, selectors: [["mj-tab-container"]], viewQuery: function TabContainerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.glContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.directContentContainer = _t.first);
+        } }, decls: 4, vars: 2, consts: [["directContentContainer", ""], ["glContainer", ""], [1, "tab-container"], [1, "direct-content-container"], [1, "gl-container"], ["class", "context-menu", 3, "left", "top", 4, "ngIf"], [1, "context-menu"], [1, "context-menu-item", 3, "click"], [1, "fa-solid", "fa-thumbtack"], [1, "context-menu-divider"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-angles-right"]], template: function TabContainerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵtemplate(1, TabContainerComponent_Conditional_1_Template, 2, 0, "div", 3)(2, TabContainerComponent_Conditional_2_Template, 2, 0, "div", 4)(3, TabContainerComponent_div_3_Template, 18, 5, "div", 5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.useSingleResourceMode ? 1 : 2);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.contextMenuVisible);
+        } }, dependencies: [i2.NgIf], styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: white;\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: white;\n  color: #333;\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #424242;\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: #757575;\n}\n\n.context-menu .context-menu-item:hover {\n  background: #f5f5f5;\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: #e0e0e0;\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\nmj-tab-container .lm_content {\n  background: white !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: white !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: #f5f5f5 !important;\n  border-bottom: 1px solid #ebebeb !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid #ebebeb !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: #e8e8e8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: white !important;\n  height: 37px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid #ebebeb !important;\n  border-bottom-color: white !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: #757575 !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: #c62828 !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabContainerComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-tab-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-container\">\n\n  <!-- Single-Resource Mode: Direct component rendering without Golden Layout -->\n  <!-- This avoids the 20px height issue when GL header is hidden -->\n  @if (useSingleResourceMode) {\n    <div #directContentContainer class=\"direct-content-container\"></div>\n  } @else {\n    <!-- Multi-Tab Mode: Golden Layout Container -->\n    <div #glContainer class=\"gl-container\"></div>\n  }\n\n  <!-- Context Menu (only relevant in multi-tab mode) -->\n  <div\n    class=\"context-menu\"\n    *ngIf=\"contextMenuVisible\"\n    [style.left.px]=\"contextMenuX\"\n    [style.top.px]=\"contextMenuY\">\n    <div class=\"context-menu-item\" (click)=\"onContextPin()\">\n      <i class=\"fa-solid fa-thumbtack\"></i>\n      <span>{{ isContextTabPinned ? 'Unpin Tab' : 'Pin Tab' }}</span>\n    </div>\n    <div class=\"context-menu-divider\"></div>\n    <div class=\"context-menu-item\" (click)=\"onContextClose()\">\n      <i class=\"fa-solid fa-xmark\"></i>\n      <span>Close Tab</span>\n    </div>\n    <div class=\"context-menu-item\" (click)=\"onContextCloseOthers()\">\n      <i class=\"fa-solid fa-layer-group\"></i>\n      <span>Close Others</span>\n    </div>\n    <div class=\"context-menu-item\" (click)=\"onContextCloseToRight()\">\n      <i class=\"fa-solid fa-angles-right\"></i>\n      <span>Close to Right</span>\n    </div>\n  </div>\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.tab-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.gl-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: white;\n}\n\n/* Direct content container for single-resource mode */\n/* Renders components directly without Golden Layout overhead */\n.direct-content-container {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  overflow: hidden;\n}\n\n.tab-content-container {\n  background: white;\n  color: #333;\n  padding: 20px;\n}\n\n/* Context Menu */\n.context-menu {\n  position: fixed;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 150px;\n  z-index: 10001;\n  overflow: hidden;\n}\n\n.context-menu .context-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #424242;\n  transition: background 0.15s;\n}\n\n.context-menu .context-menu-item i {\n  width: 16px;\n  text-align: center;\n  color: #757575;\n}\n\n.context-menu .context-menu-item:hover {\n  background: #f5f5f5;\n}\n\n.context-menu .context-menu-divider {\n  height: 1px;\n  background: #e0e0e0;\n  margin: 4px 0;\n}\n\n/* Override Golden Layout styles */\n/* Global overrides */\nmj-tab-container .lm_content {\n  background: white !important;\n}\n\nmj-tab-container .lm_item_container {\n  background: white !important;\n}\n\n/* Tab content wrapper - allow scrolling */\n.tab-content-wrapper {\n  overflow: auto !important;\n}\n\n/* Make tabs larger and easier to click */\nmj-tab-container .lm_header {\n  height: 38px !important;\n  padding-top: 2px !important;\n  padding-left: 4px !important;\n  background: #f5f5f5 !important;\n  border-bottom: 1px solid #ebebeb !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\nmj-tab-container .lm_tabs {\n  height: 36px !important;\n}\n\n/* Hide Golden Layout window controls */\nmj-tab-container .lm_controls {\n  display: none !important;\n}\n\nmj-tab-container .lm_header .lm_tab {\n  padding: 0 16px !important;\n  font-size: 13px !important;\n  height: 35px !important;\n  line-height: 35px !important;\n  box-sizing: border-box !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  background: transparent !important;\n  border: none !important;\n  border-bottom: 1px solid #ebebeb !important;\n  transition: all 0.15s ease !important;\n  position: relative !important;\n  z-index: 1 !important;\n  margin-right: 1px !important;\n}\n\n/* App color accent - left edge indicator */\nmj-tab-container .lm_header .lm_tab::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 0 !important;\n  top: 4px !important;\n  bottom: 4px !important;\n  width: 3px !important;\n  border-radius: 0 2px 2px 0 !important;\n  background-color: var(--app-color, transparent) !important;\n  opacity: 0.6 !important;\n  transition: all 0.15s ease !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover {\n  background: #e8e8e8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\nmj-tab-container .lm_header .lm_tab:hover::before {\n  opacity: 0.8 !important;\n}\n\nmj-tab-container .lm_header .lm_tab.lm_active {\n  background: white !important;\n  height: 37px !important;\n  margin-bottom: -1px !important;\n  margin-right: 0 !important;\n  border: 1px solid #ebebeb !important;\n  border-bottom-color: white !important;\n  border-radius: 4px 4px 0 0 !important;\n  z-index: 2 !important;\n}\n\n/* Enhanced app color accent for active tab */\nmj-tab-container .lm_header .lm_tab.lm_active::before {\n  opacity: 1 !important;\n  width: 3px !important;\n  top: 2px !important;\n  bottom: 2px !important;\n  box-shadow: 0 0 6px var(--app-color, transparent) !important;\n}\n\nmj-tab-container .lm_title {\n  cursor: pointer !important;\n  user-select: none !important;\n}\n\nmj-tab-container .lm_close_tab {\n  position: absolute !important;\n  right: 4px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 16px !important;\n  height: 16px !important;\n  cursor: pointer !important;\n  opacity: 0 !important;\n  transition: all 0.15s ease !important;\n  flex-shrink: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  font-size: 10px !important;\n  color: #757575 !important;\n}\n\nmj-tab-container .lm_close_tab:hover {\n  opacity: 1 !important;\n  color: #c62828 !important;\n}\n\n/* Show close button on hover (except pinned) */\nmj-tab-container .lm_header .lm_tab:hover:not(.pinned) .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Pinned tabs never show close button */\nmj-tab-container .lm_header .lm_tab.pinned .lm_close_tab {\n  display: none !important;\n}\n\n/* Hide close button on active tab by default */\nmj-tab-container .lm_active .lm_close_tab {\n  opacity: 0 !important;\n}\n\n/* Show close button when hovering active tab */\nmj-tab-container .lm_active:hover .lm_close_tab {\n  opacity: 0.7 !important;\n}\n\n/* Adjust padding for close button */\nmj-tab-container .lm_header .lm_tab {\n  padding-right: 24px !important;\n}\n"] }]
+    }], () => [{ type: i1.GoldenLayoutManager }, { type: i1.WorkspaceStateManager }, { type: i1.ApplicationManager }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: i0.ChangeDetectorRef }], { glContainer: [{
+            type: ViewChild,
+            args: ['glContainer', { static: false }]
+        }], directContentContainer: [{
+            type: ViewChild,
+            args: ['directContentContainer', { static: false }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabContainerComponent, { className: "TabContainerComponent", filePath: "src/lib/shell/components/tabs/tab-container.component.ts", lineNumber: 46 }); })();
+//# sourceMappingURL=tab-container.component.js.map