diff --git a/src/data/automation.ts b/src/data/automation.ts
index f629d73a44..e79c34b62f 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -556,7 +556,6 @@ export interface AutomationClipboard {
}
export interface BaseSidebarConfig {
- toggleYamlMode: () => boolean;
delete: () => void;
close: (focus?: boolean) => void;
}
@@ -568,6 +567,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
duplicate: () => void;
cut: () => void;
copy: () => void;
+ toggleYamlMode: () => void;
config: Trigger;
yamlMode: boolean;
uiSupported: boolean;
@@ -581,6 +581,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
duplicate: () => void;
cut: () => void;
copy: () => void;
+ toggleYamlMode: () => void;
config: Condition;
yamlMode: boolean;
uiSupported: boolean;
@@ -594,6 +595,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
cut: () => void;
copy: () => void;
run: () => void;
+ toggleYamlMode: () => void;
config: {
action: Action;
};
@@ -615,6 +617,7 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
key: string;
excludeKeys: string[];
};
+ toggleYamlMode: () => void;
yamlMode: boolean;
}
diff --git a/src/panels/config/automation/action/ha-automation-action-editor.ts b/src/panels/config/automation/action/ha-automation-action-editor.ts
index d2756e8a1a..97cea3f6c1 100644
--- a/src/panels/config/automation/action/ha-automation-action-editor.ts
+++ b/src/panels/config/automation/action/ha-automation-action-editor.ts
@@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
- fireEvent(this, "value-changed", {
+ fireEvent(this, "yaml-changed", {
value: migrateAutomationAction(ev.detail.value),
});
}
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index d34bee9a05..b8cffcc161 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -688,7 +688,7 @@ export default class HaAutomationActionRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
- return this._yamlMode;
+ this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,
diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
index 92b4927e1d..614ec520e3 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@@ -103,8 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
- // @ts-ignore
- fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
+ fireEvent(this, "yaml-changed", { value: ev.detail.value });
}
private _onUiChanged(ev: CustomEvent) {
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index bda6801e42..d025377af5 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -660,7 +660,7 @@ export default class HaAutomationConditionRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
- return this._yamlMode;
+ this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,
diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts
index a62ee4d440..3c184c2372 100644
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -1,6 +1,5 @@
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-bottom-sheet";
import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
import {
@@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _yamlMode = false;
@query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -52,6 +53,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
+ .sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
>
@@ -67,6 +69,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
+ .sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
>
@@ -82,6 +85,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
+ .sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
>
@@ -110,6 +114,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
+ .sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
>
@@ -125,6 +130,7 @@ export default class HaAutomationSidebar extends LitElement {
.narrow=${this.narrow}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
+ .sidebarKey=${this.sidebarKey}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._handleCloseSidebar}
>
@@ -197,13 +203,7 @@ export default class HaAutomationSidebar extends LitElement {
}
private _toggleYamlMode = () => {
- this._yamlMode = this.config!.toggleYamlMode();
- fireEvent(this, "value-changed", {
- value: {
- ...this.config,
- yamlMode: this._yamlMode,
- },
- });
+ (this.config as ActionSidebarConfig)?.toggleYamlMode();
};
static styles = css`
@@ -235,5 +235,8 @@ declare global {
interface HASSDomEvents {
"toggle-yaml-mode": undefined;
+ "yaml-changed": {
+ value: unknown;
+ };
}
}
diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts
index ffea6df3c8..3fc30ecba7 100644
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -92,6 +92,8 @@ export class HaManualAutomationEditor extends LitElement {
@state() private _sidebarConfig?: SidebarConfig;
+ @state() private _sidebarKey?: string;
+
@query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
private _previousConfig?: ManualAutomationConfig;
@@ -287,6 +289,7 @@ export class HaManualAutomationEditor extends LitElement {
.config=${this._sidebarConfig}
@value-changed=${this._sidebarConfigChanged}
.disabled=${this.disabled}
+ .sidebarKey=${this._sidebarKey}
>
@@ -314,6 +317,7 @@ export class HaManualAutomationEditor extends LitElement {
// deselect previous selected row
this._sidebarConfig?.close?.();
this._sidebarConfig = ev.detail;
+ this._sidebarKey = JSON.stringify(this._sidebarConfig);
await this._sidebarElement?.updateComplete;
this._sidebarElement?.focus();
diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts
index eee47b8cb4..cfb8df9aa2 100644
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/src/panels/config/automation/option/ha-automation-option-row.ts
@@ -395,7 +395,6 @@ export default class HaAutomationOptionRow extends LitElement {
rename: () => {
this._renameOption();
},
- toggleYamlMode: () => false, // no yaml mode for options
delete: this._removeOption,
duplicate: this._duplicateOption,
defaultOption: !!this.defaultActions,
diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
index 25f84f19db..3d9708d571 100644
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -41,6 +42,8 @@ export default class HaAutomationSidebarAction extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -181,18 +184,22 @@ export default class HaAutomationSidebarAction extends LitElement {
${description && !this.yamlMode
? html`${description}
`
- : html``}
+ : keyed(
+ this.sidebarKey,
+ html``
+ )}
`;
}
@@ -220,6 +227,12 @@ export default class HaAutomationSidebarAction extends LitElement {
}
}
+ private _yamlChangedSidebar(ev: CustomEvent) {
+ ev.stopPropagation();
+
+ this.config?.save?.(ev.detail.value);
+ }
+
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
index 4e081cd32a..2e343d0c69 100644
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { ConditionSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -173,17 +176,21 @@ export default class HaAutomationSidebarCondition extends LitElement {
${description && !this.yamlMode
? html`${description}
`
- : html` `}
+ : keyed(
+ this.sidebarKey,
+ html``
+ )}
`;
}
@@ -209,6 +216,12 @@ export default class HaAutomationSidebarCondition extends LitElement {
}
}
+ private _yamlChangedSidebar(ev: CustomEvent) {
+ ev.stopPropagation();
+
+ this.config?.save?.(ev.detail.value);
+ }
+
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
index b9bb622d98..dfdab29f12 100644
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
@@ -1,6 +1,7 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeKeys } from "../../../../common/translations/localize";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
@@ -24,6 +25,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -81,14 +84,18 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
)}
-
+ ${keyed(
+ this.sidebarKey,
+ html``
+ )}
`;
}
@@ -116,6 +123,12 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
}
}
+ private _yamlChangedSidebar(ev: CustomEvent) {
+ ev.stopPropagation();
+
+ this.config?.save?.(ev.detail.value);
+ }
+
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
index d316bbb010..8729ea2d7a 100644
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
@@ -1,6 +1,7 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types";
@@ -23,6 +24,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _warnings?: string[];
@query(".sidebar-editor")
@@ -74,16 +77,20 @@ export default class HaAutomationSidebarScriptField extends LitElement {
)}
-
+ ${keyed(
+ this.sidebarKey,
+ html``
+ )}
`;
}
@@ -110,6 +117,12 @@ export default class HaAutomationSidebarScriptField extends LitElement {
}
}
+ private _yamlChangedSidebar(ev: CustomEvent) {
+ ev.stopPropagation();
+
+ this.config?.save?.(ev.detail.value);
+ }
+
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
index a1f31d7e3d..a727a22486 100644
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
@@ -11,6 +11,7 @@ import {
} from "@mdi/js";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { TriggerSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
@property({ type: Boolean }) public narrow = false;
+ @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
@state() private _requestShowId = false;
@state() private _warnings?: string[];
@@ -183,18 +186,22 @@ export default class HaAutomationSidebarTrigger extends LitElement {
)}
-
+ ${keyed(
+ this.sidebarKey,
+ html``
+ )}
`;
}
@@ -221,6 +228,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
}
}
+ private _yamlChangedSidebar(ev: CustomEvent) {
+ ev.stopPropagation();
+
+ this.config?.save?.(ev.detail.value);
+ }
+
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
index 2ae092d7ba..e354a56713 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
if (!ev.detail.isValid) {
return;
}
- fireEvent(this, "value-changed", {
+ fireEvent(this, "yaml-changed", {
value: migrateAutomationTrigger(ev.detail.value),
});
}
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 926c25bb2f..2117e29c09 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -494,7 +494,7 @@ export default class HaAutomationTriggerRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
- return this._yamlMode;
+ this.openSidebar();
},
disable: this._onDisable,
delete: this._onDelete,
diff --git a/src/panels/config/script/ha-script-field-editor.ts b/src/panels/config/script/ha-script-field-editor.ts
index 3d96cca29c..78e0b44022 100644
--- a/src/panels/config/script/ha-script-field-editor.ts
+++ b/src/panels/config/script/ha-script-field-editor.ts
@@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement {
ev.stopPropagation();
const value = { ...ev.detail.value };
- if (typeof value !== "object" || Object.keys(value).length !== 1) {
+ if (
+ typeof value !== "object" ||
+ Object.keys(value).length !== 1 ||
+ !value[Object.keys(value)[0]] ||
+ !value[Object.keys(value)[0]].selector
+ ) {
this._yamlError = "yaml_error";
return;
}
@@ -165,7 +170,7 @@ export default class HaScriptFieldEditor extends LitElement {
const newValue = { ...value[key], key };
- fireEvent(this, "value-changed", { value: newValue });
+ fireEvent(this, "yaml-changed", { value: newValue });
}
private _computeLabelCallback = (
diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts
index 867ca2f958..58eff00d2b 100644
--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/src/panels/config/script/ha-script-field-row.ts
@@ -218,7 +218,7 @@ export default class HaScriptFieldRow extends LitElement {
},
toggleYamlMode: () => {
this._toggleYamlMode();
- return this._yamlMode;
+ this.openSidebar();
},
delete: this._onDelete,
config: {
diff --git a/src/panels/config/script/ha-script-field-selector-editor.ts b/src/panels/config/script/ha-script-field-selector-editor.ts
index e33b64fc09..f7fed6ad7a 100644
--- a/src/panels/config/script/ha-script-field-selector-editor.ts
+++ b/src/panels/config/script/ha-script-field-selector-editor.ts
@@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
return;
}
- fireEvent(this, "value-changed", { value });
+ fireEvent(this, "yaml-changed", { value });
}
private _computeLabelCallback = (
diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts
index b8cc9ca973..6a513e2173 100644
--- a/src/panels/config/script/manual-script-editor.ts
+++ b/src/panels/config/script/manual-script-editor.ts
@@ -73,6 +73,8 @@ export class HaManualScriptEditor extends LitElement {
@state() private _sidebarConfig?: SidebarConfig;
+ @state() private _sidebarKey?: string;
+
@query("ha-script-fields")
private _scriptFields?: HaScriptFields;
@@ -223,6 +225,7 @@ export class HaManualScriptEditor extends LitElement {