Fix some lovelace editors (#6911)

* Fix some lovelace editors

* let -> const

src/panels/lovelace/components/hui-action-editor.ts

@@ -1,4 +1,5 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -9,7 +10,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-service-picker";
 import {
   ActionConfig,
@@ -20,17 +21,6 @@ import {
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "action-changed": undefined;
-  }
-  // for add event listener
-  interface HTMLElementEventMap {
-    "action-changed": HASSDomEvent<undefined>;
-  }
-}
-
 @customElement("hui-action-editor")
 export class HuiActionEditor extends LitElement {
   @property() public config?: ActionConfig;
@@ -42,21 +32,21 @@ export class HuiActionEditor extends LitElement {
   @property() protected hass?: HomeAssistant;
 
   get _action(): string {
-    return this.config!.action || "";
+    return this.config?.action || "";
   }
 
   get _navigation_path(): string {
-    const config = this.config! as NavigateActionConfig;
+    const config = this.config as NavigateActionConfig;
     return config.navigation_path || "";
   }
 
   get _url_path(): string {
-    const config = this.config! as UrlActionConfig;
+    const config = this.config as UrlActionConfig;
     return config.url_path || "";
   }
 
   get _service(): string {
-    const config = this.config! as CallServiceActionConfig;
+    const config = this.config as CallServiceActionConfig;
     return config.service || "";
   }
 
@@ -107,13 +97,14 @@ export class HuiActionEditor extends LitElement {
               .configValue="${"service"}"
               @value-changed="${this._valueChanged}"
             ></ha-service-picker>
-            <h3>Toggle Editor to input Service Data</h3>
+            <b>Service data can only be entered in the code editor</b>
           `
         : ""}
     `;
   }
 
   private _valueChanged(ev: Event): void {
+    ev.stopPropagation();
     if (!this.hass) {
       return;
     }
@@ -121,12 +112,12 @@ export class HuiActionEditor extends LitElement {
     if (this[`_${target.configValue}`] === target.value) {
       return;
     }
-    if (target.configValue === "action") {
-      this.config = { action: "none" };
-    }
     if (target.configValue) {
-      this.config = { ...this.config!, [target.configValue!]: target.value };
+      const newConfig =
-      fireEvent(this, "action-changed");
+        target.configValue === "action"
+          ? { action: target.value }
+          : { ...this.config!, [target.configValue!]: target.value };
+      fireEvent(this, "value-changed", { value: newConfig });
     }
   }
 }

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -2,14 +2,18 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { ButtonCardConfig } from "../../cards/types";
@@ -17,16 +21,8 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
+import { actionConfigStruct, EditorTarget } from "../types";
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
-import "../../../../components/ha-switch";
-import "../../../../components/ha-formfield";
 import { configElementStyle } from "./config-elements-style";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { assert, object, string, optional, boolean } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -63,11 +59,11 @@ export class HuiButtonCardEditor extends LitElement
   }
 
   get _show_name(): boolean {
-    return this._config!.show_name || true;
+    return this._config!.show_name ?? true;
   }
 
   get _show_state(): boolean {
-    return this._config!.show_state || false;
+    return this._config!.show_state ?? false;
   }
 
   get _icon(): string {
@@ -75,7 +71,7 @@ export class HuiButtonCardEditor extends LitElement
   }
 
   get _show_icon(): boolean {
-    return this._config!.show_icon || true;
+    return this._config!.show_icon ?? true;
   }
 
   get _icon_height(): string {
@@ -85,11 +81,11 @@ export class HuiButtonCardEditor extends LitElement
   }
 
   get _tap_action(): ActionConfig {
-    return this._config!.tap_action || { action: "more-info" };
+    return this._config!.tap_action || { action: "toggle" };
   }
 
   get _hold_action(): ActionConfig {
-    return this._config!.hold_action || { action: "none" };
+    return this._config!.hold_action || { action: "more-info" };
   }
 
   get _theme(): string {
@@ -123,7 +119,7 @@ export class HuiButtonCardEditor extends LitElement
           .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
-          @change="${this._valueChanged}"
+          @value-changed="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
@@ -161,7 +157,7 @@ export class HuiButtonCardEditor extends LitElement
               <ha-switch
                 .checked="${this._show_name !== false}"
                 .configValue="${"show_name"}"
-                @change="${this._valueChanged}"
+                @change="${this._change}"
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -175,7 +171,7 @@ export class HuiButtonCardEditor extends LitElement
               <ha-switch
                 .checked=${this._show_state !== false}
                 .configValue=${"show_state"}
-                @change=${this._valueChanged}
+                @change=${this._change}
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -189,7 +185,7 @@ export class HuiButtonCardEditor extends LitElement
               <ha-switch
                 .checked="${this._show_icon !== false}"
                 .configValue="${"show_icon"}"
-                @change="${this._valueChanged}"
+                @change="${this._change}"
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -225,7 +221,7 @@ export class HuiButtonCardEditor extends LitElement
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
@@ -237,27 +233,43 @@ export class HuiButtonCardEditor extends LitElement
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
         </div>
       </div>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _change(ev: Event) {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
+    const value = target.checked;
 
-    if (
+    if (this[`_${target.configValue}`] === value) {
-      this[`_${target.configValue}`] === target.value ||
+      return;
-      this[`_${target.configValue}`] === target.config
+    }
-    ) {
+
+    this._config = {
+      ...this._config,
+      [target.configValue!]: value,
+    };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+    const value = ev.detail.value;
+
+    if (this[`_${target.configValue}`] === value) {
       return;
     }
     if (target.configValue) {
-      if (target.value === "") {
+      if (value !== false && !value) {
         this._config = { ...this._config };
         delete this._config[target.configValue!];
       } else {
@@ -266,18 +278,11 @@ export class HuiButtonCardEditor extends LitElement
           target.configValue === "icon_height" &&
           !isNaN(Number(target.value))
         ) {
-          newValue = `${String(target.value)}px`;
+          newValue = `${String(value)}px`;
         }
         this._config = {
           ...this._config,
-          [target.configValue!]:
+          [target.configValue!]: newValue !== undefined ? newValue : value,
-            target.checked !== undefined
-              ? target.checked
-              : newValue !== undefined
-              ? newValue
-              : target.value
-              ? target.value
-              : target.config,
         };
       }
     }

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
@@ -17,13 +18,8 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
+import { actionConfigStruct, EditorTarget } from "../types";
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, object, optional, assert } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -100,7 +96,7 @@ export class HuiLightCardEditor extends LitElement
           .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
+          @value-changed=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
@@ -145,7 +141,7 @@ export class HuiLightCardEditor extends LitElement
           .config=${this._hold_action}
           .actions=${actions}
           .configValue=${"hold_action"}
-          @action-changed=${this._valueChanged}
+          @value-changed=${this._valueChanged}
         ></hui-action-editor>
 
         <hui-action-editor
@@ -158,32 +154,30 @@ export class HuiLightCardEditor extends LitElement
           .config=${this._double_tap_action}
           .actions=${actions}
           .configValue=${"double_tap_action"}
-          @action-changed=${this._valueChanged}
+          @value-changed=${this._valueChanged}
         ></hui-action-editor>
       </div>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
+    const value = ev.detail.value;
 
-    if (
+    if (this[`_${target.configValue}`] === value) {
-      this[`_${target.configValue}`] === target.value ||
-      this[`_${target.configValue}`] === target.config
-    ) {
       return;
     }
     if (target.configValue) {
-      if (target.value === "") {
+      if (value !== false && !value) {
         this._config = { ...this._config };
         delete this._config[target.configValue!];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]: target.value ? target.value : target.config,
+          [target.configValue!]: value,
         };
       }
     }

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -2,11 +2,12 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -14,13 +15,8 @@ import { PictureCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
+import { actionConfigStruct, EditorTarget } from "../types";
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, object, optional, assert } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -89,7 +85,7 @@ export class HuiPictureCardEditor extends LitElement
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
@@ -101,7 +97,7 @@ export class HuiPictureCardEditor extends LitElement
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
@@ -114,26 +110,24 @@ export class HuiPictureCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
+    const value = ev.detail.value;
 
-    if (
+    if (this[`_${target.configValue}`] === target.value) {
-      this[`_${target.configValue}`] === target.value ||
-      this[`_${target.configValue}`] === target.config
-    ) {
       return;
     }
     if (target.configValue) {
-      if (target.value === "") {
+      if (value !== false && !value) {
         this._config = { ...this._config };
         delete this._config[target.configValue!];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]: target.value ? target.value : target.config,
+          [target.configValue!]: value,
         };
       }
     }

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -5,14 +5,16 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-switch";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureEntityCardConfig } from "../../cards/types";
@@ -20,14 +22,8 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
+import { actionConfigStruct, EditorTarget } from "../types";
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { assert, object, string, optional, boolean } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -86,16 +82,16 @@ export class HuiPictureEntityCardEditor extends LitElement
     return this._config!.tap_action || { action: "more-info" };
   }
 
-  get _hold_action(): ActionConfig {
+  get _hold_action(): ActionConfig | undefined {
-    return this._config!.hold_action || { action: "more-info" };
+    return this._config!.hold_action;
   }
 
   get _show_name(): boolean {
-    return this._config!.show_name || true;
+    return this._config!.show_name ?? true;
   }
 
   get _show_state(): boolean {
-    return this._config!.show_state || true;
+    return this._config!.show_state ?? true;
   }
 
   get _theme(): string {
@@ -123,7 +119,7 @@ export class HuiPictureEntityCardEditor extends LitElement
           .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
-          @change="${this._valueChanged}"
+          @value-changed="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
         <paper-input
@@ -155,7 +151,7 @@ export class HuiPictureEntityCardEditor extends LitElement
           .hass=${this.hass}
           .value="${this._camera_image}"
           .configValue=${"camera_image"}
-          @change="${this._valueChanged}"
+          @value-changed="${this._valueChanged}"
           .includeDomains=${includeDomains}
           allow-custom-entity
         ></ha-entity-picker>
@@ -184,8 +180,7 @@ export class HuiPictureEntityCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            type="number"
+            .value="${this._aspect_ratio}"
-            .value="${Number(this._aspect_ratio.replace("%", ""))}"
             .configValue="${"aspect_ratio"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
@@ -201,7 +196,7 @@ export class HuiPictureEntityCardEditor extends LitElement
               <ha-switch
                 .checked="${this._config!.show_name !== false}"
                 .configValue="${"show_name"}"
-                @change="${this._valueChanged}"
+                @change="${this._change}"
               ></ha-switch
             ></ha-formfield>
           </div>
@@ -215,7 +210,7 @@ export class HuiPictureEntityCardEditor extends LitElement
               <ha-switch
                 .checked="${this._config!.show_state !== false}"
                 .configValue="${"show_state"}"
-                @change="${this._valueChanged}"
+                @change="${this._change}"
               ></ha-switch
             ></ha-formfield>
           </div>
@@ -231,7 +226,7 @@ export class HuiPictureEntityCardEditor extends LitElement
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
@@ -243,7 +238,7 @@ export class HuiPictureEntityCardEditor extends LitElement
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
@@ -256,34 +251,43 @@ export class HuiPictureEntityCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _change(ev: Event) {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
-    let value = target.value;
+    const value = target.checked;
 
-    if (target.configValue! === "aspect_ratio" && target.value) {
+    if (this[`_${target.configValue}`] === value) {
-      value += "%";
-    }
-
-    if (
-      this[`_${target.configValue}`] === value ||
-      this[`_${target.configValue}`] === target.config
-    ) {
       return;
     }
+
+    this._config = {
+      ...this._config,
+      [target.configValue!]: value,
+    };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+    const value = ev.detail.value;
+
+    if (this[`_${target.configValue}`] === value) {
+      return;
+    }
+
     if (target.configValue) {
-      if (value === "") {
+      if (value !== false && !value) {
         this._config = { ...this._config };
         delete this._config[target.configValue!];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]:
+          [target.configValue!]: value,
-            target.checked !== undefined
-              ? target.checked
-              : value || target.config,
         };
       }
     }

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -5,11 +5,12 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { array, assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -25,10 +26,8 @@ import {
   actionConfigStruct,
   EditorTarget,
   entitiesConfigStruct,
-  EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { assert, string, object, optional, array } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -91,20 +90,12 @@ export class HuiPictureGlanceCardEditor extends LitElement
     return this._config!.aspect_ratio || "";
   }
 
-  get _tap_action(): ActionConfig {
+  get _tap_action(): ActionConfig | undefined {
-    return this._config!.tap_action || { action: "more-info" };
+    return this._config!.tap_action;
   }
 
-  get _hold_action(): ActionConfig {
+  get _hold_action(): ActionConfig | undefined {
-    return this._config!.hold_action || { action: "more-info" };
+    return this._config!.hold_action;
-  }
-
-  get _show_name(): boolean {
-    return this._config!.show_name || false;
-  }
-
-  get _show_state(): boolean {
-    return this._config!.show_state || false;
   }
 
   get _theme(): string {
@@ -151,7 +142,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
           .hass=${this.hass}
           .value="${this._camera_image}"
           .configValue=${"camera_image"}
-          @change="${this._valueChanged}"
+          @value-changed="${this._valueChanged}"
           allow-custom-entity
           .includeDomains=${includeDomains}
         ></ha-entity-picker>
@@ -180,8 +171,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            type="number"
+            .value="${this._aspect_ratio}"
-            .value="${Number(this._aspect_ratio.replace("%", ""))}"
             .configValue="${"aspect_ratio"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
@@ -195,7 +185,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
           .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
-          @change="${this._valueChanged}"
+          @value-changed="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
@@ -209,7 +199,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
             .config="${this._tap_action}"
             .actions="${actions}"
             .configValue="${"tap_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
@@ -221,7 +211,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
             .config="${this._hold_action}"
             .actions="${actions}"
             .configValue="${"hold_action"}"
-            @action-changed="${this._valueChanged}"
+            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
         </div>
         <hui-entity-editor
@@ -239,36 +229,29 @@ export class HuiPictureGlanceCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
-    let value = target.value;
+    const value = ev.detail.value;
-
-    if (target.configValue! === "aspect_ratio" && target.value) {
-      value += "%";
-    }
 
     if (ev.detail && ev.detail.entities) {
       this._config = { ...this._config, entities: ev.detail.entities };
 
       this._configEntities = processEditorEntities(this._config.entities);
     } else if (target.configValue) {
-      if (
+      if (this[`_${target.configValue}`] === value) {
-        this[`_${target.configValue}`] === value ||
-        this[`_${target.configValue}`] === target.config
-      ) {
         return;
       }
 
-      if (value === "") {
+      if (value !== false && !value) {
         this._config = { ...this._config };
         delete this._config[target.configValue!];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]: value || target.config,
+          [target.configValue!]: value,
         };
       }
     }