@memberjunction/ng-dashboards 6.2.0-edge.2 → 6.2.0-edge.4

package/dist/DashboardEditor/dashboard-editor.component.js

@@ -0,0 +1,1022 @@
+import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, ViewChild, ViewContainerRef, inject } from '@angular/core';
+import { Subject, auditTime, filter, takeUntil } from 'rxjs';
+import { LogError } from '@memberjunction/core';
+import { DashboardEngine } from '@memberjunction/core-entities';
+import { UUIDsEqual } from '@memberjunction/global';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { DashboardFavoritesService, HomeAppPinService, SafeDetectChanges } from '@memberjunction/ng-shared';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { MJConfirmService } from '@memberjunction/ng-ui-components';
+import { ExtractPanelsFromLayout, RemovePartConfirmOptions } from '@memberjunction/ng-dashboard-viewer';
+import { DashboardViewerFactory } from './dashboard-viewer-factory';
+import { DASHBOARD_SAVE_IN_PROGRESS } from './dashboard-editor.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-dashboard-viewer";
+const _c0 = ["body"];
+const _c1 = ["viewerHost"];
+const _c2 = [[["", "headerTools", ""]], [["", "viewActions", ""]]];
+const _c3 = ["[headerTools]", "[viewActions]"];
+const _c4 = (a0, a1) => ({ $implicit: a0, Dashboard: a1 });
+function DashboardEditorComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-stat-badge", 7);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 10);
+} if (rf & 2) {
+    const dashboard_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.TitleTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c4, dashboard_r1, dashboard_r1));
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 14);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h1", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_2_Template, 1, 0, "i", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dashboard_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dashboard_r1.Name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsSharedWithUser ? 2 : -1);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dashboard_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(dashboard_r1.Description);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 13);
+    i0.ɵɵtext(1, "Add a description");
+    i0.ɵɵelementEnd();
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template, 1, 5, "ng-container", 10)(1, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template, 3, 2, "h1", 11);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_2_Template, 2, 1, "p", 12)(3, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_3_Template, 2, 0, "p", 13);
+} if (rf & 2) {
+    const dashboard_r1 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.TitleTemplate ? 0 : 1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(dashboard_r1.Description ? 2 : ctx_r1.CanEdit ? 3 : -1);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 15);
+    i0.ɵɵtwoWayListener("ngModelChange", function DashboardEditorComponent_Conditional_0_Conditional_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditingName, $event) || (ctx_r1.EditingName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("blur", function DashboardEditorComponent_Conditional_0_Conditional_4_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnNameBlur()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "input", 16);
+    i0.ɵɵtwoWayListener("ngModelChange", function DashboardEditorComponent_Conditional_0_Conditional_4_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditingDescription, $event) || (ctx_r1.EditingDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditingName);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditingDescription);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleFavorite()); });
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("is-favorite", ctx_r1.IsFavorite);
+    i0.ɵɵproperty("title", ctx_r1.IsFavorite ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵattribute("aria-label", ctx_r1.IsFavorite ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.IsFavorite ? "fa-solid fa-star" : "fa-regular fa-star");
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const dashboard_r1 = i0.ɵɵnextContext(2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenInDashboardsRequested.emit(dashboard_r1)); });
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵtext(2, " Open in Dashboards ");
+    i0.ɵɵelementEnd();
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "span", 23);
+    i0.ɵɵelementStart(1, "button", 24);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.EnterEditMode()); });
+    i0.ɵɵelement(2, "i", 25);
+    i0.ɵɵtext(3, " Edit ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Template, 2, 6, "button", 17);
+    i0.ɵɵprojection(1, 1);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template, 3, 0, "button", 18);
+    i0.ɵɵconditionalCreate(3, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_3_Template, 4, 1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.ShowFavorite ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowOpenInDashboards ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.CanEdit ? 3 : -1);
+} }
+function DashboardEditorComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenAddPartDialog()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵtext(2, " Add part ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "span", 23);
+    i0.ɵɵelementStart(4, "button", 28);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SaveDashboard()); });
+    i0.ɵɵelement(5, "i", 20);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 29);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_8_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CancelEdit()); });
+    i0.ɵɵtext(8, "Cancel");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.IsSaving ? "fa-solid fa-spinner fa-spin" : "fa-solid fa-check");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.IsSaving ? "Saving..." : "Save", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+} }
+function DashboardEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "header", 6);
+    i0.ɵɵconditionalCreate(1, DashboardEditorComponent_Conditional_0_Conditional_1_Template, 1, 0, "mj-stat-badge", 7);
+    i0.ɵɵelementStart(2, "div", 8);
+    i0.ɵɵconditionalCreate(3, DashboardEditorComponent_Conditional_0_Conditional_3_Template, 4, 2)(4, DashboardEditorComponent_Conditional_0_Conditional_4_Template, 2, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9);
+    i0.ɵɵprojection(6);
+    i0.ɵɵconditionalCreate(7, DashboardEditorComponent_Conditional_0_Conditional_7_Template, 4, 3)(8, DashboardEditorComponent_Conditional_0_Conditional_8_Template, 9, 6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("is-editing", ctx_r1.IsEditing);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsEditing ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.IsEditing ? 3 : 4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.IsEditing ? 7 : 8);
+} }
+function DashboardEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dashboard-part-dialog", 30);
+    i0.ɵɵlistener("Saved", function DashboardEditorComponent_Conditional_6_Template_mj_dashboard_part_dialog_Saved_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPartDialogSaved($event)); })("Cancelled", function DashboardEditorComponent_Conditional_6_Template_mj_dashboard_part_dialog_Cancelled_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ClosePartDialog()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("Mode", ctx_r1.PartDialogMode)("PartTypes", ctx_r1.PartTypes)("Panel", ctx_r1.EditPartPanel)("Provider", ctx_r1.Provider);
+} }
+/** The entity of the dashboard records DashboardEngine caches. */
+const DASHBOARDS_ENTITY_NAME = 'MJ: Dashboards';
+/** How long Save waits for the dashboard screenshot. After that it saves without a new one. */
+const SAVE_SCREENSHOT_TIMEOUT_MS = 1500;
+/** Why a Save stopped: asked whether to replace a save made elsewhere, the user chose Keep editing. */
+const KEPT_EDITING = 'The user kept editing: the dashboard was saved elsewhere.';
+/** Why a Save stopped before the viewer saved: the editor shows another dashboard now. */
+const DASHBOARD_CHANGED_BEFORE_SAVE = 'The editor shows another dashboard now. The dashboard was not saved.';
+/** The part types offered while no viewer is open: one empty list, so change detection sees a stable value. */
+const NO_PART_TYPES = [];
+/** Permissions before a dashboard loads: nothing is allowed, so no Edit button flashes. */
+const NO_PERMISSIONS = {
+    DashboardID: '', CanRead: false, CanEdit: false, CanDelete: false, CanShare: false, IsOwner: false, PermissionSource: 'none',
+};
+/**
+ * A Config dashboard with its header: view mode (title, description, favorite, host actions, Edit) and
+ * edit mode (Editing badge, name and description fields, Add part, Save, Cancel), the part dialog and the
+ * dashboard viewer. Made for the dashboard tab and Home's dashboard view, so both edit a dashboard the same
+ * way; Save asks before it replaces a save made elsewhere during the edit. It never navigates: hosts
+ * handle its events.
+ *
+ * Hosts project their own header buttons: `[headerTools]` shows in both modes, `[viewActions]` in view
+ * mode after the star.
+ */
+export class DashboardEditorComponent extends BaseAngularComponent {
+    cdr = inject(ChangeDetectorRef);
+    favoritesService = inject(DashboardFavoritesService);
+    pinService = inject(HomeAppPinService);
+    confirmService = inject(MJConfirmService);
+    viewerFactory = inject(DashboardViewerFactory);
+    // ── Inputs ────────────────────────────────────────────────
+    _dashboardId = null;
+    viewInitialized = false;
+    /**
+     * The Config dashboard to show. The editor reads it from DashboardEngine. The same ID again (in any
+     * case) changes nothing; another ID drops an edit in progress and shows that dashboard; null clears.
+     */
+    set DashboardId(value) {
+        const id = value?.trim() || null;
+        if (UUIDsEqual(id, this._dashboardId))
+            return;
+        this._dashboardId = id;
+        if (this.viewInitialized)
+            void this.load();
+    }
+    get DashboardId() {
+        return this._dashboardId;
+    }
+    /** Enter edit mode when the dashboard finishes loading. Read once per load, then reset (StartInEditModeChange). */
+    StartInEditMode = false;
+    /** Emits false when the editor has read StartInEditMode, for a two-way binding. */
+    StartInEditModeChange = new EventEmitter();
+    /** Replaces the view-mode title, for example with Home's breadcrumb and dashboard switcher. */
+    TitleTemplate = null;
+    /** Shows "Open in Dashboards" in view mode. */
+    ShowOpenInDashboards = false;
+    /** Shows the favorite star in view mode. */
+    ShowFavorite = true;
+    /** 'fill': the dashboard fills the editor. 'card': a padded card body. */
+    BodyStyle = 'fill';
+    // ── Outputs ───────────────────────────────────────────────
+    /** The dashboard's layout is ready. Once for each DashboardId. */
+    Loaded = new EventEmitter();
+    /**
+     * The dashboard could not be shown: DashboardEngine does not hold it, it is a Code dashboard, or its
+     * layout failed. The editor then shows no dashboard.
+     */
+    LoadFailed = new EventEmitter();
+    /** The editor entered (true) or left (false) edit mode. Not emitted when the editor is destroyed. */
+    EditingChange = new EventEmitter();
+    /** The viewer saved the dashboard (before the editor leaves edit mode). */
+    Saved = new EventEmitter();
+    /** The shown dashboard's saved name changed: this editor's Save, or a save elsewhere. Never empty. */
+    NameChanged = new EventEmitter();
+    /** The viewer's configuration changed (parts, layout). */
+    ConfigChanged = new EventEmitter();
+    /** The editor rebuilt the saved layout because the dashboard was saved elsewhere. */
+    ReloadedFromSaved = new EventEmitter();
+    /** The user starred (true) or unstarred (false) the dashboard. */
+    FavoriteChange = new EventEmitter();
+    /** A part asked to open something: a record, another dashboard, a query. */
+    NavigationRequested = new EventEmitter();
+    /** The user clicked "Open in Dashboards". */
+    OpenInDashboardsRequested = new EventEmitter();
+    /** In 'fill' style the editor takes its host's full height. */
+    get IsFill() { return this.BodyStyle === 'fill'; }
+    // ── View ──────────────────────────────────────────────────
+    bodyRef;
+    viewerHost;
+    // ── State ─────────────────────────────────────────────────
+    /** True while the editor is in edit mode. */
+    IsEditing = false;
+    /**
+     * True while a Save of the shown dashboard runs (the question about a save made elsewhere, the
+     * screenshot, then the save). Meanwhile Edit, Save, Cancel, Add part and part edits do nothing, and
+     * the header shows it.
+     */
+    IsSaving = false;
+    /** The name field. */
+    EditingName = '';
+    /** The description field. */
+    EditingDescription = '';
+    /** The user's permissions for the shown dashboard. Nothing is allowed before a dashboard loads. */
+    Permissions = NO_PERMISSIONS;
+    /** Whether the part dialog is open to add a part or to edit one. Null while it is closed. */
+    PartDialogMode = null;
+    /** The part the part dialog edits in edit mode. */
+    EditPartPanel = null;
+    _dashboard = null;
+    viewer = null;
+    viewerRef = null;
+    /** Each load gets a number; a load whose number is no longer the latest stops at its next step. */
+    loadGeneration = 0;
+    /** Each edit session gets a number; a dialog answer from an ended session does nothing. */
+    editSession = 0;
+    /** The saved name and description when the current edit session began. */
+    editBaseline = null;
+    /** The saved name last reported through NameChanged (or the name at load). */
+    reportedName = null;
+    destroy$ = new Subject();
+    /** Ends the subscriptions to the current viewer's events. */
+    viewerChanged$ = new Subject();
+    // ── Read-only state for hosts ─────────────────────────────
+    /** The shown dashboard: the instance DashboardEngine holds. Null before a load. */
+    get Dashboard() { return this._dashboard; }
+    /** The viewer, for hosts that drive it (the dashboard tab's agent tools). Null before a load. */
+    get Viewer() { return this.viewer; }
+    /** The element that holds the dashboard: the Save screenshot, the pin thumbnail and the agent's screenshot capture it. */
+    get BodyElement() { return this.bodyRef.nativeElement; }
+    /** True when the user can edit the shown dashboard. */
+    get CanEdit() { return this.Permissions.CanEdit; }
+    /** The part types the part dialog offers: the viewer's part types. */
+    get PartTypes() { return this.viewer?.GetPartTypes() ?? NO_PART_TYPES; }
+    /** True when someone else owns the dashboard and shared it with the user. */
+    get IsSharedWithUser() { return !this.Permissions.IsOwner && this.Permissions.PermissionSource !== 'none'; }
+    /** True when the shown dashboard is one of the user's favorites. False when the favorites cannot be read. */
+    get IsFavorite() {
+        const id = this._dashboard?.ID;
+        if (!id)
+            return false;
+        try {
+            return this.favoritesService.IsFavorite(id);
+        }
+        catch {
+            return false;
+        }
+    }
+    /** True while editing with changes the viewer or the fields have not saved. */
+    get HasUnsavedChanges() {
+        const dashboard = this._dashboard;
+        if (!this.IsEditing || !dashboard)
+            return false;
+        return (this.viewer?.HasUnsavedChanges ?? false)
+            || this.EditingName !== dashboard.Name
+            || this.EditingDescription !== (dashboard.Description ?? '');
+    }
+    // ── Lifecycle ─────────────────────────────────────────────
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.watchSavedDashboard();
+        this.watchFavorites();
+        if (this._dashboardId)
+            void this.load();
+    }
+    /** Stops a load in progress at its next step, ends the subscriptions and destroys the viewer. */
+    ngOnDestroy() {
+        this.loadGeneration++;
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.dropViewer();
+    }
+    // ── Load ──────────────────────────────────────────────────
+    /**
+     * Shows the dashboard DashboardId names. Drops the dashboard shown before. When the dashboard cannot
+     * be shown, the editor shows none (an edit begun while the layout built ends) and emits LoadFailed.
+     */
+    async load() {
+        const generation = ++this.loadGeneration;
+        this.teardownViewer();
+        const id = this._dashboardId;
+        if (!id) {
+            SafeDetectChanges(this.cdr);
+            return;
+        }
+        try {
+            const dashboard = await this.findConfigDashboard(id);
+            if (generation !== this.loadGeneration)
+                return;
+            await this.showDashboard(dashboard, generation);
+        }
+        catch (error) {
+            if (generation !== this.loadGeneration)
+                return;
+            this.teardownViewer();
+            SafeDetectChanges(this.cdr);
+            LogError(`Dashboard editor: could not load dashboard ${id}: ${errorMessage(error)}`);
+            this.LoadFailed.emit({ DashboardId: id, Message: errorMessage(error) });
+        }
+    }
+    /** The Config dashboard with this ID in DashboardEngine. Rejects when the engine has none, or it is a Code dashboard. */
+    async findConfigDashboard(id) {
+        const provider = this.ProviderToUse;
+        await DashboardEngine.Instance.Config(false, provider.CurrentUser, provider);
+        const dashboard = DashboardEngine.Instance.Dashboards.find(d => UUIDsEqual(d.ID, id));
+        if (!dashboard)
+            throw new Error(`Dashboard with ID ${id} not found.`);
+        if (dashboard.Type === 'Code')
+            throw new Error(`"${dashboard.Name}" is a Code dashboard. The editor shows Config dashboards.`);
+        return dashboard;
+    }
+    /**
+     * Creates the viewer and shows the dashboard in it. The viewer is configured, and its events wired,
+     * before it gets the dashboard, because the dashboard starts the layout. Once the layout is ready the
+     * editor enters edit mode when StartInEditMode asks for it, then emits Loaded.
+     */
+    async showDashboard(dashboard, generation) {
+        const viewer = this.createViewer();
+        this._dashboard = dashboard;
+        this.reportedName = dashboard.Name;
+        this.Permissions = this.readPermissions(dashboard);
+        this.configureViewer(viewer);
+        viewer.Dashboard = dashboard; // starts the layout
+        SafeDetectChanges(this.cdr); // the header shows while the layout builds
+        await viewer.WaitForLayoutReady();
+        if (generation !== this.loadGeneration)
+            return;
+        this.applyStartInEditMode();
+        SafeDetectChanges(this.cdr);
+        this.Loaded.emit(dashboard);
+    }
+    /** Creates the viewer in the body. Its host element fills the body: component CSS cannot reach a created host. */
+    createViewer() {
+        const ref = this.viewerFactory.Create(this.viewerHost);
+        const element = ref.location.nativeElement;
+        element.style.width = '100%';
+        element.style.height = '100%';
+        this.viewerRef = ref;
+        this.viewer = ref.instance;
+        return ref.instance;
+    }
+    /** Sets the viewer up for the editor, which shows the header, and passes the viewer's events on. */
+    configureViewer(viewer) {
+        viewer.Provider = this.Provider;
+        viewer.ShowToolbar = false;
+        viewer.ShowBreadcrumb = false;
+        viewer.ShowOpenInTabButton = false;
+        viewer.ShowEditButton = false;
+        viewer.CanEdit = this.Permissions.CanEdit;
+        viewer.Categories = DashboardEngine.Instance.DashboardCategories;
+        viewer.NavigationRequested.pipe(takeUntil(this.viewerChanged$)).subscribe(event => this.NavigationRequested.emit(event));
+        viewer.DashboardSaved.pipe(takeUntil(this.viewerChanged$)).subscribe(saved => this.onViewerSaved(saved));
+        viewer.error.pipe(takeUntil(this.viewerChanged$)).subscribe(e => LogError(`Dashboard editor: ${e.message}${e.error ? `: ${e.error.message}` : ''}`));
+        viewer.configChanged.pipe(takeUntil(this.viewerChanged$)).subscribe(() => this.ConfigChanged.emit());
+        viewer.PanelInteraction.pipe(takeUntil(this.viewerChanged$)).subscribe(event => this.onPanelInteraction(event));
+    }
+    /** Destroys the viewer and forgets the dashboard. An edit in progress is dropped, and EditingChange says so. */
+    teardownViewer() {
+        if (this.dropViewer())
+            this.EditingChange.emit(false);
+    }
+    /**
+     * Destroys the viewer and forgets the dashboard and its edit. A Save of that dashboard still running
+     * stops at its next step, and IsSaving is false for the next dashboard. Returns whether an edit was in
+     * progress.
+     */
+    dropViewer() {
+        const wasEditing = this.IsEditing;
+        this.viewerChanged$.next();
+        this.closePartDialogs();
+        this.IsEditing = false;
+        this.IsSaving = false;
+        this.editSession++;
+        this.viewerRef?.destroy();
+        this.viewerRef = null;
+        this.viewer = null;
+        this._dashboard = null;
+        this.reportedName = null;
+        this.Permissions = NO_PERMISSIONS;
+        return wasEditing;
+    }
+    /** Enters edit mode once when the host asked for it with StartInEditMode, and resets the input. */
+    applyStartInEditMode() {
+        if (!this.StartInEditMode)
+            return;
+        this.StartInEditMode = false;
+        this.StartInEditModeChange.emit(false);
+        this.EnterEditMode();
+    }
+    /** Reads the user's permissions for the dashboard again, for example after the host's Share dialog saved. */
+    RefreshPermissions() {
+        this.Permissions = this.readPermissions(this._dashboard);
+        if (this.viewer)
+            this.viewer.CanEdit = this.Permissions.CanEdit;
+        SafeDetectChanges(this.cdr);
+    }
+    /** The user's permissions for a dashboard. None without a dashboard. */
+    readPermissions(dashboard) {
+        return dashboard
+            ? DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, this.ProviderToUse.CurrentUser.ID)
+            : NO_PERMISSIONS;
+    }
+    // ── Edit mode ─────────────────────────────────────────────
+    /**
+     * Enters edit mode when the user can edit. Returns true when the editor is editing afterwards, and
+     * false, changing nothing, while a Save runs: that Save reads the name and description fields.
+     */
+    EnterEditMode() {
+        if (this.IsSaving)
+            return false;
+        if (this.IsEditing)
+            return true;
+        if (!this.startEditing())
+            return false;
+        SafeDetectChanges(this.cdr);
+        this.EditingChange.emit(true);
+        return true;
+    }
+    /** Leaves edit mode without saving, or enters it. */
+    ToggleEditMode() {
+        if (this.IsEditing)
+            this.CancelEdit();
+        else
+            this.EnterEditMode();
+    }
+    /**
+     * Puts the editor and its viewer in edit mode. Returns false, and changes nothing, without a dashboard
+     * or when the user cannot edit it. Takes DashboardEngine's current copy first: when the dashboard was
+     * saved elsewhere since the viewer loaded it, the viewer reloads the saved layout, so this edit's save
+     * keeps it. Notes the saved name and description, so Save can tell a save made elsewhere during the
+     * edit (see savedElsewhereSinceEditStart).
+     */
+    startEditing() {
+        if (!this._dashboard || !this.Permissions.CanEdit)
+            return false;
+        this.syncWithSavedDashboard();
+        const dashboard = this._dashboard; // the sync can take a newer copy
+        this.IsEditing = true;
+        this.editSession++;
+        this.EditingName = dashboard.Name;
+        this.EditingDescription = dashboard.Description || '';
+        this.editBaseline = { Name: dashboard.Name, Description: dashboard.Description ?? '' };
+        if (this.viewer)
+            this.viewer.IsEditing = true;
+        return true;
+    }
+    /**
+     * Leaves edit mode and drops the changes. The viewer reloads the saved layout before it leaves edit
+     * mode: it drops its layout at once, so leaving edit mode applies to the layout it rebuilds. Does
+     * nothing while a Save runs.
+     */
+    CancelEdit() {
+        if (this.IsSaving || !this.IsEditing)
+            return;
+        this.IsEditing = false;
+        this.editSession++;
+        this.closePartDialogs();
+        this.reloadSavedDashboard();
+        if (this.viewer)
+            this.viewer.IsEditing = false;
+        SafeDetectChanges(this.cdr);
+        this.EditingChange.emit(false);
+    }
+    // ── Save ──────────────────────────────────────────────────
+    /**
+     * Saves the name, description and layout, then leaves edit mode. An empty name is never saved: the
+     * previous name is kept. When the save fails, the editor stays in edit mode (see onSaveFailed). One
+     * Save runs at a time (see IsSaving).
+     */
+    async SaveDashboard() {
+        await this.saveAndLeaveEditMode();
+    }
+    /**
+     * Saves like SaveDashboard. Returns null when saved, also when the editor shows another dashboard by
+     * the time the viewer has saved; else why not. Outside edit mode it saves the dashboard's own name and
+     * description. `overrides` replace the fields first. While a Save runs it refuses at once and leaves
+     * the fields as they are.
+     */
+    async Save(overrides = {}) {
+        if (this.IsSaving)
+            return DASHBOARD_SAVE_IN_PROGRESS;
+        const dashboard = this._dashboard;
+        if (dashboard && !this.IsEditing) {
+            this.EditingName = dashboard.Name;
+            this.EditingDescription = dashboard.Description || '';
+        }
+        if (overrides.Name !== undefined)
+            this.EditingName = overrides.Name;
+        if (overrides.Description !== undefined)
+            this.EditingDescription = overrides.Description;
+        return this.saveAndLeaveEditMode();
+    }
+    /**
+     * The work of SaveDashboard and Save. Returns null when saved, else why not: no dashboard is open, a
+     * Save runs, another save of the dashboard object runs (see stopWhileSavedElsewhere), the user kept
+     * editing rather than replace a save made elsewhere, the editor showed another dashboard before the
+     * viewer saved, or the save failed (the user has seen that reason). A Save belongs to the viewer it
+     * started with: once the editor shows another dashboard, the Save changes nothing in the editor and
+     * leaves IsSaving to that dashboard. A save the viewer already made still returns null. See
+     * prepareSave for the steps before the viewer saves.
+     */
+    async saveAndLeaveEditMode() {
+        const dashboard = this._dashboard;
+        const viewer = this.viewer;
+        if (!dashboard || !viewer)
+            return 'No dashboard is open.';
+        if (this.IsSaving)
+            return DASHBOARD_SAVE_IN_PROGRESS;
+        const savingElsewhere = this.stopWhileSavedElsewhere(dashboard);
+        if (savingElsewhere)
+            return savingElsewhere;
+        this.IsSaving = true;
+        SafeDetectChanges(this.cdr);
+        try {
+            const stopped = await this.prepareSave(dashboard, viewer);
+            if (stopped)
+                return stopped;
+            if (!await viewer.save())
+                return this.onSaveFailed(dashboard);
+            if (viewer === this.viewer)
+                this.leaveEditModeAfterSave(viewer);
+            return null;
+        }
+        catch (error) {
+            return this.onSaveFailed(dashboard, error);
+        }
+        finally {
+            if (viewer === this.viewer) {
+                this.IsSaving = false;
+                SafeDetectChanges(this.cdr);
+            }
+        }
+    }
+    /**
+     * The steps of a Save before the viewer saves. It asks first when the dashboard was saved elsewhere
+     * since this edit began. Then it takes the screenshot and writes it, the name and the description to
+     * the dashboard; the fields are read after the screenshot, so a name typed meanwhile is saved. Returns
+     * why the Save stops, or null to save. When the editor shows another dashboard after a step, or another
+     * save of the dashboard object started meanwhile, it stops and writes nothing.
+     */
+    async prepareSave(dashboard, viewer) {
+        const replace = !this.savedElsewhereSinceEditStart() || await this.confirmOverwrite();
+        if (viewer !== this.viewer)
+            return DASHBOARD_CHANGED_BEFORE_SAVE;
+        if (!replace)
+            return KEPT_EDITING;
+        // The screenshot goes on the dashboard (Thumbnail), so this same Save stores the picture the
+        // dashboard cards show. A failed Save reverts it with the other fields.
+        const thumbnail = await this.takeDashboardThumbnail(viewer);
+        if (viewer !== this.viewer)
+            return DASHBOARD_CHANGED_BEFORE_SAVE;
+        const savingElsewhere = this.stopWhileSavedElsewhere(dashboard);
+        if (savingElsewhere)
+            return savingElsewhere;
+        if (thumbnail !== undefined)
+            dashboard.Thumbnail = thumbnail;
+        this.restoreEmptyName();
+        dashboard.Name = this.EditingName;
+        dashboard.Description = this.EditingDescription;
+        return null;
+    }
+    /**
+     * When another save of the dashboard object runs (Home's rename, for example), tells the user and returns why this
+     * Save stops: BaseEntity's Save would join that save and write none of this Save's changes. The editor stays in edit
+     * mode with the user's changes. Null when no other save runs.
+     */
+    stopWhileSavedElsewhere(dashboard) {
+        if (!dashboard.IsSaving)
+            return null;
+        const message = `"${dashboard.Name}" is being saved elsewhere. Save again in a moment.`;
+        MJNotificationService.Instance.CreateSimpleNotification(message, 'info', 3000);
+        return message;
+    }
+    /** Leaves edit mode after a successful save. A Save outside edit mode (an agent's request) emits no EditingChange. */
+    leaveEditModeAfterSave(viewer) {
+        const wasEditing = this.IsEditing;
+        this.IsEditing = false;
+        this.editSession++;
+        this.closePartDialogs();
+        viewer.IsEditing = false;
+        SafeDetectChanges(this.cdr);
+        if (wasEditing)
+            this.EditingChange.emit(false);
+    }
+    /**
+     * The dashboard's new Thumbnail: a small screenshot of the dashboard body, or null when the layout has
+     * no panels, so the dashboard cards show the icon. Undefined when no screenshot is ready in time (too
+     * many elements, no size, or the timeout): the current Thumbnail stays. Never throws.
+     */
+    async takeDashboardThumbnail(viewer) {
+        try {
+            if (ExtractPanelsFromLayout(viewer.getConfig()?.layout ?? null).length === 0)
+                return null;
+            return (await this.pinService.CaptureThumbnail(this.BodyElement, SAVE_SCREENSHOT_TIMEOUT_MS)) || undefined;
+        }
+        catch (error) {
+            LogError(`Dashboard editor: could not take a screenshot of the dashboard: ${errorMessage(error)}`);
+            return undefined;
+        }
+    }
+    /** Keeps the previous name when the user leaves the name field empty or with only spaces. */
+    OnNameBlur() {
+        this.restoreEmptyName();
+    }
+    /** Puts the saved name back into an empty or spaces-only name field. */
+    restoreEmptyName() {
+        if (!this.EditingName.trim()) {
+            this.EditingName = this._dashboard?.Name || 'Untitled Dashboard';
+        }
+    }
+    /**
+     * Handles a save that did not complete. The editor stays in edit mode with the user's changes, the
+     * cached dashboard (which other pages read) goes back to its saved values, and the user sees why.
+     * Returns the message the user sees.
+     */
+    onSaveFailed(dashboard, error) {
+        const reason = this.saveFailureReason(dashboard, error);
+        dashboard.Revert();
+        LogError(`Dashboard editor: could not save the dashboard: ${reason || 'no reason given'}`);
+        const message = reason ? `Could not save the dashboard: ${reason}` : 'Could not save the dashboard';
+        MJNotificationService.Instance.CreateSimpleNotification(message, 'error', 5000);
+        SafeDetectChanges(this.cdr);
+        return message;
+    }
+    /** Why a save failed: the thrown error, else the dashboard's failed save result. Empty when neither says. */
+    saveFailureReason(dashboard, error) {
+        if (error !== undefined)
+            return errorMessage(error);
+        const latest = dashboard.LatestResult;
+        return latest && !latest.Success ? latest.CompleteMessage : '';
+    }
+    /** Passes a save of the viewer on to the host, with the new name when it changed. */
+    onViewerSaved(saved) {
+        this.Saved.emit(saved);
+        this.reportNameIfChanged(saved.Name);
+    }
+    /** Emits NameChanged when the saved name differs from the one last reported. An empty name is never reported. */
+    reportNameIfChanged(name) {
+        if (!name || name === this.reportedName)
+            return;
+        this.reportedName = name;
+        this.NameChanged.emit(name);
+    }
+    // ── Saved elsewhere ───────────────────────────────────────
+    /**
+     * Follows DashboardEngine's changes to the shown dashboard until the editor is destroyed. A burst of
+     * changes is handled once, after the current task.
+     */
+    watchSavedDashboard() {
+        DashboardEngine.Instance.DataChange$.pipe(filter(event => this.isChangeToShownDashboard(event)), auditTime(0), takeUntil(this.destroy$)).subscribe(() => this.onSavedDashboardChanged());
+    }
+    /** True for a change to the shown dashboard's record, or for a reload of all dashboards. */
+    isChangeToShownDashboard(event) {
+        const shown = this._dashboard;
+        if (!shown || event.config.EntityName?.trim().toLowerCase() !== DASHBOARDS_ENTITY_NAME.toLowerCase()) {
+            return false;
+        }
+        const affected = event.affectedEntity;
+        return !affected || affected === shown || affected.PrimaryKey.Equals(shown.PrimaryKey);
+    }
+    /**
+     * Brings an idle editor in step with the saved dashboard after a change to it, and reports a rename
+     * saved elsewhere, also while editing: the host's title follows the saved name, and the name the user
+     * typed stays in the field.
+     */
+    onSavedDashboardChanged() {
+        if (!this.IsEditing && this.syncWithSavedDashboard() === 'reloaded') {
+            this.ReloadedFromSaved.emit();
+        }
+        this.reportNameIfChanged((this.savedDashboard() ?? this._dashboard)?.Name);
+        SafeDetectChanges(this.cdr);
+    }
+    /**
+     * Brings the shown dashboard in step with DashboardEngine's current copy of it. The viewer rebuilds
+     * only when the saved layout differs from the one it shows. When only the copy is new (DashboardEngine
+     * reloaded its dashboards), the editor and the viewer take it without a rebuild: a save writes every
+     * field of the entity, so saving an old copy would write its old values.
+     */
+    syncWithSavedDashboard() {
+        const viewer = this.viewer;
+        const saved = this.savedDashboard();
+        if (!viewer || !saved)
+            return 'unchanged';
+        if (viewer.HasNewerSavedLayout(saved)) {
+            this.reloadSavedDashboard();
+            return 'reloaded';
+        }
+        if (saved !== this._dashboard && viewer.UseSavedCopy(saved)) {
+            this._dashboard = saved;
+            return 'took-copy';
+        }
+        return 'unchanged';
+    }
+    /** Shows the saved dashboard in the viewer: DashboardEngine's copy of it when the engine has one. */
+    reloadSavedDashboard() {
+        const viewer = this.viewer;
+        const saved = this.savedDashboard() ?? this._dashboard;
+        if (!viewer || !saved)
+            return;
+        this._dashboard = saved;
+        viewer.ReloadFromSaved(saved).catch((error) => {
+            LogError(`Dashboard editor: could not reload the saved dashboard: ${errorMessage(error)}`);
+        });
+    }
+    /** The shown dashboard as DashboardEngine holds it now. Null when the engine does not have it. */
+    savedDashboard() {
+        const shown = this._dashboard;
+        if (!shown)
+            return null;
+        try {
+            return DashboardEngine.Instance.Dashboards.find(d => UUIDsEqual(d.ID, shown.ID)) ?? null;
+        }
+        catch {
+            return null; // the user cannot read the dashboards cache
+        }
+    }
+    /**
+     * True when the dashboard was saved elsewhere after the current edit session began: another layout,
+     * name or description. False outside edit mode, where no edit session runs.
+     */
+    savedElsewhereSinceEditStart() {
+        const saved = this.savedDashboard() ?? this._dashboard;
+        const baseline = this.editBaseline;
+        if (!this.IsEditing || !saved || !baseline || !this.viewer)
+            return false;
+        return this.viewer.HasNewerSavedLayout(saved)
+            || saved.Name !== baseline.Name
+            || (saved.Description ?? '') !== baseline.Description;
+    }
+    /** Asks whether to replace a save made elsewhere. Resolves true for Save anyway, false for Keep editing. */
+    confirmOverwrite() {
+        return this.confirmService.Confirm({
+            title: 'Replace changes saved elsewhere?',
+            message: 'This dashboard was saved in another place after you started editing. Saving now replaces those changes.',
+            type: 'warning',
+            confirmText: 'Save anyway',
+            cancelText: 'Keep editing',
+        });
+    }
+    // ── Parts ─────────────────────────────────────────────────
+    /** Routes the viewer's part requests. Outside edit mode, only Add part on an empty dashboard counts: it enters edit mode first. */
+    onPanelInteraction(event) {
+        if (event.interactionType !== 'custom' || this.IsSaving)
+            return;
+        const action = event.payload?.['action'];
+        if (!this.IsEditing && (action !== 'add-panel-requested' || !this.EnterEditMode()))
+            return;
+        switch (action) {
+            case 'add-panel-requested':
+                this.OpenAddPartDialog();
+                break;
+            case 'configure-part-requested':
+                this.openEditPartDialog(event.panelId);
+                break;
+            case 'remove-part-requested':
+                void this.confirmRemovePart(event.panelId);
+                break;
+        }
+    }
+    /** Opens the part dialog to add a part. Only while editing and not saving. */
+    OpenAddPartDialog() {
+        if (!this.IsEditing || this.IsSaving)
+            return;
+        this.EditPartPanel = null;
+        this.PartDialogMode = 'add';
+        SafeDetectChanges(this.cdr);
+    }
+    /** Opens the part dialog to edit the part with this panel ID. */
+    openEditPartDialog(panelId) {
+        const panel = this.viewer?.GetPanel(panelId) ?? null;
+        if (!panel)
+            return;
+        this.EditPartPanel = panel;
+        this.PartDialogMode = 'edit';
+        SafeDetectChanges(this.cdr);
+    }
+    /** Adds the part, or applies the edited part, from the part dialog. */
+    async OnPartDialogSaved(result) {
+        const mode = this.PartDialogMode;
+        const panel = this.EditPartPanel;
+        this.closePartDialogs();
+        if (mode === 'add') {
+            await this.applyPartChange('Could not add the part', async (v) => { await v.AddPanel(result.PartType.ID, result.Config, result.Title, result.Icon); });
+        }
+        else if (mode === 'edit' && panel) {
+            await this.applyPartChange('Could not update the part', v => v.UpdatePanelConfig(panel.id, result.Config, result.Title, result.Icon));
+        }
+    }
+    /** Closes the part dialog. */
+    ClosePartDialog() {
+        this.closePartDialogs();
+        SafeDetectChanges(this.cdr);
+    }
+    /** Closes every part dialog. A part dialog belongs to one edit session. */
+    closePartDialogs() {
+        this.PartDialogMode = null;
+        this.EditPartPanel = null;
+    }
+    /**
+     * Asks the user to confirm removing a part, then removes it. Changes nothing when the user cancels, or when the
+     * edit session, the viewer or the part changed while the confirm was open.
+     */
+    async confirmRemovePart(panelId) {
+        const viewer = this.viewer;
+        const panel = viewer?.GetPanel(panelId);
+        if (!viewer || !panel)
+            return;
+        const session = this.editSession;
+        const confirmed = await this.confirmService.ConfirmDelete(RemovePartConfirmOptions(panel.title, viewer.GetPartTypeForPanel(panelId)?.Name));
+        if (!confirmed || !this.IsEditing || session !== this.editSession || viewer !== this.viewer || !viewer.GetPanel(panelId))
+            return;
+        await this.applyPartChange('Could not remove the part', v => v.ConfirmRemovePanel(panelId));
+    }
+    /**
+     * Applies one part change to the viewer, tells the user when it fails, and reports the change through
+     * ConfigChanged. The change is saved with the dashboard's Save. Does nothing while a Save runs, for
+     * example from a dialog that was open when the Save started.
+     */
+    async applyPartChange(failureMessage, change) {
+        const viewer = this.viewer;
+        if (!viewer || this.IsSaving)
+            return;
+        try {
+            await change(viewer);
+        }
+        catch (error) {
+            LogError(`Dashboard editor: ${failureMessage}: ${errorMessage(error)}`);
+            MJNotificationService.Instance.CreateSimpleNotification(failureMessage, 'error', 3000);
+        }
+        this.ConfigChanged.emit();
+    }
+    // ── Favorite ──────────────────────────────────────────────
+    /** Shows the star's new state when any favorite changes, also on another page, until the editor is destroyed. */
+    watchFavorites() {
+        this.favoritesService.Changed$.pipe(takeUntil(this.destroy$)).subscribe(() => SafeDetectChanges(this.cdr));
+    }
+    /** Stars or unstars the shown dashboard, tells the user the new state, and emits it through FavoriteChange. */
+    async ToggleFavorite() {
+        const dashboard = this._dashboard;
+        if (!dashboard)
+            return;
+        try {
+            const isFavorite = await this.favoritesService.Toggle(dashboard.ID);
+            const message = isFavorite ? `Added "${dashboard.Name}" to favorites` : `Removed "${dashboard.Name}" from favorites`;
+            MJNotificationService.Instance.CreateSimpleNotification(message, 'success', 2000);
+        }
+        catch (error) {
+            LogError(`Dashboard editor: could not change the favorite: ${errorMessage(error)}`);
+            MJNotificationService.Instance.CreateSimpleNotification('Could not change the favorite', 'error', 3000);
+        }
+        this.FavoriteChange.emit(this.IsFavorite);
+        SafeDetectChanges(this.cdr);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵDashboardEditorComponent_BaseFactory; return function DashboardEditorComponent_Factory(__ngFactoryType__) { return (ɵDashboardEditorComponent_BaseFactory || (ɵDashboardEditorComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DashboardEditorComponent)))(__ngFactoryType__ || DashboardEditorComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardEditorComponent, selectors: [["mj-dashboard-editor"]], viewQuery: function DashboardEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 7)(_c1, 7, ViewContainerRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bodyRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewerHost = _t.first);
+        } }, hostVars: 2, hostBindings: function DashboardEditorComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("dashboard-editor--fill", ctx.IsFill);
+        } }, inputs: { DashboardId: "DashboardId", StartInEditMode: "StartInEditMode", TitleTemplate: "TitleTemplate", ShowOpenInDashboards: "ShowOpenInDashboards", ShowFavorite: "ShowFavorite", BodyStyle: "BodyStyle" }, outputs: { StartInEditModeChange: "StartInEditModeChange", Loaded: "Loaded", LoadFailed: "LoadFailed", EditingChange: "EditingChange", Saved: "Saved", NameChanged: "NameChanged", ConfigChanged: "ConfigChanged", ReloadedFromSaved: "ReloadedFromSaved", FavoriteChange: "FavoriteChange", NavigationRequested: "NavigationRequested", OpenInDashboardsRequested: "OpenInDashboardsRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3, decls: 7, vars: 4, consts: [["body", ""], ["viewerHost", ""], [1, "dashboard-editor-header", 3, "is-editing"], [1, "dashboard-editor-main"], [1, "dashboard-editor-body"], [3, "Visible", "Mode", "PartTypes", "Panel", "Provider"], [1, "dashboard-editor-header"], ["Variant", "info", "Icon", "fa-solid fa-pen", "Label", "Editing", 1, "dashboard-editor-badge"], [1, "dashboard-editor-namewrap"], [1, "dashboard-editor-actions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "dashboard-editor-title"], [1, "dashboard-editor-desc"], [1, "dashboard-editor-desc", "is-placeholder"], ["role", "img", "title", "Shared with you", "aria-label", "Shared with you", 1, "fa-solid", "fa-share-nodes", "dashboard-editor-shared"], ["type", "text", "aria-label", "Dashboard name", "placeholder", "Name this dashboard", 1, "mj-input", "dashboard-editor-name", 3, "ngModelChange", "blur", "ngModel"], ["type", "text", "aria-label", "Dashboard description", "placeholder", "Add a description", 1, "dashboard-editor-desc", "is-editable", 3, "ngModelChange", "ngModel"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", 1, "dashboard-editor-favorite", 3, "is-favorite", "title"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm", 1, "dashboard-editor-open-in"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", 1, "dashboard-editor-favorite", 3, "click", "title"], ["aria-hidden", "true"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm", 1, "dashboard-editor-open-in", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-up-right-from-square"], ["aria-hidden", "true", 1, "dashboard-editor-divider"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", 1, "dashboard-editor-edit", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm", 1, "dashboard-editor-add-part", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", 1, "dashboard-editor-save", 3, "click", "disabled"], ["type", "button", "mjButton", "", "Variant", "flat", "Size", "sm", 1, "dashboard-editor-cancel", 3, "click", "disabled"], [3, "Saved", "Cancelled", "Visible", "Mode", "PartTypes", "Panel", "Provider"]], template: function DashboardEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c2);
+            i0.ɵɵconditionalCreate(0, DashboardEditorComponent_Conditional_0_Template, 9, 5, "header", 2);
+            i0.ɵɵelementStart(1, "div", 3)(2, "div", 4, 0);
+            i0.ɵɵelementContainer(4, null, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(6, DashboardEditorComponent_Conditional_6_Template, 1, 5, "mj-dashboard-part-dialog", 5);
+        } if (rf & 2) {
+            let tmp_2_0;
+            i0.ɵɵconditional((tmp_2_0 = ctx.Dashboard) ? 0 : -1, tmp_2_0);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("is-card", ctx.BodyStyle === "card");
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.Dashboard && ctx.IsEditing && ctx.PartDialogMode ? 6 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJStatBadgeComponent, i4.DashboardPartDialogComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }\n.dashboard-editor--fill[_nghost-%COMP%] { height: 100%; }\n\n.dashboard-editor-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: var(--mj-space-4); flex-shrink: 0;\n  min-height: 72px; padding: var(--mj-space-3) var(--mj-space-8);\n  background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default);\n}\n.dashboard-editor-namewrap[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n.dashboard-editor-title[_ngcontent-%COMP%] {\n  margin: 0; font-size: var(--mj-text-lg); font-weight: var(--mj-font-bold); letter-spacing: var(--mj-tracking-tight);\n  color: var(--mj-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.dashboard-editor-shared[_ngcontent-%COMP%] { margin-left: var(--mj-space-2); font-size: var(--mj-text-xs); color: var(--mj-brand-primary); }\n\n\n.dashboard-editor-name[_ngcontent-%COMP%] { max-width: 520px; font-size: var(--mj-text-lg); font-weight: var(--mj-font-bold); letter-spacing: var(--mj-tracking-tight); }\n\n.dashboard-editor-desc[_ngcontent-%COMP%] {\n  width: min(100%, 520px); margin: 0 0 0 -8px; padding: 3px 8px;\n  font: inherit; font-size: var(--mj-text-xs); color: var(--mj-text-secondary);\n  background: transparent; border: 1px solid transparent; border-radius: var(--mj-radius-md);\n}\n.dashboard-editor-desc.is-placeholder[_ngcontent-%COMP%], .dashboard-editor-desc[_ngcontent-%COMP%]::placeholder { color: var(--mj-text-muted); }\n.dashboard-editor-desc.is-editable[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-default); background: var(--mj-bg-surface-card); }\n.dashboard-editor-desc.is-editable[_ngcontent-%COMP%]:focus {\n  outline: none; border-color: var(--mj-border-focus); background: var(--mj-bg-surface); box-shadow: var(--mj-focus-ring);\n}\n\n.dashboard-editor-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: var(--mj-space-2); flex-shrink: 0; }\n.dashboard-editor-divider[_ngcontent-%COMP%] { width: 1px; height: 22px; margin: 0 var(--mj-space-1); background: var(--mj-border-default); }\n\n.dashboard-editor-favorite.is-favorite[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n.dashboard-editor-main[_ngcontent-%COMP%] { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n.dashboard-editor-body[_ngcontent-%COMP%] { position: relative; flex: 1; min-height: 0; overflow: hidden; }\n\n\n.dashboard-editor-main.is-card[_ngcontent-%COMP%] { padding: var(--mj-space-4) var(--mj-space-8) var(--mj-space-8); }\n.dashboard-editor-main.is-card[_ngcontent-%COMP%]   .dashboard-editor-body[_ngcontent-%COMP%] {\n  flex: none; height: max(480px, calc(100vh - 230px));\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg); box-shadow: var(--mj-shadow-sm);\n}\n\n@media (max-width: 900px) {\n  .dashboard-editor-header[_ngcontent-%COMP%] { flex-wrap: wrap; padding-left: var(--mj-space-4); padding-right: var(--mj-space-4); }\n  .dashboard-editor-main.is-card[_ngcontent-%COMP%] { padding-left: var(--mj-space-4); padding-right: var(--mj-space-4); }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardEditorComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-dashboard-editor', template: "@if (Dashboard; as dashboard) {\n  <header class=\"dashboard-editor-header\" [class.is-editing]=\"IsEditing\">\n    @if (IsEditing) {\n      <mj-stat-badge class=\"dashboard-editor-badge\" Variant=\"info\" Icon=\"fa-solid fa-pen\" Label=\"Editing\"></mj-stat-badge>\n    }\n\n    <div class=\"dashboard-editor-namewrap\">\n      @if (!IsEditing) {\n        @if (TitleTemplate) {\n          <ng-container [ngTemplateOutlet]=\"TitleTemplate\" [ngTemplateOutletContext]=\"{ $implicit: dashboard, Dashboard: dashboard }\"></ng-container>\n        } @else {\n          <h1 class=\"dashboard-editor-title\">\n            {{ dashboard.Name }}\n            @if (IsSharedWithUser) {\n              <i class=\"fa-solid fa-share-nodes dashboard-editor-shared\" role=\"img\" title=\"Shared with you\" aria-label=\"Shared with you\"></i>\n            }\n          </h1>\n        }\n        @if (dashboard.Description) {\n          <p class=\"dashboard-editor-desc\">{{ dashboard.Description }}</p>\n        } @else if (CanEdit) {\n          <p class=\"dashboard-editor-desc is-placeholder\">Add a description</p>\n        }\n      } @else {\n        <input type=\"text\" class=\"mj-input dashboard-editor-name\" aria-label=\"Dashboard name\" placeholder=\"Name this dashboard\"\n               [(ngModel)]=\"EditingName\" (blur)=\"OnNameBlur()\">\n        <input type=\"text\" class=\"dashboard-editor-desc is-editable\" aria-label=\"Dashboard description\" placeholder=\"Add a description\"\n               [(ngModel)]=\"EditingDescription\">\n      }\n    </div>\n\n    <div class=\"dashboard-editor-actions\">\n      <ng-content select=\"[headerTools]\"></ng-content>\n      @if (!IsEditing) {\n        @if (ShowFavorite) {\n          <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" class=\"dashboard-editor-favorite\" [class.is-favorite]=\"IsFavorite\"\n                  [title]=\"IsFavorite ? 'Remove from favorites' : 'Add to favorites'\"\n                  [attr.aria-label]=\"IsFavorite ? 'Remove from favorites' : 'Add to favorites'\" (click)=\"ToggleFavorite()\">\n            <i [class]=\"IsFavorite ? 'fa-solid fa-star' : 'fa-regular fa-star'\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        <ng-content select=\"[viewActions]\"></ng-content>\n        @if (ShowOpenInDashboards) {\n          <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" class=\"dashboard-editor-open-in\" (click)=\"OpenInDashboardsRequested.emit(dashboard)\">\n            <i class=\"fa-solid fa-up-right-from-square\" aria-hidden=\"true\"></i> Open in Dashboards\n          </button>\n        }\n        @if (CanEdit) {\n          <span class=\"dashboard-editor-divider\" aria-hidden=\"true\"></span>\n          <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" class=\"dashboard-editor-edit\" [disabled]=\"IsSaving\" (click)=\"EnterEditMode()\">\n            <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i> Edit\n          </button>\n        }\n      } @else {\n        <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" class=\"dashboard-editor-add-part\" [disabled]=\"IsSaving\" (click)=\"OpenAddPartDialog()\">\n          <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> Add part\n        </button>\n        <span class=\"dashboard-editor-divider\" aria-hidden=\"true\"></span>\n        <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" class=\"dashboard-editor-save\" [disabled]=\"IsSaving\" (click)=\"SaveDashboard()\">\n          <i [class]=\"IsSaving ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-check'\" aria-hidden=\"true\"></i>\n          {{ IsSaving ? 'Saving...' : 'Save' }}\n        </button>\n        <button type=\"button\" mjButton Variant=\"flat\" Size=\"sm\" class=\"dashboard-editor-cancel\" [disabled]=\"IsSaving\" (click)=\"CancelEdit()\">Cancel</button>\n      }\n    </div>\n  </header>\n}\n\n<div class=\"dashboard-editor-main\" [class.is-card]=\"BodyStyle === 'card'\">\n  <div #body class=\"dashboard-editor-body\">\n    <ng-container #viewerHost></ng-container>\n  </div>\n</div>\n\n<!-- The part dialog belongs to one edit session -->\n@if (Dashboard && IsEditing && PartDialogMode) {\n  <mj-dashboard-part-dialog [Visible]=\"true\" [Mode]=\"PartDialogMode\" [PartTypes]=\"PartTypes\"\n      [Panel]=\"EditPartPanel\" [Provider]=\"Provider\"\n      (Saved)=\"OnPartDialogSaved($event)\" (Cancelled)=\"ClosePartDialog()\"></mj-dashboard-part-dialog>\n}\n", styles: [":host { display: flex; flex-direction: column; min-width: 0; min-height: 0; }\n:host(.dashboard-editor--fill) { height: 100%; }\n\n.dashboard-editor-header {\n  display: flex; align-items: center; gap: var(--mj-space-4); flex-shrink: 0;\n  min-height: 72px; padding: var(--mj-space-3) var(--mj-space-8);\n  background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default);\n}\n.dashboard-editor-namewrap { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n.dashboard-editor-title {\n  margin: 0; font-size: var(--mj-text-lg); font-weight: var(--mj-font-bold); letter-spacing: var(--mj-tracking-tight);\n  color: var(--mj-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.dashboard-editor-shared { margin-left: var(--mj-space-2); font-size: var(--mj-text-xs); color: var(--mj-brand-primary); }\n\n/* .mj-input (global, ui-components input.scss) gives the border, radius, padding, hover and focus ring */\n.dashboard-editor-name { max-width: 520px; font-size: var(--mj-text-lg); font-weight: var(--mj-font-bold); letter-spacing: var(--mj-tracking-tight); }\n\n.dashboard-editor-desc {\n  width: min(100%, 520px); margin: 0 0 0 -8px; padding: 3px 8px;\n  font: inherit; font-size: var(--mj-text-xs); color: var(--mj-text-secondary);\n  background: transparent; border: 1px solid transparent; border-radius: var(--mj-radius-md);\n}\n.dashboard-editor-desc.is-placeholder, .dashboard-editor-desc::placeholder { color: var(--mj-text-muted); }\n.dashboard-editor-desc.is-editable:hover { border-color: var(--mj-border-default); background: var(--mj-bg-surface-card); }\n.dashboard-editor-desc.is-editable:focus {\n  outline: none; border-color: var(--mj-border-focus); background: var(--mj-bg-surface); box-shadow: var(--mj-focus-ring);\n}\n\n.dashboard-editor-actions { display: flex; align-items: center; gap: var(--mj-space-2); flex-shrink: 0; }\n.dashboard-editor-divider { width: 1px; height: 22px; margin: 0 var(--mj-space-1); background: var(--mj-border-default); }\n/* The colour goes on the icon, never on the button: button.scss owns the button */\n.dashboard-editor-favorite.is-favorite i { color: var(--mj-status-warning); }\n\n.dashboard-editor-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }\n.dashboard-editor-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }\n\n/* Card style: a padded body with the dashboard in a card. Golden Layout sizes itself from the body, so it needs a definite height. */\n.dashboard-editor-main.is-card { padding: var(--mj-space-4) var(--mj-space-8) var(--mj-space-8); }\n.dashboard-editor-main.is-card .dashboard-editor-body {\n  flex: none; height: max(480px, calc(100vh - 230px));\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg); box-shadow: var(--mj-shadow-sm);\n}\n\n@media (max-width: 900px) {\n  .dashboard-editor-header { flex-wrap: wrap; padding-left: var(--mj-space-4); padding-right: var(--mj-space-4); }\n  .dashboard-editor-main.is-card { padding-left: var(--mj-space-4); padding-right: var(--mj-space-4); }\n}\n"] }]
+    }], null, { DashboardId: [{
+            type: Input
+        }], StartInEditMode: [{
+            type: Input
+        }], StartInEditModeChange: [{
+            type: Output
+        }], TitleTemplate: [{
+            type: Input
+        }], ShowOpenInDashboards: [{
+            type: Input
+        }], ShowFavorite: [{
+            type: Input
+        }], BodyStyle: [{
+            type: Input
+        }], Loaded: [{
+            type: Output
+        }], LoadFailed: [{
+            type: Output
+        }], EditingChange: [{
+            type: Output
+        }], Saved: [{
+            type: Output
+        }], NameChanged: [{
+            type: Output
+        }], ConfigChanged: [{
+            type: Output
+        }], ReloadedFromSaved: [{
+            type: Output
+        }], FavoriteChange: [{
+            type: Output
+        }], NavigationRequested: [{
+            type: Output
+        }], OpenInDashboardsRequested: [{
+            type: Output
+        }], IsFill: [{
+            type: HostBinding,
+            args: ['class.dashboard-editor--fill']
+        }], bodyRef: [{
+            type: ViewChild,
+            args: ['body', { static: true }]
+        }], viewerHost: [{
+            type: ViewChild,
+            args: ['viewerHost', { read: ViewContainerRef, static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardEditorComponent, { className: "DashboardEditorComponent", filePath: "src/DashboardEditor/dashboard-editor.component.ts", lineNumber: 62 }); })();
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+//# sourceMappingURL=dashboard-editor.component.js.map