@memberjunction/ng-dashboard-viewer 6.2.0-edge.2 → 6.2.0-edge.4

package/dist/lib/dashboard-viewer/dashboard-viewer.component.js

@@ -6,6 +6,7 @@ import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { DashboardEngine } from '@memberjunction/core-entities';
 import { CreateDefaultDashboardConfig, GeneratePanelId, ExtractPanelsFromLayout, FindPanelInLayout } from '../models/dashboard-types';
 import { GoldenLayoutWrapperService } from '../services/golden-layout-wrapper.service';
+import { InsertPanel, FindPanelPath, DescribePath } from '../models/dashboard-layout-editor';
 import { BaseDashboardPart } from '../parts/base-dashboard-part';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
@@ -110,13 +111,15 @@ function DashboardViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1)
 function DashboardViewerComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-empty-state", 27);
-    i0.ɵɵlistener("Action", function DashboardViewerComponent_Conditional_6_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddPanelClick()); });
+    i0.ɵɵlistener("Action", function DashboardViewerComponent_Conditional_6_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAddPanelClick()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ActionText", ctx_r1.isEditing ? "Add Your First Part" : "");
+    i0.ɵɵproperty("ActionText", ctx_r1.IsEditing || ctx_r1.CanEdit ? "Add part" : "");
 } }
 const LAYOUT_CONTAINER_SIZE_TIMEOUT_MS = 10_000;
+/** Time a layout build waits after its parts are created, before its final size update. */
+const LAYOUT_SETTLE_DELAY_MS = 100;
 /**
  * Main dashboard viewer component.
  * Renders a configurable dashboard with draggable/resizable panels using Golden Layout.
@@ -179,7 +182,6 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         this._isEditing = value;
         // When isEditing changes (and layout exists), reinitialize to apply GL settings
         if (value !== previous && this._glService) {
-            console.log('[DashboardViewer] isEditing changed from', previous, 'to', value);
             this.updatePanelEditModes();
         }
     }
@@ -194,6 +196,11 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     set isEditing(value) {
         this.IsEditing = value;
     }
+    /**
+     * Whether the user may edit this dashboard. An empty dashboard then offers Add part in view mode
+     * too; the host decides how to get into edit mode.
+     */
+    CanEdit = false;
     /** Whether to show the toolbar */
     _showToolbar = true;
     set ShowToolbar(value) {
@@ -405,6 +412,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     set hasUnsavedChanges(value) {
         this.HasUnsavedChanges = value;
     }
+    /** The saved configuration (UIConfigDetails) the layout was loaded from or last saved as. */
+    _loadedConfigDetails = null;
     /**
      * Helper to check if layout has any panels (for template use).
      * Panels are stored in componentState within the layout tree.
@@ -425,7 +434,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     _resolveLayoutReady = null;
     _rejectLayoutReady = null;
     _layoutInitGeneration = 0;
-    _layoutReadyTimer = null;
+    /** Number of the latest layout build. A build that is no longer the latest stops at its next step. */
+    _layoutBuild = 0;
     _resolveDeferredLayoutInit = null;
     _rejectDeferredLayoutInit = null;
     _deferredLayoutInitTimer = null;
@@ -450,7 +460,6 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         const generation = this._layoutInitGeneration;
         this.resolveLayoutReady(generation);
         this._layoutInitGeneration++;
-        this.clearLayoutReadyTimer();
         this.cancelDeferredLayoutInit();
         this.destroyLayout();
     }
@@ -470,17 +479,19 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         return this.ToggleEditMode();
     }
     /**
-     * Add a new panel to the dashboard.
-     * The panel is stored in GL's componentState - no separate panels array.
+     * Adds a panel and returns its id, or null when nothing was added (no layout yet, or an unknown
+     * part type). With a location, the layout editor places the panel there and the layout is
+     * rebuilt; without one, Golden Layout adds the panel to its first stack.
+     * @throws LayoutEditError when the location is not valid or names a panel that is not in the layout.
      */
     async AddPanel(partTypeId, panelConfig, title, icon, location) {
         if (!this.config || !this._glService) {
-            return;
+            return null;
         }
         const partType = this.PartTypes.find(pt => UUIDsEqual(pt.ID, partTypeId));
         if (!partType) {
             this.error.emit({ message: `Unknown panel type: ${partTypeId}` });
-            return;
+            return null;
         }
         const panel = {
             id: GeneratePanelId(),
@@ -489,15 +500,19 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             icon: icon || partType.Icon || 'fa-solid fa-window-maximize',
             config: panelConfig
         };
+        if (location) {
+            await this.ApplyLayout(InsertPanel(this._glService.getLayoutConfig() ?? this.config.layout, panel, location));
+            return panel.id;
+        }
         // Add to Golden Layout - panel data stored in componentState
-        this._glService.addPanel(panel, location);
+        this._glService.addPanel(panel);
         // Sync the layout config from Golden Layout to capture the new panel
-        // The layout IS the source of truth - it contains the panel in componentState
         const currentLayout = this._glService.getLayoutConfig();
         if (currentLayout) {
             this.config.layout = currentLayout;
         }
         this.markDirty();
+        return panel.id;
     }
     /** @deprecated Use {@link AddPanel}. */
     async addPanel(partTypeId, panelConfig, title, icon, location) {
@@ -546,6 +561,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             const saved = await this._dashboard.Save();
             if (saved) {
                 this.HasUnsavedChanges = false;
+                this._loadedConfigDetails = this._dashboard.UIConfigDetails ?? null;
                 this.DashboardSaved.emit(this._dashboard);
             }
             return saved;
@@ -573,6 +589,32 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     async refreshAllPanels() {
         return this.RefreshAllPanels();
     }
+    /**
+     * Shows `layout`: stores it as the dashboard's layout, rebuilds the panels, marks the dashboard
+     * changed and emits a `layout` config change. Build the layout with the layout editor functions.
+     * Rejects when the rebuild fails, for example when the container stays at zero size.
+     */
+    async ApplyLayout(layout) {
+        if (!this.config)
+            return;
+        this.config.layout = layout;
+        try {
+            if (this._glService) {
+                await this.initializeLayout();
+            }
+        }
+        finally {
+            // After the rebuild, so an auto-save reads the new layout back from Golden Layout.
+            // The layout has changed even when the rebuild fails.
+            this.markDirty();
+        }
+        this.configChanged.emit({ config: this.config, changeType: 'layout' });
+    }
+    /** The panel's address in the layout, for example `row/1 › tab 0`, or null when it is not in the layout. */
+    GetPanelPath(panelId) {
+        const path = FindPanelPath(this.config?.layout ?? null, panelId);
+        return path ? DescribePath(path) : null;
+    }
     /**
      * Resolves when the current dashboard's Golden Layout instance has initialized
      * against a non-zero container and completed its first size update.
@@ -584,6 +626,42 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     waitForLayoutReady() {
         return this.WaitForLayoutReady();
     }
+    /**
+     * True when the dashboard's saved layout differs from the one this viewer last loaded or saved,
+     * for example after another tab saved the dashboard.
+     * @param dashboard A saved copy of the shown dashboard. Defaults to the shown dashboard.
+     */
+    HasNewerSavedLayout(dashboard = this._dashboard) {
+        return !!dashboard && (dashboard.UIConfigDetails ?? null) !== this._loadedConfigDetails;
+    }
+    /**
+     * Shows the dashboard's saved layout again and drops unsaved layout changes. The current layout
+     * is removed at once, so an edit-mode change made right after the call applies to the new
+     * layout. A hidden viewer builds the layout when its container gets a size, with no time limit.
+     * @param dashboard A saved copy of the shown dashboard to show instead. Defaults to the shown dashboard.
+     */
+    ReloadFromSaved(dashboard = this._dashboard) {
+        if (!dashboard) {
+            return Promise.resolve();
+        }
+        this._dashboard = dashboard;
+        this.HasUnsavedChanges = false;
+        this.destroyLayout();
+        return this.onDashboardChanged(false);
+    }
+    /**
+     * Takes another copy of the shown dashboard without rebuilding the layout, for example after
+     * DashboardEngine reloaded its dashboards. Later saves write that copy. Returns false, and changes
+     * nothing, when the copy is of another dashboard or its saved layout differs from the one this
+     * viewer last loaded or saved (use ReloadFromSaved then).
+     */
+    UseSavedCopy(dashboard) {
+        if (!this._dashboard || !UUIDsEqual(dashboard.ID, this._dashboard.ID) || this.HasNewerSavedLayout(dashboard)) {
+            return false;
+        }
+        this._dashboard = dashboard;
+        return true;
+    }
     /**
      * Get the current configuration
      */
@@ -628,8 +706,9 @@ export class DashboardViewerComponent extends BaseAngularComponent {
      * Update a panel's configuration.
      * Since panels live in componentState within the layout, we need to
      * update the layout tree directly or reinitialize with updated data.
+     * Resolves once the layout is rebuilt with the updated panel; rejects when the rebuild fails.
      */
-    UpdatePanelConfig(panelId, newConfig, title, icon) {
+    async UpdatePanelConfig(panelId, newConfig, title, icon) {
         if (!this.config || !this._glService)
             return;
         // Get current layout which contains all panel data
@@ -641,7 +720,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         this.config.layout = currentLayout;
         this.markDirty();
         // Reinitialize layout to reflect the updated panel
-        this.initializeLayout();
+        await this.initializeLayout();
     }
     /** @deprecated Use {@link UpdatePanelConfig}. */
     updatePanelConfig(panelId, newConfig, title, icon) {
@@ -696,7 +775,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         return this.OnAddPanelClick();
     }
     /**
-     * Handle "Open in Tab" button click - emits event for parent to open dashboard in its own tab
+     * Handle "Open in Tab" button click - emits event for the parent to open the dashboard in a dashboard tab
      */
     OnOpenInTabClick() {
         if (this._dashboard) {
@@ -756,13 +835,19 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
-    async onDashboardChanged() {
+    /**
+     * Builds the layout from the dashboard's saved configuration.
+     * @param limitSizeWait When true, a container that stays at zero size fails the build after
+     * LAYOUT_CONTAINER_SIZE_TIMEOUT_MS. When false, the build waits until the container gets a size.
+     */
+    async onDashboardChanged(limitSizeWait = true) {
         if (!this._dashboard)
             return;
         const generation = this.startLayoutReadyCycle();
         try {
             // Parse or create config
             this.config = this.parseOrCreateConfig();
+            this._loadedConfigDetails = this._dashboard.UIConfigDetails ?? null;
             // Wait for part types to be loaded before initializing layout
             // This ensures partTypes array is populated when createPanelComponent is called
             if (this._partTypesLoaded) {
@@ -773,7 +858,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 return;
             }
             // Initialize layout
-            await this.initializeLayout(generation);
+            await this.initializeLayout(generation, limitSizeWait);
         }
         catch (err) {
             const error = err instanceof Error ? err : new Error(String(err));
@@ -803,10 +888,11 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     // ========================================
     // Private Methods - Layout
     // ========================================
-    async initializeLayout(generation = this._layoutInitGeneration) {
+    async initializeLayout(generation = this._layoutInitGeneration, limitSizeWait = true) {
         if (!this.config || !this.LayoutContainer?.nativeElement) {
             return;
         }
+        const build = ++this._layoutBuild;
         const el = this.LayoutContainer.nativeElement;
         const rect = el.getBoundingClientRect();
         if (rect.width === 0 || rect.height === 0) {
@@ -819,8 +905,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             const reason = 'layout container has zero size';
             this.emitLayoutLifecycle('waiting-for-size', reason);
             this.LayoutDeferred.emit({ reason });
-            await this.waitForLayoutContainerSize(el, generation);
-            if (generation !== this._layoutInitGeneration) {
+            await this.waitForLayoutContainerSize(el, generation, limitSizeWait);
+            if (!this.isCurrentLayoutBuild(build, generation)) {
                 return;
             }
         }
@@ -830,14 +916,15 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         // Destroy existing layout
         this.destroyLayout();
         // Create new Golden Layout service
-        this._glService = new GoldenLayoutWrapperService();
+        const glService = new GoldenLayoutWrapperService();
+        this._glService = glService;
         // Subscribe to layout events
         this.subscribeToLayoutEvents();
         const pendingPanelCreations = [];
         // Panel factory - called by GL when it binds a component
         // The panel comes directly from GL's componentState (single source of truth)
         const panelFactory = (panel, container) => {
-            const creation = this.createPanelComponent(panel, container);
+            const creation = this.createPanelComponent(panel, container, glService);
             pendingPanelCreations.push(creation.catch(error => {
                 console.error('[DashboardViewer] Failed to create panel component:', error);
             }));
@@ -854,14 +941,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         // However, Angular needs time to complete change detection and render
         // the dynamic components. A single delayed updateSize() ensures GL
         // recalculates dimensions after Angular has finished rendering.
-        await new Promise(resolve => {
-            this.clearLayoutReadyTimer();
-            this._layoutReadyTimer = setTimeout(() => {
-                this._layoutReadyTimer = null;
-                resolve();
-            }, 100);
-        });
-        if (generation !== this._layoutInitGeneration) {
+        await this.waitForLayoutToSettle();
+        if (!this.isCurrentLayoutBuild(build, generation)) {
             return;
         }
         this._glService?.updateSize();
@@ -877,8 +958,9 @@ export class DashboardViewerComponent extends BaseAngularComponent {
      * (re)initialize. Used when initializeLayout() is called while the container is
      * still 0×0 — e.g. during a cached-component reattach on browser back/forward —
      * where GoldenLayout would otherwise bind panels that never receive a 'show' event.
+     * With `limitSizeWait`, the wait fails after LAYOUT_CONTAINER_SIZE_TIMEOUT_MS.
      */
-    waitForLayoutContainerSize(el, generation) {
+    waitForLayoutContainerSize(el, generation, limitSizeWait = true) {
         this.cancelDeferredLayoutInit();
         return new Promise((resolve, reject) => {
             this._resolveDeferredLayoutInit = resolve;
@@ -900,10 +982,12 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 resolve();
                 return;
             }
-            this._deferredLayoutInitTimer = setTimeout(() => {
-                const error = new Error(`Dashboard layout container stayed at zero size for ${LAYOUT_CONTAINER_SIZE_TIMEOUT_MS}ms`);
-                this.failDeferredLayoutInit(error);
-            }, LAYOUT_CONTAINER_SIZE_TIMEOUT_MS);
+            if (limitSizeWait) {
+                this._deferredLayoutInitTimer = setTimeout(() => {
+                    const error = new Error(`Dashboard layout container stayed at zero size for ${LAYOUT_CONTAINER_SIZE_TIMEOUT_MS}ms`);
+                    this.failDeferredLayoutInit(error);
+                }, LAYOUT_CONTAINER_SIZE_TIMEOUT_MS);
+            }
             ro.observe(el);
             this._layoutSizeObserver = ro;
         });
@@ -938,9 +1022,19 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             this._deferredLayoutInitTimer = null;
         }
     }
+    /** True while the build is the latest layout build and its layout cycle is still current. */
+    isCurrentLayoutBuild(build, generation) {
+        return build === this._layoutBuild && generation === this._layoutInitGeneration;
+    }
+    /**
+     * Resolves after LAYOUT_SETTLE_DELAY_MS. Each build waits on its own timer; a build that a newer
+     * build replaced stops after the wait.
+     */
+    waitForLayoutToSettle() {
+        return new Promise(resolve => setTimeout(resolve, LAYOUT_SETTLE_DELAY_MS));
+    }
     startLayoutReadyCycle() {
         const generation = ++this._layoutInitGeneration;
-        this.clearLayoutReadyTimer();
         this.cancelDeferredLayoutInit();
         this._resolveLayoutReady?.();
         this._layoutReadyPromise = new Promise((resolve, reject) => {
@@ -967,12 +1061,6 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         this._resolveLayoutReady = null;
         this._rejectLayoutReady = null;
     }
-    clearLayoutReadyTimer() {
-        if (this._layoutReadyTimer) {
-            clearTimeout(this._layoutReadyTimer);
-            this._layoutReadyTimer = null;
-        }
-    }
     emitLayoutLifecycle(state, reason, error) {
         this.LayoutLifecycle.emit({
             state,
@@ -1016,6 +1104,20 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             .subscribe((panelId) => {
             this.onPanelSelected(panelId);
         });
+        this._glService.OnStackAction
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => this.onStackAction(event));
+    }
+    /** Asks the host to edit or remove the part a stack header button acts on. */
+    onStackAction(event) {
+        switch (event.Action) {
+            case 'edit':
+                this.onConfigurePart(event.PanelId);
+                break;
+            case 'remove':
+                this.onRemovePart(event.PanelId);
+                break;
+        }
     }
     onLayoutChanged(event) {
         if (this.config) {
@@ -1054,24 +1156,27 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Create a panel component from the DashboardPanel data.
      * Panel comes directly from GL's componentState - no lookup needed.
+     * @param glService The layout that asks for the part. When it is no longer the viewer's layout
+     * once the part is created (a newer build replaced it, or it was removed), the part is destroyed.
      */
-    async createPanelComponent(panel, container) {
+    async createPanelComponent(panel, container, glService) {
         const partType = this.PartTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId));
-        // Create the panel wrapper with header and content
+        // Create the panel wrapper; the Golden Layout tab shows the part's title
         const wrapper = document.createElement('div');
         wrapper.className = 'dashboard-part-wrapper';
         wrapper.style.cssText = 'display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface);';
-        // Only show header in edit mode - GL tabs already display the title in view mode
-        if (this.IsEditing) {
-            const header = this.createPartHeader(panel, panel.id);
-            wrapper.appendChild(header);
-        }
         // Create content area
         const content = document.createElement('div');
         content.className = 'dashboard-part-content';
         content.style.cssText = 'flex: 1; overflow: auto; min-height: 0;';
         // Try to create dynamic component via ClassFactory
         const componentRef = await this.createDynamicPartComponent(panel, partType, content);
+        if (glService !== this._glService) {
+            if (componentRef) {
+                this.releasePartComponent(componentRef);
+            }
+            return;
+        }
         if (!componentRef) {
             // Fallback to static rendering if no DriverClass or component creation failed
             this.renderPartContent(panel, content, partType);
@@ -1128,90 +1233,6 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             return null;
         }
     }
-    createPartHeader(panel, panelId) {
-        const header = document.createElement('div');
-        header.className = 'dashboard-part-header';
-        header.style.cssText = `
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 12px;
-            background: var(--mj-bg-surface-card);
-            border-bottom: 1px solid var(--mj-border-default);
-            min-height: 40px;
-        `;
-        // Icon and title
-        const titleSection = document.createElement('div');
-        titleSection.style.cssText = 'display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;';
-        titleSection.innerHTML = `
-            <i class="${EscapeHTML(panel.icon || 'fa-solid fa-puzzle-piece')}" style="color: var(--mj-brand-primary); font-size: 14px;"></i>
-            <span style="font-weight: 500; font-size: 14px; color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${EscapeHTML(panel.title)}</span>
-        `;
-        header.appendChild(titleSection);
-        // Action buttons (only in edit mode)
-        if (this.IsEditing) {
-            const actions = document.createElement('div');
-            actions.style.cssText = 'display: flex; gap: 4px;';
-            // Configure button
-            const configBtn = document.createElement('button');
-            configBtn.className = 'part-action-btn';
-            configBtn.title = 'Configure';
-            configBtn.style.cssText = `
-                width: 28px;
-                height: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: none;
-                border-radius: 4px;
-                background: transparent;
-                color: var(--mj-text-secondary);
-                cursor: pointer;
-                transition: all 0.15s;
-            `;
-            configBtn.innerHTML = '<i class="fa-solid fa-cog" style="font-size: 12px;"></i>';
-            configBtn.addEventListener('click', () => this.onConfigurePart(panelId));
-            configBtn.addEventListener('mouseenter', () => {
-                configBtn.style.background = 'var(--mj-border-default)';
-                configBtn.style.color = 'var(--mj-text-primary)';
-            });
-            configBtn.addEventListener('mouseleave', () => {
-                configBtn.style.background = 'transparent';
-                configBtn.style.color = 'var(--mj-text-secondary)';
-            });
-            // Remove button
-            const removeBtn = document.createElement('button');
-            removeBtn.className = 'part-action-btn';
-            removeBtn.title = 'Remove';
-            removeBtn.style.cssText = `
-                width: 28px;
-                height: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: none;
-                border-radius: 4px;
-                background: transparent;
-                color: var(--mj-text-secondary);
-                cursor: pointer;
-                transition: all 0.15s;
-            `;
-            removeBtn.innerHTML = '<i class="fa-solid fa-times" style="font-size: 12px;"></i>';
-            removeBtn.addEventListener('click', () => this.onRemovePart(panelId));
-            removeBtn.addEventListener('mouseenter', () => {
-                removeBtn.style.background = 'color-mix(in srgb, var(--mj-status-error) 10%, transparent)';
-                removeBtn.style.color = 'var(--mj-status-error)';
-            });
-            removeBtn.addEventListener('mouseleave', () => {
-                removeBtn.style.background = 'transparent';
-                removeBtn.style.color = 'var(--mj-text-secondary)';
-            });
-            actions.appendChild(configBtn);
-            actions.appendChild(removeBtn);
-            header.appendChild(actions);
-        }
-        return header;
-    }
     renderPartContent(panel, container, partType) {
         const config = panel.config;
         switch (config?.type) {
@@ -1238,7 +1259,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--mj-text-secondary); text-align: center; padding: 24px;">
                     <i class="fa-solid fa-globe" style="font-size: 48px; color: var(--mj-text-muted); margin-bottom: 16px;"></i>
                     <h4 style="margin: 0 0 8px 0; color: var(--mj-text-primary);">No URL Configured</h4>
-                    <p style="margin: 0; font-size: 13px;">Click the configure button to set a URL for this part.</p>
+                    <p style="margin: 0; font-size: 13px;">Use Edit part to set a URL.</p>
                 </div>
             `;
             return;
@@ -1270,7 +1291,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--mj-text-secondary); text-align: center; padding: 24px;">
                     <i class="fa-solid fa-table" style="font-size: 48px; color: var(--mj-text-muted); margin-bottom: 16px;"></i>
                     <h4 style="margin: 0 0 8px 0; color: var(--mj-text-primary);">No View Selected</h4>
-                    <p style="margin: 0; font-size: 13px;">Click configure to select a view for this part.</p>
+                    <p style="margin: 0; font-size: 13px;">Use Edit part to choose a view.</p>
                 </div>
             `;
             return;
@@ -1306,7 +1327,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--mj-text-secondary); text-align: center; padding: 24px;">
                     <i class="fa-solid fa-database" style="font-size: 48px; color: var(--mj-text-muted); margin-bottom: 16px;"></i>
                     <h4 style="margin: 0 0 8px 0; color: var(--mj-text-primary);">No Query Selected</h4>
-                    <p style="margin: 0; font-size: 13px;">Click configure to select a query for this part.</p>
+                    <p style="margin: 0; font-size: 13px;">Use Edit part to choose a query.</p>
                 </div>
             `;
             return;
@@ -1340,7 +1361,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--mj-text-secondary); text-align: center; padding: 24px;">
                     <i class="fa-solid fa-cube" style="font-size: 48px; color: var(--mj-text-muted); margin-bottom: 16px;"></i>
                     <h4 style="margin: 0 0 8px 0; color: var(--mj-text-primary);">No Artifact Selected</h4>
-                    <p style="margin: 0; font-size: 13px;">Click configure to select an artifact for this part.</p>
+                    <p style="margin: 0; font-size: 13px;">Use Edit part to choose an artifact.</p>
                 </div>
             `;
             return;
@@ -1387,14 +1408,15 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         });
     }
     onRemovePart(panelId) {
-        // Emit event for parent to show confirmation dialog
+        // Emit event for parent to show confirmation dialog, with the part's title and part type name
         const panel = FindPanelInLayout(this.config?.layout ?? null, panelId);
         this.PanelInteraction.emit({
             panelId,
             interactionType: 'custom',
             payload: {
                 action: 'remove-part-requested',
-                panelTitle: panel?.title || 'this part'
+                panelTitle: panel?.title || 'this part',
+                partTypeName: this.GetPartTypeForPanel(panelId)?.Name ?? null
             }
         });
     }
@@ -1413,12 +1435,16 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         if (entry) {
             // Destroy the Angular component if present
             if (entry.componentRef) {
-                this.appRef.detachView(entry.componentRef.hostView);
-                entry.componentRef.destroy();
+                this.releasePartComponent(entry.componentRef);
             }
             this._panelComponents.delete(panelId);
         }
     }
+    /** Detaches a part component from change detection and destroys it. */
+    releasePartComponent(componentRef) {
+        this.appRef.detachView(componentRef.hostView);
+        componentRef.destroy();
+    }
     updatePanelEditModes() {
         // Update IsEditing on all dynamic components
         this._panelComponents.forEach((entry) => {
@@ -1453,7 +1479,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.LayoutContainer = _t.first);
-        } }, inputs: { Dashboard: "Dashboard", dashboard: "dashboard", DashboardId: "DashboardId", dashboardId: "dashboardId", IsEditing: "IsEditing", isEditing: "isEditing", ShowToolbar: "ShowToolbar", showToolbar: "showToolbar", AutoSave: "AutoSave", autoSave: "autoSave", ShowBreadcrumb: "ShowBreadcrumb", showBreadcrumb: "showBreadcrumb", ShowOpenInTabButton: "ShowOpenInTabButton", showOpenInTabButton: "showOpenInTabButton", ShowEditButton: "ShowEditButton", showEditButton: "showEditButton", Categories: "Categories" }, outputs: { configChanged: "configChanged", NavigationRequested: "NavigationRequested", navigationRequested: "navigationRequested", PanelInteraction: "PanelInteraction", panelInteraction: "panelInteraction", DashboardSaved: "DashboardSaved", dashboardSaved: "dashboardSaved", error: "error", EditModeChanged: "EditModeChanged", editModeChanged: "editModeChanged", BreadcrumbNavigate: "BreadcrumbNavigate", breadcrumbNavigate: "breadcrumbNavigate", OpenInTab: "OpenInTab", openInTab: "openInTab", LayoutLifecycle: "LayoutLifecycle", layoutLifecycle: "layoutLifecycle", LayoutReady: "LayoutReady", layoutReady: "layoutReady", LayoutDeferred: "LayoutDeferred", layoutDeferred: "layoutDeferred" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 8, consts: [["layoutContainer", ""], [1, "dashboard-viewer"], ["Size", "large", "RootIcon", "fa-solid fa-gauge-high", "RootLabel", "Dashboards", 3, "Categories", "CurrentCategoryId", "CurrentDashboard", "ShowDashboardName", "AllowDragDrop"], [1, "dashboard-toolbar"], [1, "loading-overlay"], [1, "layout-container"], ["Icon", "fa-solid fa-layer-group", "Title", "No parts configured", "Message", "This dashboard has no parts yet. Add your first part to start visualizing your data.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "ActionText"], ["Size", "large", "RootIcon", "fa-solid fa-gauge-high", "RootLabel", "Dashboards", 3, "Navigate", "Categories", "CurrentCategoryId", "CurrentDashboard", "ShowDashboardName", "AllowDragDrop"], [1, "toolbar-left"], [1, "dashboard-title"], [1, "toolbar-center"], [1, "unsaved-indicator"], [1, "toolbar-right"], ["title", "Open in its own tab", 1, "toolbar-button"], [1, "toolbar-button"], [1, "toolbar-button", 3, "active"], [1, "toolbar-button", "primary"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-circle"], ["title", "Open in its own tab", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"], [1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-edit"], [1, "toolbar-button", "primary", 3, "click"], [1, "fa-solid", "fa-save"], ["text", "Loading dashboard..."], ["Icon", "fa-solid fa-layer-group", "Title", "No parts configured", "Message", "This dashboard has no parts yet. Add your first part to start visualizing your data.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "Action", "ActionText"]], template: function DashboardViewerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Dashboard: "Dashboard", dashboard: "dashboard", DashboardId: "DashboardId", dashboardId: "dashboardId", IsEditing: "IsEditing", isEditing: "isEditing", CanEdit: "CanEdit", ShowToolbar: "ShowToolbar", showToolbar: "showToolbar", AutoSave: "AutoSave", autoSave: "autoSave", ShowBreadcrumb: "ShowBreadcrumb", showBreadcrumb: "showBreadcrumb", ShowOpenInTabButton: "ShowOpenInTabButton", showOpenInTabButton: "showOpenInTabButton", ShowEditButton: "ShowEditButton", showEditButton: "showEditButton", Categories: "Categories" }, outputs: { configChanged: "configChanged", NavigationRequested: "NavigationRequested", navigationRequested: "navigationRequested", PanelInteraction: "PanelInteraction", panelInteraction: "panelInteraction", DashboardSaved: "DashboardSaved", dashboardSaved: "dashboardSaved", error: "error", EditModeChanged: "EditModeChanged", editModeChanged: "editModeChanged", BreadcrumbNavigate: "BreadcrumbNavigate", breadcrumbNavigate: "breadcrumbNavigate", OpenInTab: "OpenInTab", openInTab: "openInTab", LayoutLifecycle: "LayoutLifecycle", layoutLifecycle: "layoutLifecycle", LayoutReady: "LayoutReady", layoutReady: "layoutReady", LayoutDeferred: "LayoutDeferred", layoutDeferred: "layoutDeferred" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 8, consts: [["layoutContainer", ""], [1, "dashboard-viewer"], ["Size", "large", "RootIcon", "fa-solid fa-gauge-high", "RootLabel", "Dashboards", 3, "Categories", "CurrentCategoryId", "CurrentDashboard", "ShowDashboardName", "AllowDragDrop"], [1, "dashboard-toolbar"], [1, "loading-overlay"], [1, "layout-container"], ["Icon", "fa-solid fa-table-columns", "Title", "No parts yet", "Message", "Add a view, query, artifact, or web page to get started.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "ActionText"], ["Size", "large", "RootIcon", "fa-solid fa-gauge-high", "RootLabel", "Dashboards", 3, "Navigate", "Categories", "CurrentCategoryId", "CurrentDashboard", "ShowDashboardName", "AllowDragDrop"], [1, "toolbar-left"], [1, "dashboard-title"], [1, "toolbar-center"], [1, "unsaved-indicator"], [1, "toolbar-right"], ["title", "Open in a dashboard tab", 1, "toolbar-button"], [1, "toolbar-button"], [1, "toolbar-button", 3, "active"], [1, "toolbar-button", "primary"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-circle"], ["title", "Open in a dashboard tab", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"], [1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-edit"], [1, "toolbar-button", "primary", 3, "click"], [1, "fa-solid", "fa-save"], ["text", "Loading dashboard..."], ["Icon", "fa-solid fa-table-columns", "Title", "No parts yet", "Message", "Add a view, query, artifact, or web page to get started.", "ActionIcon", "fa-solid fa-plus", 1, "dashboard-empty", 3, "Action", "ActionText"]], template: function DashboardViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, DashboardViewerComponent_Conditional_1_Template, 1, 5, "mj-dashboard-breadcrumb", 2);
             i0.ɵɵconditionalCreate(2, DashboardViewerComponent_Conditional_2_Template, 10, 6, "div", 3);
@@ -1470,12 +1496,12 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading ? 3 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!ctx.hasPanels && !ctx.isLoading ? 6 : -1);
-        } }, dependencies: [i1.LoadingComponent, i2.MJEmptyStateComponent, i3.DashboardBreadcrumbComponent], styles: ["/**\n * Dashboard Viewer Component Styles\n *\n * IMPORTANT: For Golden Layout tabs to display correctly, you must import\n * Golden Layout's CSS in your application's global styles:\n *\n *   @import 'golden-layout/dist/css/goldenlayout-base.css';\n *\n * Or add to your angular.json styles array:\n *   \"node_modules/golden-layout/dist/css/goldenlayout-base.css\"\n */\n\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.dashboard-viewer {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--dashboard-bg, var(--mj-bg-surface-card));\n}\n\n.dashboard-viewer.editing .layout-container {\n    outline: 2px dashed var(--dashboard-edit-outline, var(--mj-brand-primary));\n    outline-offset: -2px;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.dashboard-toolbar {\n    flex: 0 0 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    background: var(--dashboard-toolbar-bg, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--dashboard-border, var(--mj-border-default));\n    box-sizing: border-box;\n    z-index: 10;\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.toolbar-left {\n    flex: 1;\n}\n\n.toolbar-center {\n    flex: 0 0 auto;\n}\n\n.toolbar-right {\n    flex: 1;\n    justify-content: flex-end;\n}\n\n.dashboard-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--dashboard-title-color, var(--mj-text-primary));\n}\n\n.dashboard-title i {\n    margin-right: 8px;\n    color: var(--dashboard-title-icon, var(--mj-brand-primary));\n}\n\n.unsaved-indicator {\n    font-size: 12px;\n    color: var(--dashboard-unsaved-color, var(--mj-status-warning));\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 8px;\n}\n\n.toolbar-button {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--dashboard-button-border, var(--mj-border-strong));\n    border-radius: 4px;\n    background: var(--dashboard-button-bg, var(--mj-bg-surface));\n    color: var(--dashboard-button-color, var(--mj-text-primary));\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toolbar-button:hover {\n    background: var(--dashboard-button-hover-bg, var(--mj-bg-surface-card));\n    border-color: var(--dashboard-button-hover-border, var(--mj-border-strong));\n}\n\n.toolbar-button.active {\n    background: var(--dashboard-button-active-bg, color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n    border-color: var(--dashboard-button-active-border, var(--mj-brand-primary));\n    color: var(--dashboard-button-active-color, var(--mj-brand-primary));\n}\n\n.toolbar-button.primary {\n    background: var(--dashboard-button-primary-bg, var(--mj-brand-primary));\n    border-color: var(--dashboard-button-primary-border, var(--mj-brand-primary-hover));\n    color: var(--dashboard-button-primary-color, var(--mj-text-inverse));\n}\n\n.toolbar-button.primary:hover {\n    background: var(--dashboard-button-primary-hover-bg, var(--mj-brand-primary-hover));\n}\n\n.toolbar-button i {\n    font-size: 14px;\n}\n\n/* ========================================\n   Layout Container\n   ======================================== */\n\n/* Layout container fills remaining space in the flex column */\n.layout-container {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n/* ========================================\n   Dashboard Panel Content (our wrapper)\n   ======================================== */\n\n/* Dashboard panel wrapper (header + content) */\n:host ::ng-deep .dashboard-part-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n}\n\n/* Dashboard part header */\n:host ::ng-deep .dashboard-part-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    min-height: 40px;\n    flex-shrink: 0;\n}\n\n/* Dashboard part content */\n:host ::ng-deep .dashboard-part-content {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    z-index: 100;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* Empty state centered in the dashboard pane (mj-empty-state centers its own\n   content; absolute positioning keeps it overlaid on the layout container). */\n.dashboard-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    max-width: 400px;\n}\n\n/* ========================================\n   Panel Error State\n   ======================================== */\n\n:host ::ng-deep .panel-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 24px;\n    text-align: center;\n    color: var(--dashboard-error-color, var(--mj-status-error));\n    background: var(--dashboard-error-bg, color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface)));\n}\n\n:host ::ng-deep .panel-error i {\n    font-size: 32px;\n    margin-bottom: 12px;\n}\n\n:host ::ng-deep .panel-error span {\n    font-size: 14px;\n}\n\n/* ========================================\n   Golden Layout Overrides\n   These require ViewEncapsulation.None to work on dynamic GL elements\n   ======================================== */\n\n/* Override shell's hide-tab-bar rule that hides GL headers when dashboard is inside shell */\n/* The shell hides .lm_header when mj-tab-container has hide-tab-bar class */\n/* We need to ensure OUR Golden Layout headers are always visible */\nmj-dashboard-viewer .lm_header {\n    display: block !important;\n}\n\n/* Ensure GL root container fills available space */\nmj-dashboard-viewer .lm_goldenlayout {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-dashboard-viewer .lm_root {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-dashboard-viewer .lm_item,\nmj-dashboard-viewer .lm_content,\nmj-dashboard-viewer .lm_stack,\nmj-dashboard-viewer .lm_row,\nmj-dashboard-viewer .lm_column {\n    box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-dashboard-viewer .lm_item {\n    overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\nmj-dashboard-viewer .lm_items {\n    width: 100% !important;\n    height: calc(100% - 38px) !important; /* Account for header height (38px) */\n    box-sizing: border-box !important;\n    position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-dashboard-viewer .lm_stack.lm_maximised > .lm_items {\n    height: 100% !important;\n}\n\n/* Target the ComponentItem div inside lm_items */\nmj-dashboard-viewer .lm_items > div {\n    width: 100% !important;\n    height: 100% !important;\n    box-sizing: border-box !important;\n    flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-dashboard-viewer .lm_items > div:not([style*=\"display: none\"]) {\n    display: flex !important;\n}\n\n/* Clearfix for float-based row layout */\nmj-dashboard-viewer .lm_row::after {\n    content: \"\" !important;\n    display: table !important;\n    clear: both !important;\n}\n\n/* Force content children to respect parent bounds */\nmj-dashboard-viewer .lm_content > * {\n    max-width: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_content {\n    background: var(--mj-bg-surface) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_item_container {\n    background: var(--mj-bg-surface) !important;\n}\n\n/* Tab header styling */\nmj-dashboard-viewer .lm_header {\n    height: 38px !important;\n    padding-top: 2px !important;\n    padding-left: 4px !important;\n    background: var(--mj-bg-surface-card) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\nmj-dashboard-viewer .lm_tabs {\n    height: 36px !important;\n}\n\n/* Hide Golden Layout window controls (popout, maximize) */\nmj-dashboard-viewer .lm_controls {\n    display: none !important;\n}\n\n/* Tab styling */\nmj-dashboard-viewer .lm_header .lm_tab {\n    padding: 0 16px 0 28px !important; /* Extra left padding for icon */\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 var(--mj-border-default) !important;\n    transition: all 0.15s ease !important;\n    position: relative !important;\n    z-index: 1 !important;\n    margin-right: 1px !important;\n}\n\nmj-dashboard-viewer .lm_header .lm_tab:hover {\n    background: var(--mj-bg-surface-sunken) !important;\n}\n\nmj-dashboard-viewer .lm_header .lm_tab.lm_active {\n    background: var(--mj-bg-surface) !important;\n    height: 36px !important;\n    margin-bottom: -1px !important;\n    margin-right: 0 !important;\n    border: 1px solid var(--mj-border-default) !important;\n    border-bottom-color: var(--mj-bg-surface) !important;\n    border-radius: 4px 4px 0 0 !important;\n    z-index: 2 !important;\n}\n\nmj-dashboard-viewer .lm_title {\n    cursor: pointer !important;\n    user-select: none !important;\n}\n\n/* Panel icon styling - icon is direct child of .lm_tab to preserve GL's drag/drop */\n/* Positioned absolutely in the left padding area so it doesn't affect GL's title structure */\nmj-dashboard-viewer .lm_header .lm_tab .panel-icon {\n    position: absolute !important;\n    left: 10px !important;\n    top: 50% !important;\n    transform: translateY(-30%) !important;\n    font-family: \"Font Awesome 6 Free\", \"Font Awesome 6 Pro\", \"Font Awesome 5 Free\", \"Font Awesome 5 Pro\", FontAwesome !important;\n    font-weight: 900 !important; /* Required for solid icons */\n    font-size: 12px !important;\n    color: var(--mj-brand-primary) !important;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\nmj-dashboard-viewer .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}\n\nmj-dashboard-viewer .lm_header .lm_tab:hover .lm_close_tab {\n    opacity: 0.7 !important;\n}\n\nmj-dashboard-viewer .lm_close_tab:hover {\n    opacity: 1 !important;\n    color: var(--mj-status-error) !important;\n}\n\n/* Add padding for close button when editing */\nmj-dashboard-viewer .dashboard-viewer.editing .lm_header .lm_tab {\n    padding-right: 24px !important;\n}\n\n/* ========================================\n   View Mode (Not Editing) - Lock Layout\n   ======================================== */\n\n/* Hide close buttons on tabs when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_close_tab {\n    display: none !important;\n}\n\n/* Remove extra padding for close button when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    padding-right: 16px !important;\n}\n\n/* Disable splitter dragging when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter {\n    pointer-events: none !important;\n    cursor: default !important;\n}\n\n/* Hide splitter drag handle visual when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter .lm_drag_handle {\n    display: none !important;\n}\n\n/* Disable tab dragging cursor when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    cursor: default !important;\n}\n\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_title {\n    cursor: default !important;\n}\n"], encapsulation: 2 });
+            i0.ɵɵconditional(!ctx.HasPanels && !ctx.isLoading ? 6 : -1);
+        } }, dependencies: [i1.LoadingComponent, i2.MJEmptyStateComponent, i3.DashboardBreadcrumbComponent], styles: ["/**\n * Dashboard Viewer Component Styles\n *\n * IMPORTANT: For Golden Layout tabs to display correctly, you must import\n * Golden Layout's CSS in your application's global styles:\n *\n *   @import 'golden-layout/dist/css/goldenlayout-base.css';\n *\n * Or add to your angular.json styles array:\n *   \"node_modules/golden-layout/dist/css/goldenlayout-base.css\"\n */\n\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.dashboard-viewer {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--dashboard-bg, var(--mj-bg-surface-card));\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.dashboard-toolbar {\n    flex: 0 0 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    background: var(--dashboard-toolbar-bg, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--dashboard-border, var(--mj-border-default));\n    box-sizing: border-box;\n    z-index: 10;\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.toolbar-left {\n    flex: 1;\n}\n\n.toolbar-center {\n    flex: 0 0 auto;\n}\n\n.toolbar-right {\n    flex: 1;\n    justify-content: flex-end;\n}\n\n.dashboard-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--dashboard-title-color, var(--mj-text-primary));\n}\n\n.dashboard-title i {\n    margin-right: 8px;\n    color: var(--dashboard-title-icon, var(--mj-brand-primary));\n}\n\n.unsaved-indicator {\n    font-size: 12px;\n    color: var(--dashboard-unsaved-color, var(--mj-status-warning));\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 8px;\n}\n\n.toolbar-button {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--dashboard-button-border, var(--mj-border-strong));\n    border-radius: 4px;\n    background: var(--dashboard-button-bg, var(--mj-bg-surface));\n    color: var(--dashboard-button-color, var(--mj-text-primary));\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toolbar-button:hover {\n    background: var(--dashboard-button-hover-bg, var(--mj-bg-surface-card));\n    border-color: var(--dashboard-button-hover-border, var(--mj-border-strong));\n}\n\n.toolbar-button.active {\n    background: var(--dashboard-button-active-bg, color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n    border-color: var(--dashboard-button-active-border, var(--mj-brand-primary));\n    color: var(--dashboard-button-active-color, var(--mj-brand-primary));\n}\n\n.toolbar-button.primary {\n    background: var(--dashboard-button-primary-bg, var(--mj-brand-primary));\n    border-color: var(--dashboard-button-primary-border, var(--mj-brand-primary-hover));\n    color: var(--dashboard-button-primary-color, var(--mj-text-inverse));\n}\n\n.toolbar-button.primary:hover {\n    background: var(--dashboard-button-primary-hover-bg, var(--mj-brand-primary-hover));\n}\n\n.toolbar-button i {\n    font-size: 14px;\n}\n\n/* ========================================\n   Layout Container\n   ======================================== */\n\n/* Layout container fills remaining space in the flex column */\n.layout-container {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n/* ========================================\n   Dashboard Panel Content (our wrapper)\n   ======================================== */\n\n/* Dashboard panel wrapper (holds the part content) */\n:host ::ng-deep .dashboard-part-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n}\n\n/* Dashboard part content */\n:host ::ng-deep .dashboard-part-content {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    z-index: 100;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* Empty state centered in the dashboard pane (mj-empty-state centers its own\n   content; absolute positioning keeps it overlaid on the layout container). */\n.dashboard-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    max-width: 400px;\n}\n\n/* ========================================\n   Panel Error State\n   ======================================== */\n\n:host ::ng-deep .panel-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 24px;\n    text-align: center;\n    color: var(--dashboard-error-color, var(--mj-status-error));\n    background: var(--dashboard-error-bg, color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface)));\n}\n\n:host ::ng-deep .panel-error i {\n    font-size: 32px;\n    margin-bottom: 12px;\n}\n\n:host ::ng-deep .panel-error span {\n    font-size: 14px;\n}\n\n/* ========================================\n   Golden Layout Overrides\n   These require ViewEncapsulation.None to work on dynamic GL elements\n   ======================================== */\n\n/* Override shell's hide-tab-bar rule that hides GL headers when dashboard is inside shell */\n/* The shell hides .lm_header when mj-tab-container has hide-tab-bar class */\n/* We need to ensure OUR Golden Layout headers are always visible */\nmj-dashboard-viewer .lm_header {\n    display: block !important;\n}\n\n/* Ensure GL root container fills available space */\nmj-dashboard-viewer .lm_goldenlayout {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-dashboard-viewer .lm_root {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-dashboard-viewer .lm_item,\nmj-dashboard-viewer .lm_content,\nmj-dashboard-viewer .lm_stack,\nmj-dashboard-viewer .lm_row,\nmj-dashboard-viewer .lm_column {\n    box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-dashboard-viewer .lm_item {\n    overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks (its height is set with the stack header below) */\nmj-dashboard-viewer .lm_items {\n    width: 100% !important;\n    box-sizing: border-box !important;\n    position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-dashboard-viewer .lm_stack.lm_maximised > .lm_items {\n    height: 100% !important;\n}\n\n/* Target the ComponentItem div inside lm_items */\nmj-dashboard-viewer .lm_items > div {\n    width: 100% !important;\n    height: 100% !important;\n    box-sizing: border-box !important;\n    flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-dashboard-viewer .lm_items > div:not([style*=\"display: none\"]) {\n    display: flex !important;\n}\n\n/* Clearfix for float-based row layout */\nmj-dashboard-viewer .lm_row::after {\n    content: \"\" !important;\n    display: table !important;\n    clear: both !important;\n}\n\n/* Force content children to respect parent bounds */\nmj-dashboard-viewer .lm_content > * {\n    max-width: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_content {\n    background: var(--mj-bg-surface) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_item_container {\n    background: var(--mj-bg-surface) !important;\n}\n\n/* ===== Golden Layout: part tabs and part buttons =====\n   The shell's tab-container and theme rules reach this nested layout. These selectors add\n   .dashboard-viewer to outrank them, with !important where those rules use it. */\n\n/* Stack header: tab track on the left, part buttons on the right (DASHBOARD_STACK_HEADER_HEIGHT) */\nmj-dashboard-viewer .dashboard-viewer .lm_header {\n    display: block !important;\n    height: 44px !important;\n    max-height: none !important;            /* shell.component.css caps nested headers at 40px */\n    padding: 0 !important;\n    background: var(--mj-bg-surface) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n    z-index: auto;                          /* no stacking context, so the tab dropdown list can rise above the part */\n}\nmj-dashboard-viewer .dashboard-viewer .lm_items {\n    height: calc(100% - 44px) !important;\n}\n\n/* The tab track, styled like mj-tab-nav. Golden Layout counts each tab's width and right margin; the rest of the\n   spacing beside the tabs is DASHBOARD_TAB_CONTROL_OFFSET (78px): the track's 12px inset, 1px borders and 4px left\n   padding, an 8px gap, the 34px tab dropdown button and its 6px gap, and the controls' 12px inset. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabs {\n    top: 5px !important;\n    left: var(--mj-space-3) !important;\n    right: auto !important;                 /* shell sets left:0; right:0; overflow-x:auto */\n    height: auto !important;\n    overflow: visible !important;\n    padding: var(--mj-space-1) 0 var(--mj-space-1) var(--mj-space-1);   /* the last tab's margin closes the right side */\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: var(--mj-space-2) !important;\n    flex: 0 0 auto !important;\n    height: auto !important;\n    margin: 0 var(--mj-space-1) 0 0 !important;\n    padding: 4px var(--mj-space-3) !important;\n    font-family: inherit !important;\n    font-size: 13px !important;\n    font-weight: 500 !important;\n    line-height: 1.2 !important;\n    color: var(--mj-text-secondary) !important;\n    background: transparent !important;\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    box-shadow: none !important;\n    cursor: pointer !important;\n    transition: background-color var(--mj-transition-fast), color var(--mj-transition-fast) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab::after { content: none !important; }  /* shell pipe separators */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab:hover:not(.lm_active) {\n    background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent) !important;\n    color: var(--mj-text-primary) !important;\n}\n/* The shell's active tab rule is as specific as the tab rule above, so the tab's box is repeated here */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab.lm_active {\n    height: auto !important;\n    margin: 0 var(--mj-space-1) 0 0 !important;\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    background: var(--mj-bg-surface) !important;\n    color: var(--mj-brand-primary) !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab:focus-visible {\n    outline: 2px solid var(--mj-border-focus) !important;\n    outline-offset: -2px !important;\n}\nmj-dashboard-viewer .dashboard-viewer.editing .lm_header .lm_tab { cursor: grab !important; }\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_title {\n    cursor: inherit !important;\n    line-height: normal !important;\n    max-width: 220px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab .panel-icon {   /* the part's icon */\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    transform: none !important;\n    font-size: 13px !important;\n    color: inherit !important;\n}\n\n/* Parts are removed only through Remove (with a confirmation): hide GL's close buttons */\nmj-dashboard-viewer .dashboard-viewer .lm_close_tab,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_close,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_popout,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_maximise { display: none !important; }\n\n/* Part buttons (Edit part, Remove) in the header's controls area */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls {\n    top: 0 !important;\n    bottom: 0 !important;\n    right: var(--mj-space-3) !important;\n    z-index: 3;                  /* above tabs that run into it (the shell gives tabs 1 and 2), under the tab dropdown list */\n    align-items: center;\n    gap: 6px;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .dashboard-stack-actions {\n    display: flex !important;\n    align-items: center;\n    gap: 6px;\n    width: auto !important;      /* GL base: .lm_controls > * is 18x18 and floats */\n    height: auto !important;\n    float: none !important;\n    opacity: 1 !important;       /* MJ theme: .lm_controls > * is at 0.6 */\n    cursor: default !important;\n}\n\n/* Golden Layout's tab dropdown button, sized like the part buttons and placed left of them. It sits outside the\n   controls' measured width, because Golden Layout shows it only after it measures the tabs. Golden Layout shows\n   and hides it with an inline display, so display here carries no !important. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown {\n    display: inline-flex;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    margin: auto 6px auto 0;\n    width: 32px !important;      /* GL base: .lm_controls > * is 18x18 and floats */\n    height: 32px !important;\n    float: none !important;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    border-radius: var(--mj-radius-md);\n    color: var(--mj-text-secondary);\n    opacity: 1 !important;       /* MJ theme: .lm_controls > * is at 0.6 */\n    cursor: pointer;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown:hover {\n    background-color: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown::before {\n    content: '\\f078';            /* chevron-down, in place of GL's border triangle */\n    width: auto;\n    height: auto;\n    border: none;\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    line-height: 1;\n    color: inherit;\n}\n\n/* Tabs that do not fit: Golden Layout's tab dropdown list, as a menu below the header. Golden Layout shows and\n   hides it with an inline display, so display here carries no !important. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list {\n    display: flex;\n    flex-direction: column;\n    top: calc(100% + var(--mj-space-1));\n    right: var(--mj-space-3);\n    z-index: var(--mj-z-dropdown);\n    min-width: 200px;\n    max-height: 290px;\n    overflow-y: auto;\n    padding: var(--mj-space-1);\n    background: var(--mj-bg-surface-elevated);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    box-shadow: var(--mj-shadow-md);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_tab {\n    display: flex !important;\n    margin: 0 !important;\n    padding: 6px var(--mj-space-2) !important;\n    border-radius: var(--mj-radius-sm) !important;\n    background: transparent !important;\n    box-shadow: none !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_tab:hover:not(.lm_active) {\n    background: var(--mj-bg-surface-hover) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_title {\n    width: auto;                 /* GL base: 100px */\n}\n\n/* Each stack (a panel of part tabs) is a card */\nmj-dashboard-viewer .dashboard-viewer .lm_stack {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default) !important;\n    border-radius: var(--mj-radius-lg);\n}\n\n/* ========================================\n   View Mode (Not Editing) - Lock Layout\n   ======================================== */\n\n/* Disable splitter dragging when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter {\n    pointer-events: none !important;\n    cursor: default !important;\n}\n\n/* Hide splitter drag handle visual when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter .lm_drag_handle {\n    display: none !important;\n}\n\n/* Disable tab dragging cursor when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    cursor: default !important;\n}\n\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_title {\n    cursor: default !important;\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardViewerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-dashboard-viewer', encapsulation: ViewEncapsulation.None, template: "<!-- Dashboard Viewer Component -->\n<div class=\"dashboard-viewer\" [class.editing]=\"isEditing\" [class.has-toolbar]=\"shouldShowToolbar\">\n  <!-- Breadcrumb Navigation (hidden in edit mode) -->\n  @if (showBreadcrumb && !isEditing && dashboard) {\n    <mj-dashboard-breadcrumb\n      [Categories]=\"Categories\"\n      [CurrentCategoryId]=\"dashboard.CategoryID\"\n      [CurrentDashboard]=\"dashboard\"\n      [ShowDashboardName]=\"true\"\n      [AllowDragDrop]=\"false\"\n      Size=\"large\"\n      RootIcon=\"fa-solid fa-gauge-high\"\n      RootLabel=\"Dashboards\"\n      (Navigate)=\"onBreadcrumbNavigate($event)\">\n    </mj-dashboard-breadcrumb>\n  }\n\n  <!-- Toolbar (auto-hides when all elements are disabled) -->\n  @if (shouldShowToolbar) {\n    <div class=\"dashboard-toolbar\">\n      <div class=\"toolbar-left\">\n        @if (dashboard && (isEditing || !showBreadcrumb)) {\n          <span class=\"dashboard-title\">\n            <i class=\"fa-solid fa-chart-line\"></i>\n            {{ dashboard.Name }}\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        @if (hasUnsavedChanges && isEditing) {\n          <span class=\"unsaved-indicator\">\n            <i class=\"fa-solid fa-circle\"></i>\n            Unsaved changes\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Open in New Tab button (when embedded) -->\n        @if (showOpenInTabButton && !isEditing) {\n          <button\n            class=\"toolbar-button\"\n            (click)=\"onOpenInTabClick()\"\n            title=\"Open in its own tab\">\n            <i class=\"fa-solid fa-up-right-from-square\"></i>\n            Open in Tab\n          </button>\n        }\n        @if (isEditing) {\n          <button\n            class=\"toolbar-button\"\n            (click)=\"onAddPanelClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Part\n          </button>\n        }\n        @if (showEditButton) {\n          <button\n            class=\"toolbar-button\"\n            [class.active]=\"isEditing\"\n            (click)=\"toggleEditMode()\">\n            <i class=\"fa-solid fa-edit\"></i>\n            {{ isEditing ? 'Editing' : 'Edit' }}\n          </button>\n        }\n        @if (isEditing && hasUnsavedChanges) {\n          <button\n            class=\"toolbar-button primary\"\n            (click)=\"save()\">\n            <i class=\"fa-solid fa-save\"></i>\n            Save\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading dashboard...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Layout Container -->\n  <div class=\"layout-container\" #layoutContainer>\n    <!-- Golden Layout will render panels here -->\n  </div>\n\n  <!-- Empty State -->\n  @if (!hasPanels && !isLoading) {\n    <mj-empty-state\n      class=\"dashboard-empty\"\n      Icon=\"fa-solid fa-layer-group\"\n      Title=\"No parts configured\"\n      Message=\"This dashboard has no parts yet. Add your first part to start visualizing your data.\"\n      [ActionText]=\"isEditing ? 'Add Your First Part' : ''\"\n      ActionIcon=\"fa-solid fa-plus\"\n      (Action)=\"onAddPanelClick()\" />\n  }\n</div>\n", styles: ["/**\n * Dashboard Viewer Component Styles\n *\n * IMPORTANT: For Golden Layout tabs to display correctly, you must import\n * Golden Layout's CSS in your application's global styles:\n *\n *   @import 'golden-layout/dist/css/goldenlayout-base.css';\n *\n * Or add to your angular.json styles array:\n *   \"node_modules/golden-layout/dist/css/goldenlayout-base.css\"\n */\n\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.dashboard-viewer {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--dashboard-bg, var(--mj-bg-surface-card));\n}\n\n.dashboard-viewer.editing .layout-container {\n    outline: 2px dashed var(--dashboard-edit-outline, var(--mj-brand-primary));\n    outline-offset: -2px;\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.dashboard-toolbar {\n    flex: 0 0 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    background: var(--dashboard-toolbar-bg, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--dashboard-border, var(--mj-border-default));\n    box-sizing: border-box;\n    z-index: 10;\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.toolbar-left {\n    flex: 1;\n}\n\n.toolbar-center {\n    flex: 0 0 auto;\n}\n\n.toolbar-right {\n    flex: 1;\n    justify-content: flex-end;\n}\n\n.dashboard-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--dashboard-title-color, var(--mj-text-primary));\n}\n\n.dashboard-title i {\n    margin-right: 8px;\n    color: var(--dashboard-title-icon, var(--mj-brand-primary));\n}\n\n.unsaved-indicator {\n    font-size: 12px;\n    color: var(--dashboard-unsaved-color, var(--mj-status-warning));\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 8px;\n}\n\n.toolbar-button {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--dashboard-button-border, var(--mj-border-strong));\n    border-radius: 4px;\n    background: var(--dashboard-button-bg, var(--mj-bg-surface));\n    color: var(--dashboard-button-color, var(--mj-text-primary));\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toolbar-button:hover {\n    background: var(--dashboard-button-hover-bg, var(--mj-bg-surface-card));\n    border-color: var(--dashboard-button-hover-border, var(--mj-border-strong));\n}\n\n.toolbar-button.active {\n    background: var(--dashboard-button-active-bg, color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n    border-color: var(--dashboard-button-active-border, var(--mj-brand-primary));\n    color: var(--dashboard-button-active-color, var(--mj-brand-primary));\n}\n\n.toolbar-button.primary {\n    background: var(--dashboard-button-primary-bg, var(--mj-brand-primary));\n    border-color: var(--dashboard-button-primary-border, var(--mj-brand-primary-hover));\n    color: var(--dashboard-button-primary-color, var(--mj-text-inverse));\n}\n\n.toolbar-button.primary:hover {\n    background: var(--dashboard-button-primary-hover-bg, var(--mj-brand-primary-hover));\n}\n\n.toolbar-button i {\n    font-size: 14px;\n}\n\n/* ========================================\n   Layout Container\n   ======================================== */\n\n/* Layout container fills remaining space in the flex column */\n.layout-container {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n/* ========================================\n   Dashboard Panel Content (our wrapper)\n   ======================================== */\n\n/* Dashboard panel wrapper (header + content) */\n:host ::ng-deep .dashboard-part-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n}\n\n/* Dashboard part header */\n:host ::ng-deep .dashboard-part-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    min-height: 40px;\n    flex-shrink: 0;\n}\n\n/* Dashboard part content */\n:host ::ng-deep .dashboard-part-content {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    z-index: 100;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* Empty state centered in the dashboard pane (mj-empty-state centers its own\n   content; absolute positioning keeps it overlaid on the layout container). */\n.dashboard-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    max-width: 400px;\n}\n\n/* ========================================\n   Panel Error State\n   ======================================== */\n\n:host ::ng-deep .panel-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 24px;\n    text-align: center;\n    color: var(--dashboard-error-color, var(--mj-status-error));\n    background: var(--dashboard-error-bg, color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface)));\n}\n\n:host ::ng-deep .panel-error i {\n    font-size: 32px;\n    margin-bottom: 12px;\n}\n\n:host ::ng-deep .panel-error span {\n    font-size: 14px;\n}\n\n/* ========================================\n   Golden Layout Overrides\n   These require ViewEncapsulation.None to work on dynamic GL elements\n   ======================================== */\n\n/* Override shell's hide-tab-bar rule that hides GL headers when dashboard is inside shell */\n/* The shell hides .lm_header when mj-tab-container has hide-tab-bar class */\n/* We need to ensure OUR Golden Layout headers are always visible */\nmj-dashboard-viewer .lm_header {\n    display: block !important;\n}\n\n/* Ensure GL root container fills available space */\nmj-dashboard-viewer .lm_goldenlayout {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-dashboard-viewer .lm_root {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-dashboard-viewer .lm_item,\nmj-dashboard-viewer .lm_content,\nmj-dashboard-viewer .lm_stack,\nmj-dashboard-viewer .lm_row,\nmj-dashboard-viewer .lm_column {\n    box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-dashboard-viewer .lm_item {\n    overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks */\nmj-dashboard-viewer .lm_items {\n    width: 100% !important;\n    height: calc(100% - 38px) !important; /* Account for header height (38px) */\n    box-sizing: border-box !important;\n    position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-dashboard-viewer .lm_stack.lm_maximised > .lm_items {\n    height: 100% !important;\n}\n\n/* Target the ComponentItem div inside lm_items */\nmj-dashboard-viewer .lm_items > div {\n    width: 100% !important;\n    height: 100% !important;\n    box-sizing: border-box !important;\n    flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-dashboard-viewer .lm_items > div:not([style*=\"display: none\"]) {\n    display: flex !important;\n}\n\n/* Clearfix for float-based row layout */\nmj-dashboard-viewer .lm_row::after {\n    content: \"\" !important;\n    display: table !important;\n    clear: both !important;\n}\n\n/* Force content children to respect parent bounds */\nmj-dashboard-viewer .lm_content > * {\n    max-width: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_content {\n    background: var(--mj-bg-surface) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_item_container {\n    background: var(--mj-bg-surface) !important;\n}\n\n/* Tab header styling */\nmj-dashboard-viewer .lm_header {\n    height: 38px !important;\n    padding-top: 2px !important;\n    padding-left: 4px !important;\n    background: var(--mj-bg-surface-card) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n}\n\nmj-dashboard-viewer .lm_tabs {\n    height: 36px !important;\n}\n\n/* Hide Golden Layout window controls (popout, maximize) */\nmj-dashboard-viewer .lm_controls {\n    display: none !important;\n}\n\n/* Tab styling */\nmj-dashboard-viewer .lm_header .lm_tab {\n    padding: 0 16px 0 28px !important; /* Extra left padding for icon */\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 var(--mj-border-default) !important;\n    transition: all 0.15s ease !important;\n    position: relative !important;\n    z-index: 1 !important;\n    margin-right: 1px !important;\n}\n\nmj-dashboard-viewer .lm_header .lm_tab:hover {\n    background: var(--mj-bg-surface-sunken) !important;\n}\n\nmj-dashboard-viewer .lm_header .lm_tab.lm_active {\n    background: var(--mj-bg-surface) !important;\n    height: 36px !important;\n    margin-bottom: -1px !important;\n    margin-right: 0 !important;\n    border: 1px solid var(--mj-border-default) !important;\n    border-bottom-color: var(--mj-bg-surface) !important;\n    border-radius: 4px 4px 0 0 !important;\n    z-index: 2 !important;\n}\n\nmj-dashboard-viewer .lm_title {\n    cursor: pointer !important;\n    user-select: none !important;\n}\n\n/* Panel icon styling - icon is direct child of .lm_tab to preserve GL's drag/drop */\n/* Positioned absolutely in the left padding area so it doesn't affect GL's title structure */\nmj-dashboard-viewer .lm_header .lm_tab .panel-icon {\n    position: absolute !important;\n    left: 10px !important;\n    top: 50% !important;\n    transform: translateY(-30%) !important;\n    font-family: \"Font Awesome 6 Free\", \"Font Awesome 6 Pro\", \"Font Awesome 5 Free\", \"Font Awesome 5 Pro\", FontAwesome !important;\n    font-weight: 900 !important; /* Required for solid icons */\n    font-size: 12px !important;\n    color: var(--mj-brand-primary) !important;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\nmj-dashboard-viewer .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}\n\nmj-dashboard-viewer .lm_header .lm_tab:hover .lm_close_tab {\n    opacity: 0.7 !important;\n}\n\nmj-dashboard-viewer .lm_close_tab:hover {\n    opacity: 1 !important;\n    color: var(--mj-status-error) !important;\n}\n\n/* Add padding for close button when editing */\nmj-dashboard-viewer .dashboard-viewer.editing .lm_header .lm_tab {\n    padding-right: 24px !important;\n}\n\n/* ========================================\n   View Mode (Not Editing) - Lock Layout\n   ======================================== */\n\n/* Hide close buttons on tabs when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_close_tab {\n    display: none !important;\n}\n\n/* Remove extra padding for close button when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    padding-right: 16px !important;\n}\n\n/* Disable splitter dragging when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter {\n    pointer-events: none !important;\n    cursor: default !important;\n}\n\n/* Hide splitter drag handle visual when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter .lm_drag_handle {\n    display: none !important;\n}\n\n/* Disable tab dragging cursor when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    cursor: default !important;\n}\n\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_title {\n    cursor: default !important;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-dashboard-viewer', encapsulation: ViewEncapsulation.None, template: "<!-- Dashboard Viewer Component -->\n<div class=\"dashboard-viewer\" [class.editing]=\"isEditing\" [class.has-toolbar]=\"shouldShowToolbar\">\n  <!-- Breadcrumb Navigation (hidden in edit mode) -->\n  @if (showBreadcrumb && !isEditing && dashboard) {\n    <mj-dashboard-breadcrumb\n      [Categories]=\"Categories\"\n      [CurrentCategoryId]=\"dashboard.CategoryID\"\n      [CurrentDashboard]=\"dashboard\"\n      [ShowDashboardName]=\"true\"\n      [AllowDragDrop]=\"false\"\n      Size=\"large\"\n      RootIcon=\"fa-solid fa-gauge-high\"\n      RootLabel=\"Dashboards\"\n      (Navigate)=\"onBreadcrumbNavigate($event)\">\n    </mj-dashboard-breadcrumb>\n  }\n\n  <!-- Toolbar (auto-hides when all elements are disabled) -->\n  @if (shouldShowToolbar) {\n    <div class=\"dashboard-toolbar\">\n      <div class=\"toolbar-left\">\n        @if (dashboard && (isEditing || !showBreadcrumb)) {\n          <span class=\"dashboard-title\">\n            <i class=\"fa-solid fa-chart-line\"></i>\n            {{ dashboard.Name }}\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-center\">\n        @if (hasUnsavedChanges && isEditing) {\n          <span class=\"unsaved-indicator\">\n            <i class=\"fa-solid fa-circle\"></i>\n            Unsaved changes\n          </span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        <!-- Open in New Tab button (when embedded) -->\n        @if (showOpenInTabButton && !isEditing) {\n          <button\n            class=\"toolbar-button\"\n            (click)=\"onOpenInTabClick()\"\n            title=\"Open in a dashboard tab\">\n            <i class=\"fa-solid fa-up-right-from-square\"></i>\n            Open in Tab\n          </button>\n        }\n        @if (isEditing) {\n          <button\n            class=\"toolbar-button\"\n            (click)=\"onAddPanelClick()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Part\n          </button>\n        }\n        @if (showEditButton) {\n          <button\n            class=\"toolbar-button\"\n            [class.active]=\"isEditing\"\n            (click)=\"toggleEditMode()\">\n            <i class=\"fa-solid fa-edit\"></i>\n            {{ isEditing ? 'Editing' : 'Edit' }}\n          </button>\n        }\n        @if (isEditing && hasUnsavedChanges) {\n          <button\n            class=\"toolbar-button primary\"\n            (click)=\"save()\">\n            <i class=\"fa-solid fa-save\"></i>\n            Save\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading dashboard...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Layout Container -->\n  <div class=\"layout-container\" #layoutContainer>\n    <!-- Golden Layout will render panels here -->\n  </div>\n\n  <!-- Empty State: Add part shows in edit mode, and in view mode to a user who can edit -->\n  @if (!HasPanels && !isLoading) {\n    <mj-empty-state\n      class=\"dashboard-empty\"\n      Icon=\"fa-solid fa-table-columns\"\n      Title=\"No parts yet\"\n      Message=\"Add a view, query, artifact, or web page to get started.\"\n      [ActionText]=\"IsEditing || CanEdit ? 'Add part' : ''\"\n      ActionIcon=\"fa-solid fa-plus\"\n      (Action)=\"OnAddPanelClick()\" />\n  }\n</div>\n", styles: ["/**\n * Dashboard Viewer Component Styles\n *\n * IMPORTANT: For Golden Layout tabs to display correctly, you must import\n * Golden Layout's CSS in your application's global styles:\n *\n *   @import 'golden-layout/dist/css/goldenlayout-base.css';\n *\n * Or add to your angular.json styles array:\n *   \"node_modules/golden-layout/dist/css/goldenlayout-base.css\"\n */\n\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.dashboard-viewer {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--dashboard-bg, var(--mj-bg-surface-card));\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.dashboard-toolbar {\n    flex: 0 0 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    background: var(--dashboard-toolbar-bg, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--dashboard-border, var(--mj-border-default));\n    box-sizing: border-box;\n    z-index: 10;\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.toolbar-left {\n    flex: 1;\n}\n\n.toolbar-center {\n    flex: 0 0 auto;\n}\n\n.toolbar-right {\n    flex: 1;\n    justify-content: flex-end;\n}\n\n.dashboard-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--dashboard-title-color, var(--mj-text-primary));\n}\n\n.dashboard-title i {\n    margin-right: 8px;\n    color: var(--dashboard-title-icon, var(--mj-brand-primary));\n}\n\n.unsaved-indicator {\n    font-size: 12px;\n    color: var(--dashboard-unsaved-color, var(--mj-status-warning));\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 8px;\n}\n\n.toolbar-button {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--dashboard-button-border, var(--mj-border-strong));\n    border-radius: 4px;\n    background: var(--dashboard-button-bg, var(--mj-bg-surface));\n    color: var(--dashboard-button-color, var(--mj-text-primary));\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toolbar-button:hover {\n    background: var(--dashboard-button-hover-bg, var(--mj-bg-surface-card));\n    border-color: var(--dashboard-button-hover-border, var(--mj-border-strong));\n}\n\n.toolbar-button.active {\n    background: var(--dashboard-button-active-bg, color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n    border-color: var(--dashboard-button-active-border, var(--mj-brand-primary));\n    color: var(--dashboard-button-active-color, var(--mj-brand-primary));\n}\n\n.toolbar-button.primary {\n    background: var(--dashboard-button-primary-bg, var(--mj-brand-primary));\n    border-color: var(--dashboard-button-primary-border, var(--mj-brand-primary-hover));\n    color: var(--dashboard-button-primary-color, var(--mj-text-inverse));\n}\n\n.toolbar-button.primary:hover {\n    background: var(--dashboard-button-primary-hover-bg, var(--mj-brand-primary-hover));\n}\n\n.toolbar-button i {\n    font-size: 14px;\n}\n\n/* ========================================\n   Layout Container\n   ======================================== */\n\n/* Layout container fills remaining space in the flex column */\n.layout-container {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n/* ========================================\n   Dashboard Panel Content (our wrapper)\n   ======================================== */\n\n/* Dashboard panel wrapper (holds the part content) */\n:host ::ng-deep .dashboard-part-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--mj-bg-surface);\n}\n\n/* Dashboard part content */\n:host ::ng-deep .dashboard-part-content {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n}\n\n/* ========================================\n   Loading Overlay\n   ======================================== */\n\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n    z-index: 100;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* Empty state centered in the dashboard pane (mj-empty-state centers its own\n   content; absolute positioning keeps it overlaid on the layout container). */\n.dashboard-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    max-width: 400px;\n}\n\n/* ========================================\n   Panel Error State\n   ======================================== */\n\n:host ::ng-deep .panel-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 24px;\n    text-align: center;\n    color: var(--dashboard-error-color, var(--mj-status-error));\n    background: var(--dashboard-error-bg, color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface)));\n}\n\n:host ::ng-deep .panel-error i {\n    font-size: 32px;\n    margin-bottom: 12px;\n}\n\n:host ::ng-deep .panel-error span {\n    font-size: 14px;\n}\n\n/* ========================================\n   Golden Layout Overrides\n   These require ViewEncapsulation.None to work on dynamic GL elements\n   ======================================== */\n\n/* Override shell's hide-tab-bar rule that hides GL headers when dashboard is inside shell */\n/* The shell hides .lm_header when mj-tab-container has hide-tab-bar class */\n/* We need to ensure OUR Golden Layout headers are always visible */\nmj-dashboard-viewer .lm_header {\n    display: block !important;\n}\n\n/* Ensure GL root container fills available space */\nmj-dashboard-viewer .lm_goldenlayout {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure the root layout item fills space */\nmj-dashboard-viewer .lm_root {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n/* Ensure proper box-sizing for all GL layout elements */\nmj-dashboard-viewer .lm_item,\nmj-dashboard-viewer .lm_content,\nmj-dashboard-viewer .lm_stack,\nmj-dashboard-viewer .lm_row,\nmj-dashboard-viewer .lm_column {\n    box-sizing: border-box !important;\n}\n\n/* Ensure layout items don't overflow */\nmj-dashboard-viewer .lm_item {\n    overflow: hidden !important;\n}\n\n/* Fix for .lm_items - the content container inside stacks (its height is set with the stack header below) */\nmj-dashboard-viewer .lm_items {\n    width: 100% !important;\n    box-sizing: border-box !important;\n    position: relative !important;\n}\n\n/* When tabs are maximized, no header visible */\nmj-dashboard-viewer .lm_stack.lm_maximised > .lm_items {\n    height: 100% !important;\n}\n\n/* Target the ComponentItem div inside lm_items */\nmj-dashboard-viewer .lm_items > div {\n    width: 100% !important;\n    height: 100% !important;\n    box-sizing: border-box !important;\n    flex-direction: column !important;\n}\n\n/* Only apply flex display to the active/visible tab content div */\nmj-dashboard-viewer .lm_items > div:not([style*=\"display: none\"]) {\n    display: flex !important;\n}\n\n/* Clearfix for float-based row layout */\nmj-dashboard-viewer .lm_row::after {\n    content: \"\" !important;\n    display: table !important;\n    clear: both !important;\n}\n\n/* Force content children to respect parent bounds */\nmj-dashboard-viewer .lm_content > * {\n    max-width: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_content {\n    background: var(--mj-bg-surface) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    height: 100% !important;\n    width: 100% !important;\n}\n\nmj-dashboard-viewer .lm_item_container {\n    background: var(--mj-bg-surface) !important;\n}\n\n/* ===== Golden Layout: part tabs and part buttons =====\n   The shell's tab-container and theme rules reach this nested layout. These selectors add\n   .dashboard-viewer to outrank them, with !important where those rules use it. */\n\n/* Stack header: tab track on the left, part buttons on the right (DASHBOARD_STACK_HEADER_HEIGHT) */\nmj-dashboard-viewer .dashboard-viewer .lm_header {\n    display: block !important;\n    height: 44px !important;\n    max-height: none !important;            /* shell.component.css caps nested headers at 40px */\n    padding: 0 !important;\n    background: var(--mj-bg-surface) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n    z-index: auto;                          /* no stacking context, so the tab dropdown list can rise above the part */\n}\nmj-dashboard-viewer .dashboard-viewer .lm_items {\n    height: calc(100% - 44px) !important;\n}\n\n/* The tab track, styled like mj-tab-nav. Golden Layout counts each tab's width and right margin; the rest of the\n   spacing beside the tabs is DASHBOARD_TAB_CONTROL_OFFSET (78px): the track's 12px inset, 1px borders and 4px left\n   padding, an 8px gap, the 34px tab dropdown button and its 6px gap, and the controls' 12px inset. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabs {\n    top: 5px !important;\n    left: var(--mj-space-3) !important;\n    right: auto !important;                 /* shell sets left:0; right:0; overflow-x:auto */\n    height: auto !important;\n    overflow: visible !important;\n    padding: var(--mj-space-1) 0 var(--mj-space-1) var(--mj-space-1);   /* the last tab's margin closes the right side */\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-lg);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: var(--mj-space-2) !important;\n    flex: 0 0 auto !important;\n    height: auto !important;\n    margin: 0 var(--mj-space-1) 0 0 !important;\n    padding: 4px var(--mj-space-3) !important;\n    font-family: inherit !important;\n    font-size: 13px !important;\n    font-weight: 500 !important;\n    line-height: 1.2 !important;\n    color: var(--mj-text-secondary) !important;\n    background: transparent !important;\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    box-shadow: none !important;\n    cursor: pointer !important;\n    transition: background-color var(--mj-transition-fast), color var(--mj-transition-fast) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab::after { content: none !important; }  /* shell pipe separators */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab:hover:not(.lm_active) {\n    background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent) !important;\n    color: var(--mj-text-primary) !important;\n}\n/* The shell's active tab rule is as specific as the tab rule above, so the tab's box is repeated here */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab.lm_active {\n    height: auto !important;\n    margin: 0 var(--mj-space-1) 0 0 !important;\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    background: var(--mj-bg-surface) !important;\n    color: var(--mj-brand-primary) !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab:focus-visible {\n    outline: 2px solid var(--mj-border-focus) !important;\n    outline-offset: -2px !important;\n}\nmj-dashboard-viewer .dashboard-viewer.editing .lm_header .lm_tab { cursor: grab !important; }\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_title {\n    cursor: inherit !important;\n    line-height: normal !important;\n    max-width: 220px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tab .panel-icon {   /* the part's icon */\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    transform: none !important;\n    font-size: 13px !important;\n    color: inherit !important;\n}\n\n/* Parts are removed only through Remove (with a confirmation): hide GL's close buttons */\nmj-dashboard-viewer .dashboard-viewer .lm_close_tab,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_close,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_popout,\nmj-dashboard-viewer .dashboard-viewer .lm_controls .lm_maximise { display: none !important; }\n\n/* Part buttons (Edit part, Remove) in the header's controls area */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls {\n    top: 0 !important;\n    bottom: 0 !important;\n    right: var(--mj-space-3) !important;\n    z-index: 3;                  /* above tabs that run into it (the shell gives tabs 1 and 2), under the tab dropdown list */\n    align-items: center;\n    gap: 6px;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .dashboard-stack-actions {\n    display: flex !important;\n    align-items: center;\n    gap: 6px;\n    width: auto !important;      /* GL base: .lm_controls > * is 18x18 and floats */\n    height: auto !important;\n    float: none !important;\n    opacity: 1 !important;       /* MJ theme: .lm_controls > * is at 0.6 */\n    cursor: default !important;\n}\n\n/* Golden Layout's tab dropdown button, sized like the part buttons and placed left of them. It sits outside the\n   controls' measured width, because Golden Layout shows it only after it measures the tabs. Golden Layout shows\n   and hides it with an inline display, so display here carries no !important. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown {\n    display: inline-flex;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    margin: auto 6px auto 0;\n    width: 32px !important;      /* GL base: .lm_controls > * is 18x18 and floats */\n    height: 32px !important;\n    float: none !important;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    border-radius: var(--mj-radius-md);\n    color: var(--mj-text-secondary);\n    opacity: 1 !important;       /* MJ theme: .lm_controls > * is at 0.6 */\n    cursor: pointer;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown:hover {\n    background-color: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_controls > .lm_tabdropdown::before {\n    content: '\\f078';            /* chevron-down, in place of GL's border triangle */\n    width: auto;\n    height: auto;\n    border: none;\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    line-height: 1;\n    color: inherit;\n}\n\n/* Tabs that do not fit: Golden Layout's tab dropdown list, as a menu below the header. Golden Layout shows and\n   hides it with an inline display, so display here carries no !important. */\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list {\n    display: flex;\n    flex-direction: column;\n    top: calc(100% + var(--mj-space-1));\n    right: var(--mj-space-3);\n    z-index: var(--mj-z-dropdown);\n    min-width: 200px;\n    max-height: 290px;\n    overflow-y: auto;\n    padding: var(--mj-space-1);\n    background: var(--mj-bg-surface-elevated);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    box-shadow: var(--mj-shadow-md);\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_tab {\n    display: flex !important;\n    margin: 0 !important;\n    padding: 6px var(--mj-space-2) !important;\n    border-radius: var(--mj-radius-sm) !important;\n    background: transparent !important;\n    box-shadow: none !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_tab:hover:not(.lm_active) {\n    background: var(--mj-bg-surface-hover) !important;\n}\nmj-dashboard-viewer .dashboard-viewer .lm_header .lm_tabdropdown_list .lm_title {\n    width: auto;                 /* GL base: 100px */\n}\n\n/* Each stack (a panel of part tabs) is a card */\nmj-dashboard-viewer .dashboard-viewer .lm_stack {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default) !important;\n    border-radius: var(--mj-radius-lg);\n}\n\n/* ========================================\n   View Mode (Not Editing) - Lock Layout\n   ======================================== */\n\n/* Disable splitter dragging when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter {\n    pointer-events: none !important;\n    cursor: default !important;\n}\n\n/* Hide splitter drag handle visual when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_splitter .lm_drag_handle {\n    display: none !important;\n}\n\n/* Disable tab dragging cursor when not editing */\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_header .lm_tab {\n    cursor: default !important;\n}\n\nmj-dashboard-viewer .dashboard-viewer:not(.editing) .lm_title {\n    cursor: default !important;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }], { Dashboard: [{
             type: Input
         }], dashboard: [{
@@ -1488,6 +1514,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             type: Input
         }], isEditing: [{
             type: Input
+        }], CanEdit: [{
+            type: Input
         }], ShowToolbar: [{
             type: Input
         }], showToolbar: [{
@@ -1554,5 +1582,5 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             type: ViewChild,
             args: ['layoutContainer', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardViewerComponent, { className: "DashboardViewerComponent", filePath: "src/lib/dashboard-viewer/dashboard-viewer.component.ts", lineNumber: 73 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardViewerComponent, { className: "DashboardViewerComponent", filePath: "src/lib/dashboard-viewer/dashboard-viewer.component.ts", lineNumber: 76 }); })();
 //# sourceMappingURL=dashboard-viewer.component.js.map