@memberjunction/ng-dashboards 6.2.0-edge.5 → 6.2.0-edge.7

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

@@ -21,22 +21,22 @@ 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);
+    i0.ɵɵelement(0, "mj-stat-badge", 8);
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 10);
+    i0.ɵɵelementContainer(0, 11);
 } 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);
+    i0.ɵɵelement(0, "i", 15);
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 11);
+    i0.ɵɵelementStart(0, "h1", 12);
     i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_2_Template, 1, 0, "i", 14);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Conditional_2_Template, 1, 0, "i", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const dashboard_r1 = i0.ɵɵnextContext(2);
@@ -47,7 +47,7 @@ function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Temp
     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.ɵɵelementStart(0, "p", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56,13 +56,13 @@ function DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_2_Temp
     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.ɵɵelementStart(0, "p", 14);
     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);
+    i0.ɵɵconditionalCreate(0, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_0_Template, 1, 5, "ng-container", 11)(1, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_1_Template, 3, 2, "h1", 12);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_2_Template, 2, 1, "p", 13)(3, DashboardEditorComponent_Conditional_0_Conditional_3_Conditional_3_Template, 2, 0, "p", 14);
 } if (rf & 2) {
     const dashboard_r1 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
@@ -72,11 +72,11 @@ function DashboardEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx)
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 15);
+    i0.ɵɵelementStart(0, "input", 16);
     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.ɵɵelementStart(1, "input", 17);
     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) {
@@ -87,9 +87,9 @@ function DashboardEditorComponent_Conditional_0_Conditional_4_Template(rf, ctx)
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 20);
     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.ɵɵelement(1, "i", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -101,18 +101,18 @@ function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Temp
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵelementStart(0, "button", 22);
     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.ɵɵelement(1, "i", 23);
     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.ɵɵelement(0, "span", 24);
+    i0.ɵɵelementStart(1, "button", 25);
     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.ɵɵelement(2, "i", 26);
     i0.ɵɵtext(3, " Edit ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -121,9 +121,9 @@ function DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_3_Temp
     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.ɵɵconditionalCreate(0, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_0_Template, 2, 6, "button", 18);
     i0.ɵɵprojection(1, 1);
-    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template, 3, 0, "button", 18);
+    i0.ɵɵconditionalCreate(2, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_2_Template, 3, 0, "button", 19);
     i0.ɵɵconditionalCreate(3, DashboardEditorComponent_Conditional_0_Conditional_7_Conditional_3_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -135,24 +135,31 @@ function DashboardEditorComponent_Conditional_0_Conditional_7_Template(rf, ctx)
 } }
 function DashboardEditorComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵelementStart(0, "button", 27);
     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.ɵɵelement(1, "i", 28);
     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.ɵɵelementStart(3, "button", 29);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenPropertiesDialog()); });
+    i0.ɵɵelement(4, "i", 30);
+    i0.ɵɵtext(5, " Properties ");
     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.ɵɵelement(6, "span", 24);
+    i0.ɵɵelementStart(7, "button", 31);
+    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.SaveDashboard()); });
+    i0.ɵɵelement(8, "i", 21);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 32);
+    i0.ɵɵlistener("click", function DashboardEditorComponent_Conditional_0_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CancelEdit()); });
+    i0.ɵɵtext(11, "Cancel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
     i0.ɵɵadvance();
@@ -163,14 +170,14 @@ function DashboardEditorComponent_Conditional_0_Conditional_8_Template(rf, ctx)
     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.ɵɵelementStart(0, "header", 7);
+    i0.ɵɵconditionalCreate(1, DashboardEditorComponent_Conditional_0_Conditional_1_Template, 1, 0, "mj-stat-badge", 8);
+    i0.ɵɵelementStart(2, "div", 9);
     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.ɵɵelementStart(5, "div", 10);
     i0.ɵɵprojection(6);
-    i0.ɵɵconditionalCreate(7, DashboardEditorComponent_Conditional_0_Conditional_7_Template, 4, 3)(8, DashboardEditorComponent_Conditional_0_Conditional_8_Template, 9, 6);
+    i0.ɵɵconditionalCreate(7, DashboardEditorComponent_Conditional_0_Conditional_7_Template, 4, 3)(8, DashboardEditorComponent_Conditional_0_Conditional_8_Template, 12, 7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -184,12 +191,21 @@ function DashboardEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dashboard-part-dialog", 30);
+    i0.ɵɵelementStart(0, "mj-dashboard-part-dialog", 33);
     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);
+    i0.ɵɵproperty("Visible", true)("Mode", ctx_r1.PartDialogMode)("PartTypes", ctx_r1.PartTypes)("Panel", ctx_r1.EditPartPanel)("Provider", ctx_r1.Provider)("DashboardProperties", ctx_r1.DashboardProperties);
+} }
+function DashboardEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dashboard-properties-dialog", 34);
+    i0.ɵɵlistener("Saved", function DashboardEditorComponent_Conditional_7_Template_mj_dashboard_properties_dialog_Saved_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPropertiesDialogSaved($event)); })("Cancelled", function DashboardEditorComponent_Conditional_7_Template_mj_dashboard_properties_dialog_Cancelled_0_listener() { i0.ɵɵrestoreView(_r9); 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)("Properties", ctx_r1.DashboardProperties)("Wires", ctx_r1.DashboardWires)("Panels", ctx_r1.PropertiesDialogPanels)("Provider", ctx_r1.Provider);
 } }
 /** The entity of the dashboard records DashboardEngine caches. */
 const DASHBOARDS_ENTITY_NAME = 'MJ: Dashboards';
@@ -201,6 +217,9 @@ const KEPT_EDITING = 'The user kept editing: the dashboard was saved elsewhere.'
 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 = [];
+/** The properties and wires of a dashboard without any: stable empty lists for change detection. */
+const NO_PROPERTIES = [];
+const NO_WIRES = [];
 /** 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',
@@ -299,6 +318,10 @@ export class DashboardEditorComponent extends BaseAngularComponent {
     PartDialogMode = null;
     /** The part the part dialog edits in edit mode. */
     EditPartPanel = null;
+    /** True while the dashboard's Properties and wires dialog is open. */
+    PropertiesDialogOpen = false;
+    /** The dashboard's parts when the Properties and wires dialog opened. */
+    PropertiesDialogPanels = [];
     _dashboard = null;
     viewer = null;
     viewerRef = null;
@@ -324,6 +347,10 @@ export class DashboardEditorComponent extends BaseAngularComponent {
     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; }
+    /** The dashboard's properties, which the part dialog maps onto a part's inputs. */
+    get DashboardProperties() { return this.viewer?.GetDashboardProperties() ?? NO_PROPERTIES; }
+    /** The dashboard's wires. */
+    get DashboardWires() { return this.viewer?.GetWires() ?? NO_WIRES; }
     /** 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. */
@@ -714,10 +741,15 @@ export class DashboardEditorComponent extends BaseAngularComponent {
         SafeDetectChanges(this.cdr);
         return message;
     }
-    /** Why a save failed: the thrown error, else the dashboard's failed save result. Empty when neither says. */
+    /**
+     * Why a save failed: the thrown error, else the viewer's refusal (a broken mapping or wire), else the
+     * dashboard's failed save result. Empty when none says.
+     */
     saveFailureReason(dashboard, error) {
         if (error !== undefined)
             return errorMessage(error);
+        if (this.viewer?.LastSaveError)
+            return this.viewer.LastSaveError;
         const latest = dashboard.LatestResult;
         return latest && !latest.Success ? latest.CompleteMessage : '';
     }
@@ -887,6 +919,22 @@ export class DashboardEditorComponent extends BaseAngularComponent {
     closePartDialogs() {
         this.PartDialogMode = null;
         this.EditPartPanel = null;
+        this.PropertiesDialogOpen = false;
+        this.PropertiesDialogPanels = [];
+    }
+    // ── Properties and wires ──────────────────────────────────
+    /** Opens the dashboard's Properties and wires dialog. Only while editing and not saving. */
+    OpenPropertiesDialog() {
+        if (!this.IsEditing || this.IsSaving || !this.viewer)
+            return;
+        this.PropertiesDialogPanels = ExtractPanelsFromLayout(this.viewer.getConfig()?.layout ?? null);
+        this.PropertiesDialogOpen = true;
+        SafeDetectChanges(this.cdr);
+    }
+    /** Applies the dialog's properties and wires to the viewer. They are saved with the dashboard's Save. */
+    async OnPropertiesDialogSaved(result) {
+        this.closePartDialogs();
+        await this.applyPartChange('Could not update the properties', v => v.SetPropertiesAndWires(result.Properties, result.Wires));
     }
     /**
      * Asks the user to confirm removing a part, then removes it. Changes nothing when the user cancels, or when the
@@ -952,13 +1000,14 @@ export class DashboardEditorComponent extends BaseAngularComponent {
             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) {
+        } }, 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: 8, vars: 5, consts: [["body", ""], ["viewerHost", ""], [1, "dashboard-editor-header", 3, "is-editing"], [1, "dashboard-editor-main"], [1, "dashboard-editor-body"], [3, "Visible", "Mode", "PartTypes", "Panel", "Provider", "DashboardProperties"], [3, "Visible", "Properties", "Wires", "Panels", "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", "secondary", "Size", "sm", 1, "dashboard-editor-properties", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-sliders"], ["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", "DashboardProperties"], [3, "Saved", "Cancelled", "Visible", "Properties", "Wires", "Panels", "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);
+            i0.ɵɵconditionalCreate(6, DashboardEditorComponent_Conditional_6_Template, 1, 6, "mj-dashboard-part-dialog", 5);
+            i0.ɵɵconditionalCreate(7, DashboardEditorComponent_Conditional_7_Template, 1, 5, "mj-dashboard-properties-dialog", 6);
         } if (rf & 2) {
             let tmp_2_0;
             i0.ɵɵconditional((tmp_2_0 = ctx.Dashboard) ? 0 : -1, tmp_2_0);
@@ -966,11 +1015,13 @@ export class DashboardEditorComponent extends BaseAngularComponent {
             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}"] });
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Dashboard && ctx.IsEditing && ctx.PropertiesDialogOpen ? 7 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJStatBadgeComponent, i4.DashboardPartDialogComponent, i4.DashboardPropertiesDialogComponent], 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"] }]
+        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        <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\" class=\"dashboard-editor-properties\" [disabled]=\"IsSaving\" (click)=\"OpenPropertiesDialog()\">\n          <i class=\"fa-solid fa-sliders\" aria-hidden=\"true\"></i> Properties\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\" [DashboardProperties]=\"DashboardProperties\"\n      (Saved)=\"OnPartDialogSaved($event)\" (Cancelled)=\"ClosePartDialog()\"></mj-dashboard-part-dialog>\n}\n\n<!-- The Properties and wires dialog belongs to one edit session -->\n@if (Dashboard && IsEditing && PropertiesDialogOpen) {\n  <mj-dashboard-properties-dialog [Visible]=\"true\" [Properties]=\"DashboardProperties\" [Wires]=\"DashboardWires\"\n      [Panels]=\"PropertiesDialogPanels\" [Provider]=\"Provider\"\n      (Saved)=\"OnPropertiesDialogSaved($event)\" (Cancelled)=\"ClosePartDialog()\"></mj-dashboard-properties-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: [{
@@ -1015,7 +1066,7 @@ export class DashboardEditorComponent extends BaseAngularComponent {
             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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardEditorComponent, { className: "DashboardEditorComponent", filePath: "src/DashboardEditor/dashboard-editor.component.ts", lineNumber: 67 }); })();
 function errorMessage(error) {
     return error instanceof Error ? error.message : String(error);
 }