Dont change config on init (#2044)

* dont change config on init

* set default title empty

* used firstUpdated instead of updated

* prevent double events

* check if val changed

* typing

* clean

* lint

* clean

* prettier is having a fight

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

@@ -52,7 +52,7 @@ export class HuiEntityEditor extends LitElement {
   private _addEntity() {
     const newConfigEntities = this.entities!.concat({ entity: "" });
 
-    fireEvent(this, "change", { entities: newConfigEntities });
+    fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
   private _valueChanged(ev: Event): void {
@@ -68,7 +68,7 @@ export class HuiEntityEditor extends LitElement {
       };
     }
 
-    fireEvent(this, "change", { entities: newConfigEntities });
+    fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
   private renderStyle(): TemplateResult {

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -31,7 +31,7 @@ export class HuiThemeSelectionEditor extends hassLocalizeLitMixin(LitElement) {
       >
         <paper-listbox
           slot="dropdown-content"
-          .selected="${this.value || "Backend-selected"}"
+          .selected="${this.value}"
           attr-for-selected="theme"
         >
           ${
@@ -57,8 +57,11 @@ export class HuiThemeSelectionEditor extends hassLocalizeLitMixin(LitElement) {
   }
 
   private _changed(ev): void {
+    if (!this.hass || ev.target.value === "") {
+      return;
+    }
     this.value = ev.target.value;
-    fireEvent(this, "change");
+    fireEvent(this, "theme-changed");
   }
 }
 

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

@@ -26,11 +26,15 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
   private _configEntities?: ConfigEntity[];
 
   static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-      _configEntities: {},
-    };
+    return { hass: {}, _config: {}, _configEntities: {} };
+  }
+
+  get _title(): string {
+    return this._config!.title || "";
+  }
+
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
   }
 
   public setConfig(config: Config): void {
@@ -47,20 +51,20 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
       ${this.renderStyle()}
       <paper-input
         label="Title"
-        value="${this._config!.title || ""}"
+        value="${this._title}"
         .configValue="${"title"}"
         @value-changed="${this._valueChanged}"
       ></paper-input>
       <hui-theme-select-editor
         .hass="${this.hass}"
-        .value="${this._config!.theme}"
+        .value="${this._theme}"
         .configValue="${"theme"}"
-        @change="${this._valueChanged}"
+        @theme-changed="${this._valueChanged}"
       ></hui-theme-select-editor>
       <hui-entity-editor
         .hass="${this.hass}"
         .entities="${this._configEntities}"
-        @change="${this._valueChanged}"
+        @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>
       <paper-checkbox
         ?checked="${this._config!.show_header_toggle !== false}"
@@ -77,21 +81,26 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
     }
 
     const target = ev.target! as EditorTarget;
-    let newConfig = this._config;
+
+    if (
+      (target.configValue! === "title" && target.value === this._title) ||
+      (target.configValue! === "theme" && target.value === this._theme)
+    ) {
+      return;
+    }
 
     if (ev.detail && ev.detail.entities) {
-      newConfig.entities = ev.detail.entities;
-    } else {
-      newConfig = {
+      this._config.entities = ev.detail.entities;
+      this._configEntities = processEditorEntities(this._config.entities);
+    } else if (target.configValue) {
+      this._config = {
         ...this._config,
-        [target.configValue!]:
+        [target.configValue]:
           target.checked !== undefined ? target.checked : target.value,
       };
     }
 
-    fireEvent(this, "config-changed", {
-      config: newConfig,
-    });
+    fireEvent(this, "config-changed", { config: this._config });
   }
 
   private renderStyle(): TemplateResult {

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

@@ -25,19 +25,27 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
   private _config?: Config;
   private _configEntities?: ConfigEntity[];
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-      _configEntities: {},
-    };
-  }
-
   public setConfig(config: Config): void {
     this._config = { type: "glance", ...config };
     this._configEntities = processEditorEntities(config.entities);
   }
 
+  static get properties(): PropertyDeclarations {
+    return { hass: {}, _config: {}, _configEntities: {} };
+  }
+
+  get _title(): string {
+    return this._config!.title || "";
+  }
+
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
+  get _columns(): string {
+    return this._config!.columns ? String(this._config!.columns) : "";
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -47,26 +55,26 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
       ${this.renderStyle()}
       <paper-input
         label="Title"
-        value="${this._config!.title}"
+        value="${this._title}"
         .configValue="${"title"}"
         @value-changed="${this._valueChanged}"
       ></paper-input>
       <hui-theme-select-editor
         .hass="${this.hass}"
-        .value="${this._config!.theme}"
+        .value="${this._theme}"
         .configValue="${"theme"}"
-        @change="${this._valueChanged}"
+        @theme-changed="${this._valueChanged}"
       ></hui-theme-select-editor>
       <paper-input
         label="Columns"
-        value="${this._config!.columns || ""}"
+        value="${this._columns}"
         .configValue="${"columns"}"
         @value-changed="${this._valueChanged}"
       ></paper-input>
       <hui-entity-editor
         .hass="${this.hass}"
         .entities="${this._configEntities}"
-        @change="${this._valueChanged}"
+        @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>
       <paper-checkbox
         ?checked="${this._config!.show_name !== false}"
@@ -87,23 +95,27 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
     if (!this._config || !this.hass) {
       return;
     }
-
     const target = ev.target! as EditorTarget;
-    let newConfig = this._config;
+
+    if (
+      (target.configValue! === "title" && target.value === this._title) ||
+      (target.configValue! === "theme" && target.value === this._theme) ||
+      (target.configValue! === "columns" && target.value === this._columns)
+    ) {
+      return;
+    }
 
     if (ev.detail && ev.detail.entities) {
-      newConfig.entities = ev.detail.entities;
-    } else {
-      newConfig = {
+      this._config.entities = ev.detail.entities;
+      this._configEntities = processEditorEntities(this._config.entities);
+    } else if (target.configValue) {
+      this._config = {
         ...this._config,
         [target.configValue!]:
           target.checked !== undefined ? target.checked : target.value,
       };
     }
-
-    fireEvent(this, "config-changed", {
-      config: newConfig,
-    });
+    fireEvent(this, "config-changed", { config: this._config });
   }
 
   private renderStyle(): TemplateResult {

src/panels/lovelace/editor/hui-edit-card.ts

@@ -291,7 +291,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
   }
 
   private _handleUIConfigChanged(value: LovelaceConfig): void {
-    this._configElement!.setConfig(value);
     this._configValue = { format: "json", value };
     this._updatePreview(value);
   }
@@ -339,8 +338,11 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
   }
 
   private async _loadConfigElement(): Promise<void> {
+    if (!this._originalConfig) {
+      return;
+    }
     const conf = this._originalConfig;
-    const tag = conf!.type.startsWith(CUSTOM_TYPE_PREFIX)
+    const tag = conf.type.startsWith(CUSTOM_TYPE_PREFIX)
       ? conf!.type.substr(CUSTOM_TYPE_PREFIX.length)
       : `hui-${conf!.type}-card`;
 
@@ -362,8 +364,9 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     configElement.addEventListener("config-changed", (ev) =>
       this._handleUIConfigChanged(ev.detail.config)
     );
-    this._configValue = { format: "json", value: conf! };
+    this._configValue = { format: "json", value: conf };
     this._configElement = configElement;
+    this._updatePreview(conf);
   }
 }