@memberjunction/ng-dashboard-viewer 6.1.4 → 6.2.0-edge.1

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

@@ -4,7 +4,7 @@ import { takeUntil } from 'rxjs/operators';
 import { MJGlobal, UUIDsEqual, EscapeHTML } from '@memberjunction/global';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { DashboardEngine } from '@memberjunction/core-entities';
-import { createDefaultDashboardConfig, generatePanelId, extractPanelsFromLayout, findPanelInLayout } from '../models/dashboard-types';
+import { CreateDefaultDashboardConfig, GeneratePanelId, ExtractPanelsFromLayout, FindPanelInLayout } from '../models/dashboard-types';
 import { GoldenLayoutWrapperService } from '../services/golden-layout-wrapper.service';
 import { BaseDashboardPart } from '../parts/base-dashboard-part';
 import * as i0 from "@angular/core";
@@ -135,30 +135,46 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     _dashboard = null;
     _dashboardId = null;
     /** The dashboard entity to display */
-    set dashboard(value) {
+    set Dashboard(value) {
         const previous = this._dashboard;
         this._dashboard = value;
         if (value && value !== previous) {
             this.onDashboardChanged();
         }
     }
-    get dashboard() {
+    get Dashboard() {
         return this._dashboard;
     }
+    /** @deprecated Use {@link Dashboard}. */
+    get dashboard() {
+        return this.Dashboard;
+    }
+    /** @deprecated Use {@link Dashboard}. */
+    set dashboard(value) {
+        this.Dashboard = value;
+    }
     /** Alternative: Load dashboard by ID */
-    set dashboardId(value) {
+    set DashboardId(value) {
         const previous = this._dashboardId;
         this._dashboardId = value;
         if (value && value !== previous) {
             this.loadDashboardById(value);
         }
     }
-    get dashboardId() {
+    get DashboardId() {
         return this._dashboardId;
     }
+    /** @deprecated Use {@link DashboardId}. */
+    get dashboardId() {
+        return this.DashboardId;
+    }
+    /** @deprecated Use {@link DashboardId}. */
+    set dashboardId(value) {
+        this.DashboardId = value;
+    }
     /** Whether the dashboard is in edit mode */
     _isEditing = false;
-    set isEditing(value) {
+    set IsEditing(value) {
         const previous = this._isEditing;
         this._isEditing = value;
         // When isEditing changes (and layout exists), reinitialize to apply GL settings
@@ -167,43 +183,95 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             this.updatePanelEditModes();
         }
     }
-    get isEditing() {
+    get IsEditing() {
         return this._isEditing;
     }
+    /** @deprecated Use {@link IsEditing}. */
+    get isEditing() {
+        return this.IsEditing;
+    }
+    /** @deprecated Use {@link IsEditing}. */
+    set isEditing(value) {
+        this.IsEditing = value;
+    }
     /** Whether to show the toolbar */
     _showToolbar = true;
-    set showToolbar(value) {
+    set ShowToolbar(value) {
         this._showToolbar = value;
     }
-    get showToolbar() {
+    get ShowToolbar() {
         return this._showToolbar;
     }
+    /** @deprecated Use {@link ShowToolbar}. */
+    get showToolbar() {
+        return this.ShowToolbar;
+    }
+    /** @deprecated Use {@link ShowToolbar}. */
+    set showToolbar(value) {
+        this.ShowToolbar = value;
+    }
     /** Whether to auto-save layout changes */
     _autoSave = false;
-    set autoSave(value) {
+    set AutoSave(value) {
         this._autoSave = value;
     }
-    get autoSave() {
+    get AutoSave() {
         return this._autoSave;
     }
+    /** @deprecated Use {@link AutoSave}. */
+    get autoSave() {
+        return this.AutoSave;
+    }
+    /** @deprecated Use {@link AutoSave}. */
+    set autoSave(value) {
+        this.AutoSave = value;
+    }
     /** Whether to show the breadcrumb navigation */
-    showBreadcrumb = true;
+    ShowBreadcrumb = true;
+    /** @deprecated Use {@link ShowBreadcrumb}. */
+    set showBreadcrumb(value) {
+        this.ShowBreadcrumb = value;
+    }
+    /** @deprecated Use {@link ShowBreadcrumb}. */
+    get showBreadcrumb() {
+        return this.ShowBreadcrumb;
+    }
     /** Whether to show the "Open in Tab" button (for embedded dashboards) */
-    showOpenInTabButton = false;
+    ShowOpenInTabButton = false;
+    /** @deprecated Use {@link ShowOpenInTabButton}. */
+    set showOpenInTabButton(value) {
+        this.ShowOpenInTabButton = value;
+    }
+    /** @deprecated Use {@link ShowOpenInTabButton}. */
+    get showOpenInTabButton() {
+        return this.ShowOpenInTabButton;
+    }
     /** Whether to show the Edit button */
-    showEditButton = true;
+    ShowEditButton = true;
+    /** @deprecated Use {@link ShowEditButton}. */
+    set showEditButton(value) {
+        this.ShowEditButton = value;
+    }
+    /** @deprecated Use {@link ShowEditButton}. */
+    get showEditButton() {
+        return this.ShowEditButton;
+    }
     /** All categories for breadcrumb path resolution */
     Categories = [];
     /**
      * Computed: Should the toolbar be visible?
      * Auto-hides when showToolbar=false OR when all toolbar elements are disabled
      */
-    get shouldShowToolbar() {
+    get ShouldShowToolbar() {
         if (!this._showToolbar) {
             return false;
         }
         // If all elements are hidden, hide the toolbar entirely
-        return this.showBreadcrumb || this.showOpenInTabButton || this.showEditButton;
+        return this.ShowBreadcrumb || this.ShowOpenInTabButton || this.ShowEditButton;
+    }
+    /** @deprecated Use {@link ShouldShowToolbar}. */
+    get shouldShowToolbar() {
+        return this.ShouldShowToolbar;
     }
     // ========================================
     // Outputs
@@ -211,42 +279,142 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /** Emitted when dashboard configuration changes */
     configChanged = new EventEmitter();
     /** Emitted when a panel requests navigation to another resource */
-    navigationRequested = new EventEmitter();
+    NavigationRequested = new EventEmitter();
+    /**
+     * @deprecated Use {@link NavigationRequested}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (navigationRequested) keeps working. Must stay AFTER NavigationRequested: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    navigationRequested = this.NavigationRequested;
     /** Emitted when a panel interaction occurs */
-    panelInteraction = new EventEmitter();
+    PanelInteraction = new EventEmitter();
+    /**
+     * @deprecated Use {@link PanelInteraction}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (panelInteraction) keeps working. Must stay AFTER PanelInteraction: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    panelInteraction = this.PanelInteraction;
     /** Emitted when the dashboard is saved */
-    dashboardSaved = new EventEmitter();
+    DashboardSaved = new EventEmitter();
+    /**
+     * @deprecated Use {@link DashboardSaved}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (dashboardSaved) keeps working. Must stay AFTER DashboardSaved: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    dashboardSaved = this.DashboardSaved;
     /** Emitted when an error occurs */
     error = new EventEmitter();
     /** Emitted when edit mode changes */
-    editModeChanged = new EventEmitter();
+    EditModeChanged = new EventEmitter();
+    /**
+     * @deprecated Use {@link EditModeChanged}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (editModeChanged) keeps working. Must stay AFTER EditModeChanged: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    editModeChanged = this.EditModeChanged;
     /** Emitted when user navigates via breadcrumb */
-    breadcrumbNavigate = new EventEmitter();
+    BreadcrumbNavigate = new EventEmitter();
+    /**
+     * @deprecated Use {@link BreadcrumbNavigate}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (breadcrumbNavigate) keeps working. Must stay AFTER BreadcrumbNavigate: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    breadcrumbNavigate = this.BreadcrumbNavigate;
     /** Emitted when user clicks "Open in Tab" button */
-    openInTab = new EventEmitter();
+    OpenInTab = new EventEmitter();
+    /**
+     * @deprecated Use {@link OpenInTab}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (openInTab) keeps working. Must stay AFTER OpenInTab: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    openInTab = this.OpenInTab;
     /** Emitted as the Golden Layout viewer moves through dashboard/layout readiness states. */
-    layoutLifecycle = new EventEmitter();
+    LayoutLifecycle = new EventEmitter();
+    /**
+     * @deprecated Use {@link LayoutLifecycle}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (layoutLifecycle) keeps working. Must stay AFTER LayoutLifecycle: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    layoutLifecycle = this.LayoutLifecycle;
     /** Emitted once Golden Layout has initialized with a non-zero container and updated its size. */
-    layoutReady = new EventEmitter();
+    LayoutReady = new EventEmitter();
+    /**
+     * @deprecated Use {@link LayoutReady}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (layoutReady) keeps working. Must stay AFTER LayoutReady: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    layoutReady = this.LayoutReady;
     /** Emitted when layout initialization is deferred because the container cannot be initialized yet. */
-    layoutDeferred = new EventEmitter();
+    LayoutDeferred = new EventEmitter();
+    /**
+     * @deprecated Use {@link LayoutDeferred}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (layoutDeferred) keeps working. Must stay AFTER LayoutDeferred: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    layoutDeferred = this.LayoutDeferred;
     // ========================================
     // View Children
     // ========================================
-    layoutContainer;
+    LayoutContainer;
+    /** @deprecated Use {@link LayoutContainer}. */
+    get layoutContainer() {
+        return this.LayoutContainer;
+    }
+    /** @deprecated Use {@link LayoutContainer}. */
+    set layoutContainer(value) {
+        this.LayoutContainer = value;
+    }
     // ========================================
     // State
     // ========================================
     isLoading = false;
     config = null;
-    partTypes = [];
-    hasUnsavedChanges = false;
+    PartTypes = [];
+    /** @deprecated Use {@link PartTypes}. */
+    get partTypes() {
+        return this.PartTypes;
+    }
+    /** @deprecated Use {@link PartTypes}. */
+    set partTypes(value) {
+        this.PartTypes = value;
+    }
+    HasUnsavedChanges = false;
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    get hasUnsavedChanges() {
+        return this.HasUnsavedChanges;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    set hasUnsavedChanges(value) {
+        this.HasUnsavedChanges = value;
+    }
     /**
      * Helper to check if layout has any panels (for template use).
      * Panels are stored in componentState within the layout tree.
      */
+    get HasPanels() {
+        return ExtractPanelsFromLayout(this.config?.layout ?? null).length > 0;
+    }
+    /** @deprecated Use {@link HasPanels}. */
     get hasPanels() {
-        return extractPanelsFromLayout(this.config?.layout ?? null).length > 0;
+        return this.HasPanels;
     }
     _destroy$ = new Subject();
     _panelComponents = new Map();
@@ -292,26 +460,30 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Toggle edit mode
      */
-    toggleEditMode() {
-        this.isEditing = !this.isEditing;
-        this.editModeChanged.emit(this.isEditing);
+    ToggleEditMode() {
+        this.IsEditing = !this.IsEditing;
+        this.EditModeChanged.emit(this.IsEditing);
         this.updatePanelEditModes();
     }
+    /** @deprecated Use {@link ToggleEditMode}. */
+    toggleEditMode() {
+        return this.ToggleEditMode();
+    }
     /**
      * Add a new panel to the dashboard.
      * The panel is stored in GL's componentState - no separate panels array.
      */
-    async addPanel(partTypeId, panelConfig, title, icon, location) {
+    async AddPanel(partTypeId, panelConfig, title, icon, location) {
         if (!this.config || !this._glService) {
             return;
         }
-        const partType = this.partTypes.find(pt => UUIDsEqual(pt.ID, partTypeId));
+        const partType = this.PartTypes.find(pt => UUIDsEqual(pt.ID, partTypeId));
         if (!partType) {
             this.error.emit({ message: `Unknown panel type: ${partTypeId}` });
             return;
         }
         const panel = {
-            id: generatePanelId(),
+            id: GeneratePanelId(),
             partTypeId,
             title,
             icon: icon || partType.Icon || 'fa-solid fa-window-maximize',
@@ -327,11 +499,15 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         }
         this.markDirty();
     }
+    /** @deprecated Use {@link AddPanel}. */
+    async addPanel(partTypeId, panelConfig, title, icon, location) {
+        return this.AddPanel(partTypeId, panelConfig, title, icon, location);
+    }
     /**
      * Remove a panel from the dashboard.
      * Panels live in GL's componentState, so removing from GL removes the panel.
      */
-    removePanel(panelId) {
+    RemovePanel(panelId) {
         if (!this.config || !this._glService)
             return;
         // Remove from layout (panel data is in componentState)
@@ -345,6 +521,10 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         this.destroyPanelComponent(panelId);
         this.markDirty();
     }
+    /** @deprecated Use {@link RemovePanel}. */
+    removePanel(panelId) {
+        return this.RemovePanel(panelId);
+    }
     /**
      * Save the current dashboard configuration
      */
@@ -365,8 +545,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             this._dashboard.UIConfigDetails = JSON.stringify(this.config);
             const saved = await this._dashboard.Save();
             if (saved) {
-                this.hasUnsavedChanges = false;
-                this.dashboardSaved.emit(this._dashboard);
+                this.HasUnsavedChanges = false;
+                this.DashboardSaved.emit(this._dashboard);
             }
             return saved;
         }
@@ -383,19 +563,27 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Refresh all panels
      */
-    async refreshAllPanels() {
+    async RefreshAllPanels() {
         // For placeholder implementation, reinitialize the layout
         if (this._glService) {
             await this.initializeLayout();
         }
     }
+    /** @deprecated Use {@link RefreshAllPanels}. */
+    async refreshAllPanels() {
+        return this.RefreshAllPanels();
+    }
     /**
      * Resolves when the current dashboard's Golden Layout instance has initialized
      * against a non-zero container and completed its first size update.
      */
-    waitForLayoutReady() {
+    WaitForLayoutReady() {
         return this._layoutReadyPromise;
     }
+    /** @deprecated Use {@link WaitForLayoutReady}. */
+    waitForLayoutReady() {
+        return this.WaitForLayoutReady();
+    }
     /**
      * Get the current configuration
      */
@@ -405,31 +593,43 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Get available part types
      */
+    GetPartTypes() {
+        return this.PartTypes;
+    }
+    /** @deprecated Use {@link GetPartTypes}. */
     getPartTypes() {
-        return this.partTypes;
+        return this.GetPartTypes();
     }
     /**
      * Get a panel by ID.
      * Extracts panel from the layout's componentState (single source of truth).
      */
+    GetPanel(panelId) {
+        return FindPanelInLayout(this.config?.layout ?? null, panelId);
+    }
+    /** @deprecated Use {@link GetPanel}. */
     getPanel(panelId) {
-        return findPanelInLayout(this.config?.layout ?? null, panelId);
+        return this.GetPanel(panelId);
     }
     /**
      * Get the part type for a panel
      */
-    getPartTypeForPanel(panelId) {
-        const panel = this.getPanel(panelId);
+    GetPartTypeForPanel(panelId) {
+        const panel = this.GetPanel(panelId);
         if (!panel)
             return null;
-        return this.partTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId)) ?? null;
+        return this.PartTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId)) ?? null;
+    }
+    /** @deprecated Use {@link GetPartTypeForPanel}. */
+    getPartTypeForPanel(panelId) {
+        return this.GetPartTypeForPanel(panelId);
     }
     /**
      * 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.
      */
-    updatePanelConfig(panelId, newConfig, title, icon) {
+    UpdatePanelConfig(panelId, newConfig, title, icon) {
         if (!this.config || !this._glService)
             return;
         // Get current layout which contains all panel data
@@ -443,6 +643,10 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         // Reinitialize layout to reflect the updated panel
         this.initializeLayout();
     }
+    /** @deprecated Use {@link UpdatePanelConfig}. */
+    updatePanelConfig(panelId, newConfig, title, icon) {
+        return this.UpdatePanelConfig(panelId, newConfig, title, icon);
+    }
     /**
      * Recursively update a panel's config within the layout tree
      */
@@ -478,31 +682,43 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Handle add panel button click - emits event for parent to show dialog
      */
-    onAddPanelClick() {
+    OnAddPanelClick() {
         // Emit interaction event for parent to handle
         // Parent should show AddPanelDialog and call addPanel() with result
-        this.panelInteraction.emit({
+        this.PanelInteraction.emit({
             panelId: '',
             interactionType: 'custom',
-            payload: { action: 'add-panel-requested', partTypes: this.partTypes }
+            payload: { action: 'add-panel-requested', partTypes: this.PartTypes }
         });
     }
+    /** @deprecated Use {@link OnAddPanelClick}. */
+    onAddPanelClick() {
+        return this.OnAddPanelClick();
+    }
     /**
      * Handle "Open in Tab" button click - emits event for parent to open dashboard in its own tab
      */
-    onOpenInTabClick() {
+    OnOpenInTabClick() {
         if (this._dashboard) {
-            this.openInTab.emit({
+            this.OpenInTab.emit({
                 dashboardId: this._dashboard.ID,
                 dashboardName: this._dashboard.Name
             });
         }
     }
+    /** @deprecated Use {@link OnOpenInTabClick}. */
+    onOpenInTabClick() {
+        return this.OnOpenInTabClick();
+    }
     /**
      * Handle breadcrumb navigation
      */
+    OnBreadcrumbNavigate(event) {
+        this.BreadcrumbNavigate.emit(event);
+    }
+    /** @deprecated Use {@link OnBreadcrumbNavigate}. */
     onBreadcrumbNavigate(event) {
-        this.breadcrumbNavigate.emit(event);
+        return this.OnBreadcrumbNavigate(event);
     }
     // ========================================
     // Private Methods - Initialization
@@ -510,7 +726,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     async loadPartTypes() {
         try {
             await DashboardEngine.Instance.Config(false);
-            this.partTypes = DashboardEngine.Instance.DashboardPartTypes;
+            this.PartTypes = DashboardEngine.Instance.DashboardPartTypes;
         }
         catch (err) {
             console.error('Failed to load dashboard part types:', err);
@@ -568,7 +784,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     }
     parseOrCreateConfig() {
         if (!this._dashboard?.UIConfigDetails) {
-            return createDefaultDashboardConfig();
+            return CreateDefaultDashboardConfig();
         }
         try {
             const parsed = JSON.parse(this._dashboard.UIConfigDetails);
@@ -578,20 +794,20 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             }
             // Invalid format, return default
             console.warn('[DashboardViewer] Invalid config format, using default');
-            return createDefaultDashboardConfig();
+            return CreateDefaultDashboardConfig();
         }
         catch {
-            return createDefaultDashboardConfig();
+            return CreateDefaultDashboardConfig();
         }
     }
     // ========================================
     // Private Methods - Layout
     // ========================================
     async initializeLayout(generation = this._layoutInitGeneration) {
-        if (!this.config || !this.layoutContainer?.nativeElement) {
+        if (!this.config || !this.LayoutContainer?.nativeElement) {
             return;
         }
-        const el = this.layoutContainer.nativeElement;
+        const el = this.LayoutContainer.nativeElement;
         const rect = el.getBoundingClientRect();
         if (rect.width === 0 || rect.height === 0) {
             // The container has no size yet — typically because Explorer is reattaching
@@ -602,7 +818,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             // Defer init until the container actually has a size, then build the layout.
             const reason = 'layout container has zero size';
             this.emitLayoutLifecycle('waiting-for-size', reason);
-            this.layoutDeferred.emit({ reason });
+            this.LayoutDeferred.emit({ reason });
             await this.waitForLayoutContainerSize(el, generation);
             if (generation !== this._layoutInitGeneration) {
                 return;
@@ -629,7 +845,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         // Initialize with saved layout (or null for empty dashboard)
         // Golden Layout's native ResolvedLayoutConfig is the source of truth
         // Panel data is embedded in each component's componentState
-        this._glService.initialize(this.layoutContainer.nativeElement, this.config.layout, panelFactory, this.isEditing);
+        this._glService.initialize(this.LayoutContainer.nativeElement, this.config.layout, panelFactory, this.IsEditing);
         if (pendingPanelCreations.length > 0) {
             await Promise.all(pendingPanelCreations);
         }
@@ -651,7 +867,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         this._glService?.updateSize();
         this.cdr.detectChanges();
         this.emitLayoutLifecycle('ready');
-        this.layoutReady.emit();
+        this.LayoutReady.emit();
         this.resolveLayoutReady(generation);
     }
     /** ResizeObserver used to wait for a zero-size container to gain a size before init. */
@@ -758,7 +974,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         }
     }
     emitLayoutLifecycle(state, reason, error) {
-        this.layoutLifecycle.emit({
+        this.LayoutLifecycle.emit({
             state,
             dashboardId: this._dashboard?.ID,
             reason,
@@ -840,13 +1056,13 @@ export class DashboardViewerComponent extends BaseAngularComponent {
      * Panel comes directly from GL's componentState - no lookup needed.
      */
     async createPanelComponent(panel, container) {
-        const partType = this.partTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId));
+        const partType = this.PartTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId));
         // Create the panel wrapper with header and content
         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) {
+        if (this.IsEditing) {
             const header = this.createPartHeader(panel, panel.id);
             wrapper.appendChild(header);
         }
@@ -890,7 +1106,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             const instance = componentRef.instance;
             instance.Panel = panel;
             instance.PartType = partType;
-            instance.IsEditing = this.isEditing;
+            instance.IsEditing = this.IsEditing;
             // Subscribe to events
             instance.ConfigureRequested.subscribe(() => {
                 this.onConfigurePart(panel.id);
@@ -899,7 +1115,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
                 this.onRemovePart(panel.id);
             });
             instance.NavigationRequested.subscribe((event) => {
-                this.navigationRequested.emit(event);
+                this.NavigationRequested.emit(event);
             });
             // Attach component to DOM
             container.appendChild(componentRef.location.nativeElement);
@@ -933,7 +1149,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         `;
         header.appendChild(titleSection);
         // Action buttons (only in edit mode)
-        if (this.isEditing) {
+        if (this.IsEditing) {
             const actions = document.createElement('div');
             actions.style.cssText = 'display: flex; gap: 4px;';
             // Configure button
@@ -1164,7 +1380,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     }
     onConfigurePart(panelId) {
         // Emit event for parent to handle configuration
-        this.panelInteraction.emit({
+        this.PanelInteraction.emit({
             panelId,
             interactionType: 'custom',
             payload: { action: 'configure-part-requested' }
@@ -1172,8 +1388,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     }
     onRemovePart(panelId) {
         // Emit event for parent to show confirmation dialog
-        const panel = findPanelInLayout(this.config?.layout ?? null, panelId);
-        this.panelInteraction.emit({
+        const panel = FindPanelInLayout(this.config?.layout ?? null, panelId);
+        this.PanelInteraction.emit({
             panelId,
             interactionType: 'custom',
             payload: {
@@ -1185,8 +1401,12 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     /**
      * Confirm removal of a panel (called by parent after confirmation dialog)
      */
+    ConfirmRemovePanel(panelId) {
+        this.RemovePanel(panelId);
+    }
+    /** @deprecated Use {@link ConfirmRemovePanel}. */
     confirmRemovePanel(panelId) {
-        this.removePanel(panelId);
+        return this.ConfirmRemovePanel(panelId);
     }
     destroyPanelComponent(panelId) {
         const entry = this._panelComponents.get(panelId);
@@ -1203,7 +1423,7 @@ export class DashboardViewerComponent extends BaseAngularComponent {
         // Update IsEditing on all dynamic components
         this._panelComponents.forEach((entry) => {
             if (entry.componentRef) {
-                entry.componentRef.instance.IsEditing = this.isEditing;
+                entry.componentRef.instance.IsEditing = this.IsEditing;
             }
         });
         // Save current layout before reinitializing (preserves user's arrangement)
@@ -1222,8 +1442,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
     // Private Methods - State
     // ========================================
     markDirty() {
-        this.hasUnsavedChanges = true;
-        if (this.autoSave && this.config) {
+        this.HasUnsavedChanges = true;
+        if (this.AutoSave && this.config) {
             this.save();
         }
     }
@@ -1232,8 +1452,8 @@ export class DashboardViewerComponent extends BaseAngularComponent {
             i0.ɵɵviewQuery(_c0, 7);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutContainer = _t.first);
-        } }, inputs: { dashboard: "dashboard", dashboardId: "dashboardId", isEditing: "isEditing", showToolbar: "showToolbar", autoSave: "autoSave", showBreadcrumb: "showBreadcrumb", showOpenInTabButton: "showOpenInTabButton", showEditButton: "showEditButton", Categories: "Categories" }, outputs: { configChanged: "configChanged", navigationRequested: "navigationRequested", panelInteraction: "panelInteraction", dashboardSaved: "dashboardSaved", error: "error", editModeChanged: "editModeChanged", breadcrumbNavigate: "breadcrumbNavigate", openInTab: "openInTab", layoutLifecycle: "layoutLifecycle", layoutReady: "layoutReady", 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) {
+            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) {
             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);
@@ -1256,47 +1476,81 @@ export class DashboardViewerComponent extends BaseAngularComponent {
 (() => { (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"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }], { dashboard: [{
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }], { Dashboard: [{
+            type: Input
+        }], dashboard: [{
+            type: Input
+        }], DashboardId: [{
             type: Input
         }], dashboardId: [{
             type: Input
+        }], IsEditing: [{
+            type: Input
         }], isEditing: [{
             type: Input
+        }], ShowToolbar: [{
+            type: Input
         }], showToolbar: [{
             type: Input
+        }], AutoSave: [{
+            type: Input
         }], autoSave: [{
             type: Input
+        }], ShowBreadcrumb: [{
+            type: Input
         }], showBreadcrumb: [{
             type: Input
+        }], ShowOpenInTabButton: [{
+            type: Input
         }], showOpenInTabButton: [{
             type: Input
+        }], ShowEditButton: [{
+            type: Input
         }], showEditButton: [{
             type: Input
         }], Categories: [{
             type: Input
         }], configChanged: [{
             type: Output
+        }], NavigationRequested: [{
+            type: Output
         }], navigationRequested: [{
             type: Output
+        }], PanelInteraction: [{
+            type: Output
         }], panelInteraction: [{
             type: Output
+        }], DashboardSaved: [{
+            type: Output
         }], dashboardSaved: [{
             type: Output
         }], error: [{
             type: Output
+        }], EditModeChanged: [{
+            type: Output
         }], editModeChanged: [{
             type: Output
+        }], BreadcrumbNavigate: [{
+            type: Output
         }], breadcrumbNavigate: [{
             type: Output
+        }], OpenInTab: [{
+            type: Output
         }], openInTab: [{
             type: Output
+        }], LayoutLifecycle: [{
+            type: Output
         }], layoutLifecycle: [{
             type: Output
+        }], LayoutReady: [{
+            type: Output
         }], layoutReady: [{
             type: Output
+        }], LayoutDeferred: [{
+            type: Output
         }], layoutDeferred: [{
             type: Output
-        }], layoutContainer: [{
+        }], LayoutContainer: [{
             type: ViewChild,
             args: ['layoutContainer', { static: true }]
         }] }); })();