From 94a1b394f0544453a4d5baea9471fd88f806fb48 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 30 Aug 2020 19:24:51 -0500
Subject: [PATCH 01/63] First Commit - Adds Header & Footer Editor

---
 .../create-element/create-element-base.ts     |   3 +-
 .../create-header-footer-element.ts           |   8 +-
 .../editor/card-editor/hui-card-editor.ts     |   7 +
 .../config-elements/config-elements-style.ts  |   5 +
 .../hui-entities-card-editor.ts               | 201 ++++++++++++++----
 .../hui-graph-footer-editor.ts                | 133 ++++++++++++
 .../editor/get-header-footer-editor.ts        |  37 ++++
 .../editor/hui-advanced-element-editor.ts     |  55 +++++
 .../editor/hui-header-footer-dropdown.ts      |  82 +++++++
 src/panels/lovelace/editor/lovelace-cards.ts  |   6 +-
 src/panels/lovelace/editor/types.ts           |   8 +
 .../header-footer/hui-graph-header-footer.ts  |  39 +++-
 src/panels/lovelace/types.ts                  |  16 ++
 src/translations/en.json                      |  11 +-
 14 files changed, 566 insertions(+), 45 deletions(-)
 create mode 100644 src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
 create mode 100644 src/panels/lovelace/editor/get-header-footer-editor.ts
 create mode 100644 src/panels/lovelace/editor/hui-advanced-element-editor.ts
 create mode 100644 src/panels/lovelace/editor/hui-header-footer-dropdown.ts

diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts
index b1afedcb281f..4f0bc7d9153c 100644
--- a/src/panels/lovelace/create-element/create-element-base.ts
+++ b/src/panels/lovelace/create-element/create-element-base.ts
@@ -13,6 +13,7 @@ import {
   LovelaceCard,
   LovelaceCardConstructor,
   LovelaceHeaderFooter,
+  LovelaceHeaderFooterConstructor,
 } from "../types";
 import type { ErrorCardConfig } from "../cards/types";
 
@@ -42,7 +43,7 @@ interface CreateElementConfigTypes {
   "header-footer": {
     config: LovelaceHeaderFooterConfig;
     element: LovelaceHeaderFooter;
-    constructor: unknown;
+    constructor: LovelaceHeaderFooterConstructor;
   };
 }
 
diff --git a/src/panels/lovelace/create-element/create-header-footer-element.ts b/src/panels/lovelace/create-element/create-header-footer-element.ts
index 4ec039f3f835..34ef90e9b6b1 100644
--- a/src/panels/lovelace/create-element/create-header-footer-element.ts
+++ b/src/panels/lovelace/create-element/create-header-footer-element.ts
@@ -1,5 +1,8 @@
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { createLovelaceElement } from "./create-element-base";
+import {
+  createLovelaceElement,
+  getLovelaceElementClass,
+} from "./create-element-base";
 
 const LAZY_LOAD_TYPES = {
   picture: () => import("../header-footer/hui-picture-header-footer"),
@@ -16,3 +19,6 @@ export const createHeaderFooterElement = (config: LovelaceHeaderFooterConfig) =>
     undefined,
     undefined
   );
+
+export const getHeaderFooterElementClass = (type: string) =>
+  getLovelaceElementClass(type, "header-footer", undefined, LAZY_LOAD_TYPES);
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
index f081cc65ae7e..351266fd9ba9 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -28,6 +28,7 @@ import "../../../../components/ha-circular-progress";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import { handleStructError } from "../../common/structs/handle-errors";
 import { GUISupportError } from "../gui-support-error";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 
 export interface ConfigChangedEvent {
   config: LovelaceCardConfig;
@@ -51,6 +52,12 @@ export interface UIConfigChangedEvent extends Event {
   };
 }
 
+export interface UIHeaderFooterConfigChangedEvent extends Event {
+  detail: {
+    config: LovelaceHeaderFooterConfig;
+  };
+}
+
 @customElement("hui-card-editor")
 export class HuiCardEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index c5091d23f899..f6ec959217ce 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -15,5 +15,10 @@ export const configElementStyle = html`
     .suffix {
       margin: 0 8px;
     }
+
+    .header-footer {
+      border: 1px solid var(--divider-color);
+      padding: 12px;
+    }
   </style>
 `;
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index cc7d38c66967..a920be7305f4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -1,4 +1,3 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -22,8 +21,14 @@ import {
 } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
-import { headerFooterConfigStructs } from "../../header-footer/types";
-import { LovelaceCardEditor } from "../../types";
+import {
+  headerFooterConfigStructs,
+  LovelaceHeaderFooterConfig,
+} from "../../header-footer/types";
+import type {
+  LovelaceCardEditor,
+  LovelaceHeaderFooterEditor,
+} from "../../types";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -41,6 +46,13 @@ import {
   union,
   assert,
 } from "superstruct";
+import {
+  UIConfigChangedEvent,
+  UIHeaderFooterConfigChangedEvent,
+} from "../card-editor/hui-card-editor";
+import { getHeaderFooterEditor } from "../get-header-footer-editor";
+import "../hui-header-footer-dropdown";
+import "../hui-advanced-element-editor";
 
 const cardConfigStruct = object({
   type: string(),
@@ -61,10 +73,21 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _configEntities?: EntitiesCardEntityConfig[];
 
+  @internalProperty() private _footerElement?: LovelaceHeaderFooterEditor;
+
+  @internalProperty() private _headerElement?: LovelaceHeaderFooterEditor;
+
   public setConfig(config: EntitiesCardConfig): void {
     assert(config, cardConfigStruct);
     this._config = config;
     this._configEntities = processEditorEntities(config.entities);
+
+    if (this._config.footer?.type) {
+      this._updateHeaderFooterElement(this._config.footer);
+    }
+    if (this._config.header?.type) {
+      this._updateHeaderFooterElement(this._config.header);
+    }
   }
 
   get _title(): string {
@@ -82,41 +105,73 @@ export class HuiEntitiesCardEditor extends LitElement
 
     return html`
       ${configElementStyle}
-      <div class="card-config">
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.title"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value="${this._theme}"
-          .configValue="${"theme"}"
-          @value-changed="${this._valueChanged}"
-        ></hui-theme-select-editor>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked="${this._config!.show_header_toggle !== false}"
-            .configValue="${"show_header_toggle"}"
-            @change="${this._valueChanged}"
-          ></ha-switch>
-        </ha-formfield>
-      </div>
-      <hui-entity-editor
-        .hass=${this.hass}
-        .entities="${this._configEntities}"
-        @entities-changed="${this._valueChanged}"
-      ></hui-entity-editor>
+      <hui-advanced-element-editor>
+        <div slot="editor">
+          <div class="card-config">
+            <paper-input
+              .label="${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.title"
+              )} (${this.hass.localize(
+                "ui.panel.lovelace.editor.card.config.optional"
+              )})"
+              .value=${this._title}
+              .configValue=${"title"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+            <hui-theme-select-editor
+              .hass=${this.hass}
+              .value=${this._theme}
+              .configValue=${"theme"}
+              @value-changed=${this._valueChanged}
+            ></hui-theme-select-editor>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+              )}
+              .dir=${computeRTLDirection(this.hass)}
+            >
+              <ha-switch
+                .checked=${this._config!.show_header_toggle !== false}
+                .configValue=${"show_header_toggle"}
+                @change=${this._valueChanged}
+              ></ha-switch>
+            </ha-formfield>
+          </div>
+          <hui-entity-editor
+            .hass=${this.hass}
+            .entities=${this._configEntities}
+            @entities-changed=${this._valueChanged}
+          ></hui-entity-editor>
+        </div>
+        <div slot="advanced">
+          <hui-header-footer-dropdown
+            .hass=${this.hass}
+            .value=${this._config.header?.type}
+            .configValue=${"header"}
+            @change=${this._headerFooterChanged}
+          ></hui-header-footer-dropdown>
+          ${this._headerElement
+            ? html`
+                <div class="header-footer">
+                  ${this._headerElement}
+                </div>
+              `
+            : ""}
+          <hui-header-footer-dropdown
+            .hass=${this.hass}
+            .value=${this._config.footer?.type}
+            .configValue=${"footer"}
+            @change=${this._headerFooterChanged}
+          ></hui-header-footer-dropdown>
+          ${this._footerElement
+            ? html`
+                <div class="header-footer">
+                  ${this._footerElement}
+                </div>
+              `
+            : ""}
+        </div>
+      </hui-advanced-element-editor>
     `;
   }
 
@@ -153,6 +208,76 @@ export class HuiEntitiesCardEditor extends LitElement
 
     fireEvent(this, "config-changed", { config: this._config });
   }
+
+  private _headerFooterChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const target = ev.currentTarget as any;
+
+    if (!target.value) {
+      this[`_${target.configValue}Element`] = undefined;
+      this._config = { ...this._config };
+      delete this._config[target.configValue!];
+
+      fireEvent(this, "config-changed", { config: this._config });
+      return;
+    }
+
+    this._updateHeaderFooterElement({
+      type: target.value,
+    });
+  }
+
+  private async _updateHeaderFooterElement(
+    config: LovelaceHeaderFooterConfig | { type: string }
+  ): Promise<void> {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const headerFooterEditor = await getHeaderFooterEditor(
+      this.hass,
+      config,
+      this._configEntities?.map((confEntity) => confEntity.entity) || []
+    );
+
+    this[`_${config.type}Element`] = headerFooterEditor?.configElement;
+
+    if (!this[`_${config.type}Element`]) {
+      return;
+    }
+
+    this._config = {
+      ...this._config,
+      [config.type]: { ...headerFooterEditor!.config },
+    };
+
+    this[`_${config.type}Element`].hass = this.hass;
+    this[`_${config.type}Element`].setConfig(headerFooterEditor!.config);
+    this[`_${config.type}Element`].addEventListener("config-changed", (ev) =>
+      this._handleHeaderFooterConfigChanged(
+        ev as UIConfigChangedEvent,
+        config.type
+      )
+    );
+  }
+
+  private _handleHeaderFooterConfigChanged(
+    ev: UIHeaderFooterConfigChangedEvent,
+    configValue: string
+  ) {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    ev.stopPropagation();
+    const config = ev.detail.config;
+    this._config = { ...this._config, [configValue]: config };
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
new file mode 100644
index 000000000000..4821cf27005c
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
@@ -0,0 +1,133 @@
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-input/paper-input";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { configElementStyle } from "./config-elements-style";
+import { assert } from "superstruct";
+
+import {
+  GraphHeaderFooterConfig,
+  graphHeaderFooterConfigStruct,
+} from "../../header-footer/types";
+import type { EditorTarget, EntitiesEditorEvent } from "../types";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCardEditor } from "../../types";
+
+import "../../../../components/entity/ha-entity-picker";
+
+const includeDomains = ["sensor"];
+
+@customElement("hui-graph-footer-editor")
+export class HuiGraphFooterEditor extends LitElement
+  implements LovelaceCardEditor {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @internalProperty() private _config?: GraphHeaderFooterConfig;
+
+  public setConfig(config: GraphHeaderFooterConfig): void {
+    assert(config, graphHeaderFooterConfigStruct);
+    this._config = config;
+  }
+
+  get _entity(): string {
+    return this._config!.entity || "";
+  }
+
+  get _detail(): number {
+    return this._config!.detail || 1;
+  }
+
+  get _hours_to_show(): number {
+    return this._config!.hours_to_show || 24;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      ${configElementStyle}
+      <div class="card-config">
+        <ha-entity-picker
+          allow-custom-entity
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.entity"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})"
+          .hass=${this.hass}
+          .value=${this._entity}
+          .configValue=${"entity"}
+          .includeDomains=${includeDomains}
+          @change=${this._valueChanged}
+        ></ha-entity-picker>
+        <div class="side-by-side">
+          <paper-input
+            type="number"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.sensor.graph_detail"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._detail}
+            .configValue=${"detail"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <paper-input
+            type="number"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: EntitiesEditorEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+
+    if (this[`_${target.configValue}`] === target.value) {
+      return;
+    }
+    if (target.configValue) {
+      if (
+        target.value === "" ||
+        (target.type === "number" && isNaN(Number(target.value)))
+      ) {
+        this._config = { ...this._config };
+        delete this._config[target.configValue!];
+      } else {
+        let value: any = target.value;
+        if (target.type === "number") {
+          value = Number(value);
+        }
+        this._config = { ...this._config, [target.configValue!]: value };
+      }
+    }
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-graph-footer-editor": HuiGraphFooterEditor;
+  }
+}
diff --git a/src/panels/lovelace/editor/get-header-footer-editor.ts b/src/panels/lovelace/editor/get-header-footer-editor.ts
new file mode 100644
index 000000000000..36939788f044
--- /dev/null
+++ b/src/panels/lovelace/editor/get-header-footer-editor.ts
@@ -0,0 +1,37 @@
+import { getHeaderFooterElementClass } from "../create-element/create-header-footer-element";
+import type { LovelaceHeaderFooterEditor } from "../types";
+import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
+import { HomeAssistant } from "../../../types";
+
+export const getHeaderFooterEditor = async (
+  hass: HomeAssistant,
+  config: LovelaceHeaderFooterConfig,
+  entities: string[]
+): Promise<
+  | {
+      configElement: LovelaceHeaderFooterEditor;
+      config: LovelaceHeaderFooterConfig;
+    }
+  | undefined
+> => {
+  const elClass = await getHeaderFooterElementClass(config.type);
+
+  let configElement: LovelaceHeaderFooterEditor;
+  let stubConfig: LovelaceHeaderFooterConfig | undefined;
+
+  if (elClass && elClass.getConfigElement) {
+    configElement = await elClass.getConfigElement();
+
+    if (elClass.getStubConfig) {
+      stubConfig = elClass.getStubConfig(
+        hass,
+        entities,
+        Object.keys(hass.states)
+      );
+    }
+  } else {
+    return undefined;
+  }
+
+  return { configElement, config: { ...stubConfig, ...config } };
+};
diff --git a/src/panels/lovelace/editor/hui-advanced-element-editor.ts b/src/panels/lovelace/editor/hui-advanced-element-editor.ts
new file mode 100644
index 000000000000..1c83435cd979
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-advanced-element-editor.ts
@@ -0,0 +1,55 @@
+import {
+  customElement,
+  LitElement,
+  TemplateResult,
+  html,
+  internalProperty,
+} from "lit-element";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import { HomeAssistant } from "../../../types";
+
+@customElement("hui-advanced-element-editor")
+export class HuiAdvancedElementEditor extends LitElement {
+  public hass!: HomeAssistant;
+
+  @internalProperty() private _currTabIndex = 0;
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-tab-bar
+        .activeIndex=${this._currTabIndex}
+        @MDCTabBar:activated=${(ev: CustomEvent) => this._handleTabChanged(ev)}
+      >
+        <mwc-tab
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.edit_card.editor"
+          )}
+        ></mwc-tab>
+        <mwc-tab
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.edit_card.advanced"
+          )}
+        ></mwc-tab>
+      </mwc-tab-bar>
+      ${this._currTabIndex === 0
+        ? html`<slot name="editor"></slot>`
+        : html`<slot name="advanced"></slot>`}
+    `;
+  }
+
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newTab = ev.detail.index;
+    if (newTab === this._currTabIndex) {
+      return;
+    }
+
+    this._currTabIndex = ev.detail.index;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-advanced-element-editor": HuiAdvancedElementEditor;
+  }
+}
diff --git a/src/panels/lovelace/editor/hui-header-footer-dropdown.ts b/src/panels/lovelace/editor/hui-header-footer-dropdown.ts
new file mode 100644
index 000000000000..bf9cf15da1b8
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-header-footer-dropdown.ts
@@ -0,0 +1,82 @@
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-item";
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  property,
+  css,
+  CSSResult,
+  customElement,
+} from "lit-element";
+
+import { headerFooters } from "./lovelace-cards";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import type { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-paper-dropdown-menu";
+
+@customElement("hui-header-footer-dropdown")
+export class HuiHeaderFooterDropdown extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property() public configValue!: string;
+
+  @property() public value?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-paper-dropdown-menu
+        label-float
+        dynamic-align
+        .label=${this.hass.localize(
+          `ui.panel.lovelace.editor.header-footer.${this.configValue}`
+        )}
+      >
+        <paper-listbox
+          slot="dropdown-content"
+          attr-for-selected="item-name"
+          .selected=${this.value}
+          @selected-changed=${this._headerFooterChanged}
+        >
+          <paper-item></paper-item>
+          ${headerFooters
+            .filter((headerFooter) => headerFooter.isHeader)
+            .map(
+              (headerFooter) =>
+                html`
+                  <paper-item .itemName=${headerFooter.type}
+                    >${this.hass!.localize(
+                      `ui.panel.lovelace.editor.header-footer.${headerFooter.type}.name`
+                    )}</paper-item
+                  >
+                `
+            )}
+        </paper-listbox>
+      </ha-paper-dropdown-menu>
+    `;
+  }
+
+  private _headerFooterChanged(ev: CustomEvent): void {
+    this.value = ev.detail.value ?? undefined;
+    fireEvent(this, "change");
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+      }
+      ha-paper-dropdown-menu {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-header-footer-dropdown": HuiHeaderFooterDropdown;
+  }
+}
diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts
index 13c099a791c5..0283bc13e078 100644
--- a/src/panels/lovelace/editor/lovelace-cards.ts
+++ b/src/panels/lovelace/editor/lovelace-cards.ts
@@ -1,4 +1,4 @@
-import { Card } from "./types";
+import { Card, HeaderFooter } from "./types";
 
 export const coreCards: Card[] = [
   {
@@ -104,3 +104,7 @@ export const coreCards: Card[] = [
     type: "shopping-list",
   },
 ];
+
+export const headerFooters: HeaderFooter[] = [
+  { type: "graph", isFooter: true, isHeader: true },
+];
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index 04a2755a4bec..bef75db7f348 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -8,6 +8,7 @@ import { EntityConfig } from "../entity-rows/types";
 import { optional, string, object, union } from "superstruct";
 import { EntityId } from "../common/structs/is-entity-id";
 import { Icon } from "../common/structs/is-icon";
+import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 
 export interface YamlChangedEvent extends Event {
   detail: {
@@ -43,6 +44,7 @@ export interface ConfigError {
 export interface EntitiesEditorEvent {
   detail?: {
     entities?: EntityConfig[];
+    config?: LovelaceHeaderFooterConfig;
   };
   target?: EventTarget;
 }
@@ -64,6 +66,12 @@ export interface Card {
   isCustom?: boolean;
 }
 
+export interface HeaderFooter {
+  type: string;
+  isHeader?: boolean;
+  isFooter?: boolean;
+}
+
 export interface CardPickTarget extends EventTarget {
   config: LovelaceCardConfig;
 }
diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
index 8cbda2ed3e9b..08489a22776f 100644
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -16,8 +16,9 @@ import { HomeAssistant } from "../../../types";
 import { coordinates } from "../common/graph/coordinates";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-graph-base";
-import { LovelaceHeaderFooter } from "../types";
+import { LovelaceHeaderFooter, LovelaceHeaderFooterEditor } from "../types";
 import { GraphHeaderFooterConfig } from "./types";
+import { findEntities } from "../common/find-entites";
 
 const MINUTE = 60000;
 const DAY = 86400000;
@@ -25,8 +26,40 @@ const DAY = 86400000;
 @customElement("hui-graph-header-footer")
 export class HuiGraphHeaderFooter extends LitElement
   implements LovelaceHeaderFooter {
-  public static getStubConfig(): object {
-    return {};
+  public static async getConfigElement(): Promise<LovelaceHeaderFooterEditor> {
+    await import(
+      /* webpackChunkName: "hui-graph-footer-editor" */ "../editor/config-elements/hui-graph-footer-editor"
+    );
+    return document.createElement("hui-graph-footer-editor");
+  }
+
+  public static getStubConfig(
+    hass: HomeAssistant,
+    entities: string[],
+    entitiesFallback: string[]
+  ): GraphHeaderFooterConfig {
+    const includeDomains = ["sensor"];
+    const maxEntities = 1;
+    const entityFilter = (stateObj: HassEntity): boolean => {
+      return (
+        !isNaN(Number(stateObj.state)) &&
+        !!stateObj.attributes.unit_of_measurement
+      );
+    };
+
+    const foundEntities = findEntities(
+      hass,
+      maxEntities,
+      entities,
+      entitiesFallback,
+      includeDomains,
+      entityFilter
+    );
+
+    return {
+      type: "graph",
+      entity: foundEntities[0] || "",
+    };
   }
 
   @property({ attribute: false }) public hass?: HomeAssistant;
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index 4bd956ee1d92..5d3d6aad290a 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -48,6 +48,16 @@ export interface LovelaceCardConstructor extends Constructor<LovelaceCard> {
   getConfigElement?: () => LovelaceCardEditor;
 }
 
+export interface LovelaceHeaderFooterConstructor
+  extends Constructor<LovelaceHeaderFooter> {
+  getStubConfig?: (
+    hass: HomeAssistant,
+    entities: string[],
+    entitiesFallback: string[]
+  ) => LovelaceCardConfig;
+  getConfigElement?: () => LovelaceHeaderFooterEditor;
+}
+
 export interface LovelaceHeaderFooter extends HTMLElement {
   hass?: HomeAssistant;
   getCardSize(): number | Promise<number>;
@@ -60,3 +70,9 @@ export interface LovelaceCardEditor extends HTMLElement {
   setConfig(config: LovelaceCardConfig): void;
   refreshYamlEditor?: (focus: boolean) => void;
 }
+
+export interface LovelaceHeaderFooterEditor extends HTMLElement {
+  hass?: HomeAssistant;
+  lovelace?: LovelaceConfig;
+  setConfig(config: LovelaceCardConfig): void;
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index e228ccb71213..7562e67eea11 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2104,7 +2104,9 @@
             "delete": "Delete Card",
             "duplicate": "Duplicate Card",
             "move": "Move to View",
-            "options": "More options"
+            "options": "More options",
+            "editor": "Editor",
+            "advanced": "Advanced"
           },
           "move_card": {
             "header": "Choose a view to move the card to"
@@ -2319,6 +2321,13 @@
           "cardpicker": {
             "no_description": "No description available.",
             "custom_card": "Custom"
+          },
+          "header-footer": {
+            "header": "Header",
+            "footer": "Footer",
+            "graph": {
+              "name": "Graph"
+            }
           }
         },
         "warning": {

From 11f63276622f8b0dfe04f8f394eadf9c2df2ef96 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 30 Aug 2020 21:52:54 -0500
Subject: [PATCH 02/63] fix what I broke in my last checks

---
 .../hui-entities-card-editor.ts               | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index b45972e0af3f..c9a9f211ea59 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -83,11 +83,11 @@ export class HuiEntitiesCardEditor extends LitElement
     this._config = config;
     this._configEntities = processEditorEntities(config.entities);
 
-    if (this._config.footer?.type) {
-      this._updateHeaderFooterElement(this._config.footer);
-    }
     if (this._config.header?.type) {
-      this._updateHeaderFooterElement(this._config.header);
+      this._updateHeaderFooterElement("header", this._config.header);
+    }
+    if (this._config.footer?.type) {
+      this._updateHeaderFooterElement("footer", this._config.footer);
     }
   }
 
@@ -106,7 +106,7 @@ export class HuiEntitiesCardEditor extends LitElement
 
     return html`
       ${configElementStyle}
-      <hui-advanced-element-editor>
+      <hui-advanced-element-editor .hass=${this.hass}>
         <div slot="editor">
           <div class="card-config">
             <paper-input
@@ -238,12 +238,13 @@ export class HuiEntitiesCardEditor extends LitElement
       return;
     }
 
-    this._updateHeaderFooterElement({
+    this._updateHeaderFooterElement(target.configValue!, {
       type: target.value,
     });
   }
 
   private async _updateHeaderFooterElement(
+    type: "header" | "footer",
     config: LovelaceHeaderFooterConfig | { type: string }
   ): Promise<void> {
     if (!this._config || !this.hass) {
@@ -256,24 +257,20 @@ export class HuiEntitiesCardEditor extends LitElement
       this._configEntities?.map((confEntity) => confEntity.entity) || []
     );
 
-    this[`_${config.type}Element`] = headerFooterEditor?.configElement;
+    this[`_${type}Element`] = headerFooterEditor?.configElement;
 
-    if (!this[`_${config.type}Element`]) {
+    if (!this[`_${type}Element`]) {
       return;
     }
-
     this._config = {
       ...this._config,
-      [config.type]: { ...headerFooterEditor!.config },
+      [type]: { ...headerFooterEditor!.config },
     };
 
-    this[`_${config.type}Element`].hass = this.hass;
-    this[`_${config.type}Element`].setConfig(headerFooterEditor!.config);
-    this[`_${config.type}Element`].addEventListener("config-changed", (ev) =>
-      this._handleHeaderFooterConfigChanged(
-        ev as UIConfigChangedEvent,
-        config.type
-      )
+    this[`_${type}Element`].hass = this.hass;
+    this[`_${type}Element`].setConfig(headerFooterEditor!.config);
+    this[`_${type}Element`].addEventListener("config-changed", (ev) =>
+      this._handleHeaderFooterConfigChanged(ev as UIConfigChangedEvent, type)
     );
   }
 

From 70cbbcd4cb43fb156fa2eb0b55ee0925ef1df1f9 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 30 Aug 2020 22:29:30 -0500
Subject: [PATCH 03/63] Make the config changes go through same function

---
 .../editor/card-editor/hui-card-editor.ts     |  7 -----
 .../hui-entities-card-editor.ts               | 30 +++++++------------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
index 351266fd9ba9..f081cc65ae7e 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -28,7 +28,6 @@ import "../../../../components/ha-circular-progress";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import { handleStructError } from "../../common/structs/handle-errors";
 import { GUISupportError } from "../gui-support-error";
-import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 
 export interface ConfigChangedEvent {
   config: LovelaceCardConfig;
@@ -52,12 +51,6 @@ export interface UIConfigChangedEvent extends Event {
   };
 }
 
-export interface UIHeaderFooterConfigChangedEvent extends Event {
-  detail: {
-    config: LovelaceHeaderFooterConfig;
-  };
-}
-
 @customElement("hui-card-editor")
 export class HuiCardEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index c9a9f211ea59..551bce20be03 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -46,10 +46,6 @@ import {
   union,
   assert,
 } from "superstruct";
-import {
-  UIConfigChangedEvent,
-  UIHeaderFooterConfigChangedEvent,
-} from "../card-editor/hui-card-editor";
 import { getHeaderFooterEditor } from "../get-header-footer-editor";
 import "../hui-header-footer-dropdown";
 import "../hui-advanced-element-editor";
@@ -193,6 +189,8 @@ export class HuiEntitiesCardEditor extends LitElement
       return;
     }
 
+    ev.stopPropagation();
+
     const target = ev.target! as EditorTarget;
 
     if (
@@ -206,6 +204,11 @@ export class HuiEntitiesCardEditor extends LitElement
       this._config = { ...this._config, entities: ev.detail.entities };
 
       this._configEntities = processEditorEntities(this._config.entities);
+    } else if (ev.detail && target.configValue) {
+      this._config = {
+        ...this._config,
+        [target.configValue]: ev.detail.config,
+      };
     } else if (target.configValue) {
       if (target.value === "") {
         this._config = { ...this._config };
@@ -262,32 +265,19 @@ export class HuiEntitiesCardEditor extends LitElement
     if (!this[`_${type}Element`]) {
       return;
     }
+
     this._config = {
       ...this._config,
       [type]: { ...headerFooterEditor!.config },
     };
 
     this[`_${type}Element`].hass = this.hass;
+    this[`_${type}Element`].configValue = type;
     this[`_${type}Element`].setConfig(headerFooterEditor!.config);
     this[`_${type}Element`].addEventListener("config-changed", (ev) =>
-      this._handleHeaderFooterConfigChanged(ev as UIConfigChangedEvent, type)
+      this._valueChanged(ev as EntitiesEditorEvent)
     );
   }
-
-  private _handleHeaderFooterConfigChanged(
-    ev: UIHeaderFooterConfigChangedEvent,
-    configValue: string
-  ) {
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    ev.stopPropagation();
-    const config = ev.detail.config;
-    this._config = { ...this._config, [configValue]: config };
-
-    fireEvent(this, "config-changed", { config: this._config });
-  }
 }
 
 declare global {

From 12273adc10af7eb2111f8579ecf2fde767a6055c Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 31 Aug 2020 09:54:08 -0500
Subject: [PATCH 04/63] EntitiesEditorEvent to HassDomEvent Detail Type

---
 .../editor/config-elements/hui-alarm-panel-card-editor.ts | 8 ++++----
 .../editor/config-elements/hui-button-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-calendar-card-editor.ts    | 6 ++++--
 .../editor/config-elements/hui-entities-card-editor.ts    | 4 ++--
 .../editor/config-elements/hui-entity-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-gauge-card-editor.ts       | 8 ++++----
 .../editor/config-elements/hui-glance-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-graph-footer-editor.ts     | 4 ++--
 .../config-elements/hui-history-graph-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-humidifier-card-editor.ts  | 4 ++--
 .../editor/config-elements/hui-iframe-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-light-card-editor.ts       | 4 ++--
 .../editor/config-elements/hui-map-card-editor.ts         | 4 ++--
 .../editor/config-elements/hui-markdown-card-editor.ts    | 4 ++--
 .../config-elements/hui-media-control-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-picture-card-editor.ts     | 4 ++--
 .../config-elements/hui-picture-entity-card-editor.ts     | 4 ++--
 .../config-elements/hui-picture-glance-card-editor.ts     | 4 ++--
 .../config-elements/hui-plant-status-card-editor.ts       | 4 ++--
 .../editor/config-elements/hui-sensor-card-editor.ts      | 4 ++--
 .../editor/config-elements/hui-shopping-list-editor.ts    | 4 ++--
 .../editor/config-elements/hui-thermostat-card-editor.ts  | 4 ++--
 .../config-elements/hui-weather-forecast-card-editor.ts   | 4 ++--
 src/panels/lovelace/editor/types.ts                       | 7 ++-----
 .../lovelace/editor/view-editor/hui-dialog-edit-view.ts   | 2 +-
 25 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index bf9c96319998..a3a8a0961123 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -11,7 +11,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
 import { HomeAssistant } from "../../../../types";
@@ -146,7 +146,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     `;
   }
 
-  private _stateRemoved(ev: EntitiesEditorEvent): void {
+  private _stateRemoved(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this._states || !this.hass) {
       return;
     }
@@ -165,7 +165,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     }
   }
 
-  private _stateAdded(ev: EntitiesEditorEvent): void {
+  private _stateAdded(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -184,7 +184,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     });
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 36ce2aab96c4..7292a3a45db6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -244,7 +244,7 @@ export class HuiButtonCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 5a7cd7049a93..0e3e16617aa4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
@@ -6,7 +6,7 @@ import {
   TemplateResult,
   internalProperty,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import type { HomeAssistant } from "../../../../types";
 import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
@@ -98,7 +98,9 @@ export class HuiCalendarCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent | CustomEvent): void {
+  private _valueChanged(
+    ev: HASSDomEvent<EntitiesEditorEvent> | CustomEvent
+  ): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 551bce20be03..39f306c93337 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -8,7 +8,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
@@ -184,7 +184,7 @@ export class HuiEntitiesCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index cd230be53511..64b78e62bdb9 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
 import { HomeAssistant } from "../../../../types";
@@ -144,7 +144,7 @@ export class HuiEntityCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index c58d65aa6b17..899e87e70472 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -9,7 +9,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
@@ -216,7 +216,7 @@ export class HuiGaugeCardEditor extends LitElement
     `;
   }
 
-  private _toggleSeverity(ev: EntitiesEditorEvent): void {
+  private _toggleSeverity(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -233,7 +233,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _severityChanged(ev: EntitiesEditorEvent): void {
+  private _severityChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -249,7 +249,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index 7d3de02655ef..194822c5fb17 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -9,7 +9,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
@@ -200,7 +200,7 @@ export class HuiGlanceCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
index 4821cf27005c..551142cebf63 100644
--- a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
@@ -8,7 +8,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { assert } from "superstruct";
 
@@ -97,7 +97,7 @@ export class HuiGraphFooterEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
index 71e783819045..6399aa58815a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { HistoryGraphCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
@@ -125,7 +125,7 @@ export class HuiHistoryGraphCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
index 61832481679d..f51b3ae8d9d3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
@@ -91,7 +91,7 @@ export class HuiHumidifierCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
index 07b1d2e0f487..6f785ab76f15 100644
--- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
@@ -90,7 +90,7 @@ export class HuiIframeCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
index 6e37bd0358ee..6c8014226e0d 100644
--- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -164,7 +164,7 @@ export class HuiLightCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index bf9291131e2f..519e5d124eb5 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -9,7 +9,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../../../polymer-types";
 import { HomeAssistant } from "../../../../types";
 import { MapCardConfig } from "../../cards/types";
@@ -179,7 +179,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     `;
   }
 
-  private _entitiesValueChanged(ev: EntitiesEditorEvent): void {
+  private _entitiesValueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
index 1b8d9e5fb891..cc4962cce6a5 100644
--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@@ -8,7 +8,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
@@ -94,7 +94,7 @@ export class HuiMarkdownCardEditor extends LitElement
     ev.stopPropagation();
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
index fa13a3c860f5..0aa3417b0d28 100644
--- a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
@@ -6,7 +6,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
@@ -61,7 +61,7 @@ export class HuiMediaControlCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
index 98fbf6af9a52..afcb82f31bcb 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureCardConfig } from "../../cards/types";
@@ -114,7 +114,7 @@ export class HuiPictureCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index 235bfdd8b626..c72d5275c11a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -10,7 +10,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -256,7 +256,7 @@ export class HuiPictureEntityCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
index bb88e01772f0..90ff5edbce49 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
@@ -10,7 +10,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -239,7 +239,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
index e24fc10f743b..42ef43e8a203 100644
--- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
 import { HomeAssistant } from "../../../../types";
@@ -92,7 +92,7 @@ export class HuiPlantStatusCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
index d42fba0fb670..c7a5f7de43ac 100644
--- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -10,7 +10,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon-input";
@@ -191,7 +191,7 @@ export class HuiSensorCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index f82fb7e9bb75..d6fc50232f0a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -10,7 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
@@ -80,7 +80,7 @@ export class HuiShoppingListEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
index e7cefd2e41a7..01a88cc1caa2 100644
--- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -7,7 +7,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { ThermostatCardConfig } from "../../cards/types";
@@ -91,7 +91,7 @@ export class HuiThermostatCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index 8de36e2985d2..6541977413fd 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -6,7 +6,7 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
@@ -129,7 +129,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index bef75db7f348..5e82087eb7dc 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -42,11 +42,8 @@ export interface ConfigError {
 }
 
 export interface EntitiesEditorEvent {
-  detail?: {
-    entities?: EntityConfig[];
-    config?: LovelaceHeaderFooterConfig;
-  };
-  target?: EventTarget;
+  entities?: EntityConfig[];
+  config?: LovelaceHeaderFooterConfig;
 }
 
 export interface EditorTarget extends EventTarget {
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 99a4022efc70..d83214b7debd 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -315,7 +315,7 @@ export class HuiDialogEditView extends LitElement {
     }
   }
 
-  private _badgesChanged(ev: EntitiesEditorEvent): void {
+  private _badgesChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._badges || !this.hass || !ev.detail || !ev.detail.entities) {
       return;
     }

From 0197596af2e284c6b672f0ce677981f246708b42 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 31 Aug 2020 10:04:01 -0500
Subject: [PATCH 05/63] missed conversion

---
 .../lovelace/editor/config-elements/hui-entities-card-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 39f306c93337..926e6d15fb9e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -275,7 +275,7 @@ export class HuiEntitiesCardEditor extends LitElement
     this[`_${type}Element`].configValue = type;
     this[`_${type}Element`].setConfig(headerFooterEditor!.config);
     this[`_${type}Element`].addEventListener("config-changed", (ev) =>
-      this._valueChanged(ev as EntitiesEditorEvent)
+      this._valueChanged(ev as HASSDomEvent<EntitiesEditorEvent>)
     );
   }
 }

From 5cfc984d196f9b73bbe5cce89c8d2ea5f5160115 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 31 Aug 2020 14:28:15 -0500
Subject: [PATCH 06/63] Adds headers to header and footer sections

---
 .../editor/config-elements/config-elements-style.ts    |  4 ++++
 .../editor/config-elements/hui-entities-card-editor.ts | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index f6ec959217ce..9cf69762ae82 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -20,5 +20,9 @@ export const configElementStyle = html`
       border: 1px solid var(--divider-color);
       padding: 12px;
     }
+
+    .header-footer-heading {
+      margin-bottom: 0;
+    }
   </style>
 `;
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 926e6d15fb9e..bf551223a577 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -153,6 +153,11 @@ export class HuiEntitiesCardEditor extends LitElement
           ></hui-entity-editor>
         </div>
         <div slot="advanced">
+          <h3 class="header-footer-heading">
+            ${this.hass.localize(
+              `ui.panel.lovelace.editor.header-footer.header`
+            )}
+          </h3>
           <hui-header-footer-dropdown
             .hass=${this.hass}
             .value=${this._config.header?.type}
@@ -166,6 +171,11 @@ export class HuiEntitiesCardEditor extends LitElement
                 </div>
               `
             : ""}
+          <h3 class="header-footer-heading">
+            ${this.hass.localize(
+              `ui.panel.lovelace.editor.header-footer.footer`
+            )}
+          </h3>
           <hui-header-footer-dropdown
             .hass=${this.hass}
             .value=${this._config.footer?.type}

From 4abbd691451328f32726d5ac1b854f2d2c6e7593 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 6 Sep 2020 00:20:50 -0500
Subject: [PATCH 07/63] fix duplicate import

---
 .../lovelace/editor/config-elements/hui-gauge-card-editor.ts   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index a9e6c5614899..85b1515c7c5e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -9,9 +9,8 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-switch";
 import { assert, number, object, optional, string } from "superstruct";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";

From 04b19542b74f12cf73039719ff6631c106737542 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 18 Sep 2020 15:25:14 -0500
Subject: [PATCH 08/63] type

---
 src/panels/lovelace/editor/types.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index b28182fc05a4..1007c203fd5e 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -1,13 +1,13 @@
+import { boolean, object, optional, string, union } from "superstruct";
 import {
   ActionConfig,
   LovelaceCardConfig,
   LovelaceViewConfig,
   ShowViewConfig,
 } from "../../../data/lovelace";
-import { EntityConfig } from "../entity-rows/types";
-import { optional, string, object, union, boolean } from "superstruct";
 import { EntityId } from "../common/structs/is-entity-id";
 import { Icon } from "../common/structs/is-icon";
+import { EntityConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 
 export interface YamlChangedEvent extends Event {
@@ -44,6 +44,7 @@ export interface ConfigError {
 export interface EntitiesEditorEvent {
   entities?: EntityConfig[];
   config?: LovelaceHeaderFooterConfig;
+  value?: any;
 }
 
 export interface EditorTarget extends EventTarget {

From 795734e6fd31401fc09eee0a62d4b586c4ae77f0 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 21 Sep 2020 15:30:13 -0500
Subject: [PATCH 09/63] Restore ha-automation-action-wait_template.ts

---
 .../action/types/ha-automation-action-wait_template.ts        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
index ed6326a381ff..2cf6a86299a1 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
@@ -40,9 +40,7 @@ export class HaWaitAction extends LitElement implements ActionElement {
       ></paper-input>
       <br />
       <ha-formfield
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout"
-        )}
+        .label=${this.hass.localize("ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout")}
       >
         <ha-switch
           .checked=${continue_on_timeout}

From 5800889bcff3c29d03bdb1f1d6bdf10c01c530ec Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 21 Sep 2020 15:39:32 -0500
Subject: [PATCH 10/63] remove unneeded type

---
 .../hui-alarm-panel-card-editor.ts            | 14 ++++-----
 .../config-elements/hui-button-card-editor.ts | 10 ++-----
 .../hui-calendar-card-editor.ts               | 30 +++++++++----------
 .../hui-entities-card-editor.ts               | 30 +++++++++----------
 .../config-elements/hui-entity-card-editor.ts |  6 ++--
 .../config-elements/hui-gauge-card-editor.ts  | 10 +++----
 .../hui-humidifier-card-editor.ts             | 10 +++----
 .../config-elements/hui-iframe-card-editor.ts | 10 +++----
 .../config-elements/hui-light-card-editor.ts  | 10 ++-----
 .../hui-markdown-card-editor.ts               | 10 +++----
 .../hui-media-control-card-editor.ts          | 10 +++----
 .../hui-picture-card-editor.ts                | 10 ++-----
 .../hui-picture-entity-card-editor.ts         | 10 ++-----
 .../hui-plant-status-card-editor.ts           | 10 +++----
 .../config-elements/hui-sensor-card-editor.ts | 10 +++----
 .../hui-shopping-list-editor.ts               | 10 +++----
 .../hui-thermostat-card-editor.ts             | 10 +++----
 .../hui-weather-forecast-card-editor.ts       | 14 ++++-----
 18 files changed, 103 insertions(+), 121 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index a3a8a0961123..7ca01dfdb718 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -6,21 +6,21 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { array, assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
 import { HomeAssistant } from "../../../../types";
 import { AlarmPanelCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { assert, object, string, optional, array } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -146,7 +146,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     `;
   }
 
-  private _stateRemoved(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _stateRemoved(ev: CustomEvent): void {
     if (!this._config || !this._states || !this.hass) {
       return;
     }
@@ -165,7 +165,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     }
   }
 
-  private _stateAdded(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _stateAdded(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -184,7 +184,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     });
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 5b41a725abf5..a2285c087d6c 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -8,7 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, boolean, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+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";
@@ -21,11 +21,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
+import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -262,7 +258,7 @@ export class HuiButtonCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 0e3e16617aa4..eaa75d9dda4e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
@@ -1,29 +1,29 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
-  internalProperty,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import {
+  array,
+  assert,
+  boolean,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/entity/ha-entities-picker";
 import type { HomeAssistant } from "../../../../types";
 import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
-import "../../../../components/entity/ha-entities-picker";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
-import type { EditorTarget, EntitiesEditorEvent } from "../types";
+import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import {
-  string,
-  optional,
-  object,
-  boolean,
-  array,
-  union,
-  assert,
-} from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -98,9 +98,7 @@ export class HuiCalendarCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(
-    ev: HASSDomEvent<EntitiesEditorEvent> | CustomEvent
-  ): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index bf551223a577..b7ae0487f01f 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -3,17 +3,27 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import {
+  array,
+  assert,
+  boolean,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
+import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
-import "../../../../components/ha-formfield";
 import { HomeAssistant } from "../../../../types";
 import {
   EntitiesCardConfig,
@@ -29,6 +39,9 @@ import type {
   LovelaceCardEditor,
   LovelaceHeaderFooterEditor,
 } from "../../types";
+import { getHeaderFooterEditor } from "../get-header-footer-editor";
+import "../hui-advanced-element-editor";
+import "../hui-header-footer-dropdown";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -36,19 +49,6 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import {
-  string,
-  optional,
-  object,
-  boolean,
-  array,
-  union,
-  assert,
-} from "superstruct";
-import { getHeaderFooterEditor } from "../get-header-footer-editor";
-import "../hui-header-footer-dropdown";
-import "../hui-advanced-element-editor";
 
 const cardConfigStruct = object({
   type: string(),
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index b50dd6e829a5..91f5c3fc21d1 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -8,7 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../components/ha-icon-input";
@@ -19,7 +19,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -147,7 +147,7 @@ export class HuiEntityCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index 85b1515c7c5e..ca0caf3c3781 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -10,7 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, number, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";
@@ -19,7 +19,7 @@ import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -216,7 +216,7 @@ export class HuiGaugeCardEditor extends LitElement
     `;
   }
 
-  private _toggleSeverity(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _toggleSeverity(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -237,7 +237,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _severityChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _severityChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -253,7 +253,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
index f51b3ae8d9d3..4f16f82f3d24 100644
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -2,20 +2,20 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, object, optional, assert } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -91,7 +91,7 @@ export class HuiHumidifierCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
index 6f785ab76f15..da2605630d67 100644
--- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
@@ -2,18 +2,18 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, assert, object, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -90,7 +90,7 @@ export class HuiIframeCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
index ec19e1e20303..1d90cd20add9 100644
--- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
@@ -8,7 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-icon-input";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -18,11 +18,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
+import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -164,7 +160,7 @@ export class HuiLightCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
index cc4962cce6a5..081720d64b3b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@@ -3,19 +3,19 @@ import "@polymer/paper-input/paper-textarea";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, assert, object, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -94,7 +94,7 @@ export class HuiMarkdownCardEditor extends LitElement
     ev.stopPropagation();
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
index 0aa3417b0d28..2f4f826ff1e3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
@@ -1,18 +1,18 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { assert, object, string, optional } from "superstruct";
+import { EditorTarget } from "../types";
 
 const cardConfigStruct = object({
   type: string(),
@@ -61,7 +61,7 @@ export class HuiMediaControlCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
index e6f0234e076f..885854532579 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -8,18 +8,14 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
+import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -114,7 +110,7 @@ export class HuiPictureCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index bffa9ec50381..8f6a72828146 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -11,7 +11,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { assert, boolean, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";
@@ -22,11 +22,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import {
-  actionConfigStruct,
-  EditorTarget,
-  EntitiesEditorEvent,
-} from "../types";
+import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -273,7 +269,7 @@ export class HuiPictureEntityCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
index 42ef43e8a203..074d66fec05e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
@@ -2,21 +2,21 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
 import { HomeAssistant } from "../../../../types";
 import { PlantStatusCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { assert, object, string, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -92,7 +92,7 @@ export class HuiPlantStatusCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
index c7a5f7de43ac..35522ce152cf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -5,12 +5,13 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, number, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon-input";
@@ -18,9 +19,8 @@ import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, assert, object, optional, number } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -191,7 +191,7 @@ export class HuiSensorCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index d6fc50232f0a..df41a74f8bfd 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -4,19 +4,19 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { string, assert, object, optional } from "superstruct";
+import { EditorTarget } from "../types";
 
 const cardConfigStruct = object({
   type: string(),
@@ -80,7 +80,7 @@ export class HuiShoppingListEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
index 01a88cc1caa2..dda5291d1711 100644
--- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -2,20 +2,20 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { ThermostatCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { object, string, optional, assert } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -91,7 +91,7 @@ export class HuiThermostatCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index 6541977413fd..c9bec3dbaea6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -1,23 +1,23 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { assert, boolean, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { WeatherForecastCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { object, string, optional, boolean, assert } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -129,7 +129,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From deb37efba3c9f4423fda99a3ea7738a874fd74d4 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 21 Sep 2020 15:51:45 -0500
Subject: [PATCH 11/63] Use new detail toggle

---
 .../hui-graph-footer-editor.ts                | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
index 551142cebf63..ded8392238d7 100644
--- a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
@@ -3,24 +3,24 @@ import "@polymer/paper-input/paper-input";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
-import { configElementStyle } from "./config-elements-style";
 import { assert } from "superstruct";
-
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-switch";
+import type { HomeAssistant } from "../../../../types";
 import {
   GraphHeaderFooterConfig,
   graphHeaderFooterConfigStruct,
 } from "../../header-footer/types";
-import type { EditorTarget, EntitiesEditorEvent } from "../types";
-import type { HomeAssistant } from "../../../../types";
 import type { LovelaceCardEditor } from "../../types";
-
-import "../../../../components/entity/ha-entity-picker";
+import type { EditorTarget, EntitiesEditorEvent } from "../types";
+import { configElementStyle } from "./config-elements-style";
 
 const includeDomains = ["sensor"];
 
@@ -41,7 +41,7 @@ export class HuiGraphFooterEditor extends LitElement
   }
 
   get _detail(): number {
-    return this._config!.detail || 1;
+    return this._config!.detail ?? 1;
   }
 
   get _hours_to_show(): number {
@@ -70,17 +70,17 @@ export class HuiGraphFooterEditor extends LitElement
           @change=${this._valueChanged}
         ></ha-entity-picker>
         <div class="side-by-side">
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.graph_detail"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._detail}
-            .configValue=${"detail"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
+          <ha-formfield
+            label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.sensor.show_more_detail"
+            )}
+          >
+            <ha-switch
+              .checked=${this._detail === 2}
+              .configValue=${"detail"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-formfield>
           <paper-input
             type="number"
             .label="${this.hass.localize(
@@ -97,6 +97,25 @@ export class HuiGraphFooterEditor extends LitElement
     `;
   }
 
+  private _change(ev: Event) {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const value = (ev.target! as EditorTarget).checked ? 2 : 1;
+
+    if (this._detail === value) {
+      return;
+    }
+
+    this._config = {
+      ...this._config,
+      detail: value,
+    };
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
   private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
     if (!this._config || !this.hass) {
       return;

From 33c82ea9c6b5567dfefbbe120ed5ad9cba1e9740 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:03 -0500
Subject: [PATCH 12/63] Restore hassio-system-metrics.ts

---
 hassio/src/system/hassio-system-metrics.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/hassio/src/system/hassio-system-metrics.ts b/hassio/src/system/hassio-system-metrics.ts
index 0b6973626d2a..b3cafdbd27ad 100644
--- a/hassio/src/system/hassio-system-metrics.ts
+++ b/hassio/src/system/hassio-system-metrics.ts
@@ -65,7 +65,9 @@ class HassioSystemMetrics extends LitElement {
       {
         description: "Used Space",
         value: this._getUsedSpace(this.hostInfo),
-        tooltip: `${this.hostInfo.disk_used} GB/${this.hostInfo.disk_total} GB`,
+        tooltip: `${
+          this.hostInfo.disk_used
+        } GB/${this.hostInfo.disk_total} GB`,
       },
     ];
 

From ce0d17df19699f6b073ed8151d0a598e956b349f Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:09 -0500
Subject: [PATCH 13/63] Restore ha-chart-base.js

---
 src/components/entity/ha-chart-base.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index e02470bd08be..8ddcd75f1352 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -278,7 +278,7 @@ class HaChartBase extends mixinBehaviors(
     this.set(["tooltip", "title"], title);
 
     if (tooltip.beforeBody) {
-      this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
+        this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
     }
 
     const bodyLines = tooltip.body.map((n) => n.lines);

From 5d2df00ecb3ac6f951809b9255be10aa7b0a1a22 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:14 -0500
Subject: [PATCH 14/63] Restore ha-config-person.ts

---
 src/panels/config/person/ha-config-person.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index afa0ccb196d4..467b04673a3e 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -87,16 +87,22 @@ class HaConfigPerson extends LitElement {
                   </p>
                 `
               : ""}
-
+            
             <a
-              href=${documentationUrl(this.hass, "/integrations/person/")}
+              href=${documentationUrl(
+              this.hass,
+              "/integrations/person/"
+              )}
               target="_blank"
               rel="noreferrer"
             >
-              ${this.hass.localize("ui.panel.config.person.learn_more")}
+              ${this.hass.localize(
+              "ui.panel.config.person.learn_more"
+              )}
             </a>
           </span>
 
+          
           <ha-card class="storage">
             ${this._storageItems.map((entry) => {
               return html`

From 5dc0df15eb522787110fc5fc98b16275989c756a Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:24 -0500
Subject: [PATCH 15/63] Restore generate-lovelace-config.ts

---
 src/panels/lovelace/common/generate-lovelace-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index 63c983013451..e594bedcd6fc 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -173,7 +173,7 @@ export const computeCards = (
       const cardConfig = {
         type: "weather-forecast",
         entity: entityId,
-        show_forecast: false,
+        show_forecast: false
       };
       cards.push(cardConfig);
     } else if (

From a84dd08cc25adafe13556847b864588c5149d919 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:41 -0500
Subject: [PATCH 16/63] Restore hui-alarm-panel-card-editor.ts

---
 .../editor/config-elements/hui-alarm-panel-card-editor.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index d95c83dbc791..f21af05f04ac 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -19,7 +19,7 @@ import { HomeAssistant } from "../../../../types";
 import { AlarmPanelCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -148,7 +148,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     ];
   }
 
-  private _stateRemoved(ev: CustomEvent): void {
+  private _stateRemoved(ev: EntitiesEditorEvent): void {
     if (!this._config || !this._states || !this.hass) {
       return;
     }
@@ -167,7 +167,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     }
   }
 
-  private _stateAdded(ev: CustomEvent): void {
+  private _stateAdded(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -186,7 +186,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     });
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 8af44047dc04983484e764ca43e5e2ec22891775 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:41:50 -0500
Subject: [PATCH 17/63] Restore hui-calendar-card-editor.ts

---
 .../editor/config-elements/hui-calendar-card-editor.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 3cd9f4d9fee1..0dad4b531b04 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
@@ -23,7 +23,7 @@ import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
-import type { EditorTarget } from "../types";
+import type { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -130,7 +130,7 @@ export class HuiCalendarCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent | CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 131fa4a4c629bd1fef2e456136d6d79d273381dd Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:08 -0500
Subject: [PATCH 18/63] Restore hui-entity-card-editor.ts

---
 .../lovelace/editor/config-elements/hui-entity-card-editor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index 0cb534aca6d2..f4d8f54921bf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -20,7 +20,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -147,7 +147,7 @@ export class HuiEntityCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From a003bc1680fb15e89735753515a36789a5afca3c Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:18 -0500
Subject: [PATCH 19/63] Restore hui-gauge-card-editor.ts

---
 .../editor/config-elements/hui-gauge-card-editor.ts       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index b16251831efa..613a278f0122 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -19,7 +19,7 @@ import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -218,7 +218,7 @@ export class HuiGaugeCardEditor extends LitElement
     ];
   }
 
-  private _toggleSeverity(ev: CustomEvent): void {
+  private _toggleSeverity(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -239,7 +239,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _severityChanged(ev: CustomEvent): void {
+  private _severityChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
@@ -255,7 +255,7 @@ export class HuiGaugeCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From dd80fe29b4feb847b5fc40552d72ec843acbc77f Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:23 -0500
Subject: [PATCH 20/63] Restore hui-glance-card-editor.ts

---
 .../lovelace/editor/config-elements/hui-glance-card-editor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index 61fd9f51c89e..9372cba30b7c 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -20,7 +20,7 @@ import {
   string,
   union,
 } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
@@ -200,7 +200,7 @@ export class HuiGlanceCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From cab44550a2dc8d8e7d9ddc51d8e6699152b3b9b8 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:33 -0500
Subject: [PATCH 21/63] Restore hui-history-graph-card-editor.ts

---
 .../editor/config-elements/hui-history-graph-card-editor.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
index e06c861b8745..f7bf34b99bcb 100644
--- a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
@@ -17,7 +17,7 @@ import {
   string,
   union,
 } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { HistoryGraphCardConfig } from "../../cards/types";
 import { EntityId } from "../../common/structs/is-entity-id";
@@ -125,7 +125,7 @@ export class HuiHistoryGraphCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From f11da65546ed1c3e07f83c1a591d02668680d8b5 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:39 -0500
Subject: [PATCH 22/63] Restore hui-humidifier-card-editor.ts

---
 .../editor/config-elements/hui-humidifier-card-editor.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
index 55eb6252a90e..a6ebb008b1a6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -91,7 +91,7 @@ export class HuiHumidifierCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 04eb1d54b8fbc1e44ed0978a12adfcda20233c6e Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:44 -0500
Subject: [PATCH 23/63] Restore hui-iframe-card-editor.ts

---
 .../lovelace/editor/config-elements/hui-iframe-card-editor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
index c9319f7b522c..a4b64e18943a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
@@ -13,7 +13,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -90,7 +90,7 @@ export class HuiIframeCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 81416dad62f2987710f8f10c3af763c8c517cbd8 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:48 -0500
Subject: [PATCH 24/63] Restore hui-map-card-editor.ts

---
 .../lovelace/editor/config-elements/hui-map-card-editor.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index e0718aed1394..ff7d92d3ab9f 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -18,7 +18,7 @@ import {
   optional,
   string,
 } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";
@@ -178,7 +178,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     `;
   }
 
-  private _entitiesValueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _entitiesValueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 5c66e958c579660a6af068269f78c8c8781963c5 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:42:54 -0500
Subject: [PATCH 25/63] Restore hui-markdown-card-editor.ts

---
 .../editor/config-elements/hui-markdown-card-editor.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
index d6586807aa19..1fde251a1d82 100644
--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -94,7 +94,7 @@ export class HuiMarkdownCardEditor extends LitElement
     ev.stopPropagation();
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 6a6c6ef2ef3f75deb31b15a928c436752a4b3c0f Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:00 -0500
Subject: [PATCH 26/63] Restore hui-media-control-card-editor.ts

---
 .../config-elements/hui-media-control-card-editor.ts      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
index 2f4f826ff1e3..fa13a3c860f5 100644
--- a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
@@ -1,18 +1,18 @@
 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 "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { assert, object, string, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -61,7 +61,7 @@ export class HuiMediaControlCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From df8ba89401a49fc75a4bc79649d7ef5192ac92db Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:05 -0500
Subject: [PATCH 27/63] Restore hui-picture-glance-card-editor.ts

---
 .../editor/config-elements/hui-picture-glance-card-editor.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
index 81c249c02c05..fd68a51057a0 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
@@ -12,7 +12,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { array, assert, object, optional, string } from "superstruct";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -27,7 +27,6 @@ import {
   actionConfigStruct,
   EditorTarget,
   entitiesConfigStruct,
-  EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -230,7 +229,7 @@ export class HuiPictureGlanceCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: CustomEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From c56e7208635eeec6980833c14b9a71c74ebf6fbf Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:10 -0500
Subject: [PATCH 28/63] Restore hui-plant-status-card-editor.ts

---
 .../editor/config-elements/hui-plant-status-card-editor.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
index a71b59d99605..5c89dfd149c3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
@@ -16,7 +16,7 @@ import { HomeAssistant } from "../../../../types";
 import { PlantStatusCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -92,7 +92,7 @@ export class HuiPlantStatusCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From d155b89bc5e277df945d421f3c02b4865e69d9c4 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:19 -0500
Subject: [PATCH 29/63] Restore hui-sensor-card-editor.ts

---
 .../lovelace/editor/config-elements/hui-sensor-card-editor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
index 0e51c100e655..a625fc582975 100644
--- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -22,7 +22,7 @@ import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -212,7 +212,7 @@ export class HuiSensorCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 7228ffbefe0c75e8cbbe9a1eaf2e1da405f27107 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:26 -0500
Subject: [PATCH 30/63] Restore hui-shopping-list-editor.ts

---
 .../editor/config-elements/hui-shopping-list-editor.ts    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index df41a74f8bfd..f82fb7e9bb75 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -4,19 +4,19 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
-import { assert, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
+import { string, assert, object, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -80,7 +80,7 @@ export class HuiShoppingListEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From b8d35266b81994002499a9d7c50cbec4eda72e82 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:35 -0500
Subject: [PATCH 31/63] Restore hui-thermostat-card-editor.ts

---
 .../editor/config-elements/hui-thermostat-card-editor.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
index accbf7f621c2..775b2c8e20a0 100644
--- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { ThermostatCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -91,7 +91,7 @@ export class HuiThermostatCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 9c5eaecb4eedb53340d296aa22b0ff5cf52b30e6 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:43:41 -0500
Subject: [PATCH 32/63] Restore hui-weather-forecast-card-editor.ts

---
 .../config-elements/hui-weather-forecast-card-editor.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index 30fa7999e8d9..cd7327a78327 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -17,7 +17,7 @@ import { HomeAssistant } from "../../../../types";
 import { WeatherForecastCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
-import { EditorTarget } from "../types";
+import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = object({
@@ -129,7 +129,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }

From 26a79559d8841ad7a5b52ae9e5b0f40aa1374587 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:45:22 -0500
Subject: [PATCH 33/63] Restore hui-dialog-edit-view.ts

---
 src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 806f06ba4c5f..0c0e38cb7077 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -318,7 +318,7 @@ export class HuiDialogEditView extends LitElement {
     }
   }
 
-  private _badgesChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _badgesChanged(ev: EntitiesEditorEvent): void {
     if (!this._badges || !this.hass || !ev.detail || !ev.detail.entities) {
       return;
     }

From a7bc422ca0e17c1407c642ff46a5f776fcf6dc54 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:45:55 -0500
Subject: [PATCH 34/63] Restore ha-refresh-tokens-card.ts

---
 src/panels/profile/ha-refresh-tokens-card.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts
index 044dfa630dc2..ee8a48367fbe 100644
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -29,12 +29,12 @@ const compareTokenLastUsedAt = (tokenA: RefreshToken, tokenB: RefreshToken) => {
   const timeB = tokenB.last_used_at ? new Date(tokenB.last_used_at) : 0;
   if (timeA < timeB) {
     return 1;
-  }
+  } 
   if (timeA > timeB) {
     return -1;
   }
   return 0;
-};
+}
 
 @customElement("ha-refresh-tokens-card")
 class HaRefreshTokens extends LitElement {
@@ -44,9 +44,7 @@ class HaRefreshTokens extends LitElement {
 
   private _refreshTokens = memoizeOne(
     (refreshTokens: RefreshToken[]): RefreshToken[] =>
-      refreshTokens
-        ?.filter((token) => token.type === "normal")
-        .sort(compareTokenLastUsedAt)
+      refreshTokens?.filter((token) => token.type === "normal").sort(compareTokenLastUsedAt)
   );
 
   protected render(): TemplateResult {

From 8fb6f255ec558e8ed56215ebcc11215163d731b3 Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 12 Oct 2020 21:46:02 -0500
Subject: [PATCH 35/63] Restore bytes-to-string.ts

---
 src/util/bytes-to-string.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/util/bytes-to-string.ts b/src/util/bytes-to-string.ts
index 5f59397bb84d..72829b15daa3 100644
--- a/src/util/bytes-to-string.ts
+++ b/src/util/bytes-to-string.ts
@@ -1,10 +1,10 @@
 export const bytesToString = (value = 0, decimals = 2): string => {
-  if (value === 0) {
-    return "0 Bytes";
-  }
-  const k = 1024;
-  decimals = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-  const i = Math.floor(Math.log(value) / Math.log(k));
-  return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
-};
+    if (value === 0) {
+      return '0 Bytes';
+    }
+    const k = 1024;
+    decimals = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(value) / Math.log(k));
+    return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
+}

From 3042a7751ec01025fccf9a4fb4e13d8d4700b6ae Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Tue, 13 Oct 2020 16:46:06 -0500
Subject: [PATCH 36/63] Restore hui-entities-card-editor.ts

---
 .../hui-entities-card-editor.ts               | 221 ++++--------------
 1 file changed, 51 insertions(+), 170 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 2aa65f2f7f84..ad67ae26279a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -31,20 +32,11 @@ import { HomeAssistant } from "../../../../types";
 import { EntitiesCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceRowConfig } from "../../entity-rows/types";
-import {
-  headerFooterConfigStructs,
-  LovelaceHeaderFooterConfig,
-} from "../../header-footer/types";
-import type {
-  LovelaceCardEditor,
-  LovelaceHeaderFooterEditor,
-} from "../../types";
-import { getHeaderFooterEditor } from "../get-header-footer-editor";
-import "../hui-advanced-element-editor";
+import { headerFooterConfigStructs } from "../../header-footer/types";
+import { LovelaceCardEditor } from "../../types";
 import "../hui-detail-editor-base";
 import { HuiElementEditor } from "../hui-element-editor";
 import "../hui-entities-card-row-editor";
-import "../hui-header-footer-dropdown";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -94,21 +86,10 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
 
-  @internalProperty() private _footerElement?: LovelaceHeaderFooterEditor;
-
-  @internalProperty() private _headerElement?: LovelaceHeaderFooterEditor;
-
   public setConfig(config: EntitiesCardConfig): void {
     assert(config, cardConfigStruct);
     this._config = config;
     this._configEntities = processEditorEntities(config.entities);
-
-    if (this._config.header?.type) {
-      this._updateHeaderFooterElement("header", this._config.header);
-    }
-    if (this._config.footer?.type) {
-      this._updateHeaderFooterElement("footer", this._config.footer);
-    }
   }
 
   get _title(): string {
@@ -150,106 +131,64 @@ export class HuiEntitiesCardEditor extends LitElement
     }
 
     return html`
-      ${configElementStyle}
-      <hui-advanced-element-editor .hass=${this.hass}>
-        <div slot="editor">
-          <div class="card-config">
-            <paper-input
-              .label="${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.title"
-              )} (${this.hass.localize(
-                "ui.panel.lovelace.editor.card.config.optional"
-              )})"
-              .value=${this._title}
-              .configValue=${"title"}
-              @value-changed=${this._valueChanged}
-            ></paper-input>
-            <hui-theme-select-editor
-              .hass=${this.hass}
-              .value=${this._theme}
-              .configValue=${"theme"}
-              @value-changed=${this._valueChanged}
-            ></hui-theme-select-editor>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-              )}
-              .dir=${computeRTLDirection(this.hass)}
-            >
-              <ha-switch
-                .checked=${this._config!.show_header_toggle !== false}
-                .configValue=${"show_header_toggle"}
-                @change=${this._valueChanged}
-              ></ha-switch>
-            </ha-formfield>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.state_color"
-              )}
-              .dir=${computeRTLDirection(this.hass)}
-            >
-              <ha-switch
-                .checked=${this._config!.state_color}
-                .configValue=${"state_color"}
-                @change=${this._valueChanged}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <hui-entity-editor
-            .hass=${this.hass}
-            .entities=${this._configEntities}
-            @entities-changed=${this._valueChanged}
-          ></hui-entity-editor>
-        </div>
-        <div slot="advanced">
-          <h3 class="header-footer-heading">
-            ${this.hass.localize(
-              `ui.panel.lovelace.editor.header-footer.header`
+      <div class="card-config">
+        <paper-input
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.title"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .value=${this._title}
+          .configValue=${"title"}
+          @value-changed=${this._valueChanged}
+        ></paper-input>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value=${this._theme}
+          .configValue=${"theme"}
+          @value-changed=${this._valueChanged}
+        ></hui-theme-select-editor>
+        <div class="side-by-side">
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
             )}
-          </h3>
-          <hui-header-footer-dropdown
-            .hass=${this.hass}
-            .value=${this._config.header?.type}
-            .configValue=${"header"}
-            @change=${this._headerFooterChanged}
-          ></hui-header-footer-dropdown>
-          ${this._headerElement
-            ? html`
-                <div class="header-footer">
-                  ${this._headerElement}
-                </div>
-              `
-            : ""}
-          <h3 class="header-footer-heading">
-            ${this.hass.localize(
-              `ui.panel.lovelace.editor.header-footer.footer`
+            .dir=${computeRTLDirection(this.hass)}
+          >
+            <ha-switch
+              .checked=${this._config!.show_header_toggle !== false}
+              .configValue=${"show_header_toggle"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.state_color"
             )}
-          </h3>
-          <hui-header-footer-dropdown
-            .hass=${this.hass}
-            .value=${this._config.footer?.type}
-            .configValue=${"footer"}
-            @change=${this._headerFooterChanged}
-          ></hui-header-footer-dropdown>
-          ${this._footerElement
-            ? html`
-                <div class="header-footer">
-                  ${this._footerElement}
-                </div>
-              `
-            : ""}
+            .dir=${computeRTLDirection(this.hass)}
+          >
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
         </div>
-      </hui-advanced-element-editor>
+      </div>
+      <hui-entities-card-row-editor
+        .hass=${this.hass}
+        .entities=${this._configEntities}
+        @entities-changed=${this._valueChanged}
+        @edit-row=${this._editRow}
+      ></hui-entities-card-row-editor>
     `;
   }
 
-  private _valueChanged(ev: HASSDomEvent<EntitiesEditorEvent>): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
 
-    ev.stopPropagation();
-
     const target = ev.target! as EditorTarget;
 
     if (
@@ -263,11 +202,6 @@ export class HuiEntitiesCardEditor extends LitElement
       this._config = { ...this._config, entities: ev.detail.entities };
 
       this._configEntities = processEditorEntities(this._config.entities);
-    } else if (ev.detail && target.configValue) {
-      this._config = {
-        ...this._config,
-        [target.configValue]: ev.detail.config,
-      };
     } else if (target.configValue) {
       if (target.value === "") {
         this._config = { ...this._config };
@@ -284,59 +218,6 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _headerFooterChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    const target = ev.currentTarget as any;
-
-    if (!target.value) {
-      this[`_${target.configValue}Element`] = undefined;
-      this._config = { ...this._config };
-      delete this._config[target.configValue!];
-
-      fireEvent(this, "config-changed", { config: this._config });
-      return;
-    }
-
-    this._updateHeaderFooterElement(target.configValue!, {
-      type: target.value,
-    });
-  }
-
-  private async _updateHeaderFooterElement(
-    type: "header" | "footer",
-    config: LovelaceHeaderFooterConfig | { type: string }
-  ): Promise<void> {
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    const headerFooterEditor = await getHeaderFooterEditor(
-      this.hass,
-      config,
-      this._configEntities?.map((confEntity) => confEntity.entity) || []
-    );
-
-    this[`_${type}Element`] = headerFooterEditor?.configElement;
-
-    if (!this[`_${type}Element`]) {
-      return;
-    }
-
-    this._config = {
-      ...this._config,
-      [type]: { ...headerFooterEditor!.config },
-    };
-
-    this[`_${type}Element`].hass = this.hass;
-    this[`_${type}Element`].configValue = type;
-    this[`_${type}Element`].setConfig(headerFooterEditor!.config);
-    this[`_${type}Element`].addEventListener("config-changed", (ev) =>
-      this._valueChanged(ev as HASSDomEvent<EntitiesEditorEvent>)
-    );
-  }
   private _editRow(ev: HASSDomEvent<EditRowEvent>): void {
     this._editRowIndex = ev.detail.index;
     this._editRowConfig = this._configEntities![this._editRowIndex];

From 5ca2a06be2c476f6fb3cb962a57b29da4cb193dd Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 13 Oct 2020 17:36:47 -0500
Subject: [PATCH 37/63] Some updates

---
 .../config-elements/config-elements-style.ts  |   7 +-
 .../hui-entities-card-editor.ts               | 237 ++++++++++++------
 .../lovelace/editor/hui-element-editor.ts     |   5 +-
 .../editor/hui-entities-card-row-editor.ts    |   3 +-
 4 files changed, 171 insertions(+), 81 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index 169985e3e3c9..e7b579d9b436 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -15,6 +15,11 @@ export const configElementStyle = css`
     margin: 0 8px;
   }
   .header-footer-heading {
-    margin-bottom: 0;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 12px;
   }
 `;
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index ad67ae26279a..0762169862d3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -1,4 +1,6 @@
+import { mdiClose, mdiPencil } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -28,14 +30,15 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
-import { HomeAssistant } from "../../../../types";
-import { EntitiesCardConfig } from "../../cards/types";
+import type { HomeAssistant } from "../../../../types";
+import type { EntitiesCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
-import { LovelaceRowConfig } from "../../entity-rows/types";
+import type { LovelaceRowConfig } from "../../entity-rows/types";
 import { headerFooterConfigStructs } from "../../header-footer/types";
-import { LovelaceCardEditor } from "../../types";
+import type { LovelaceCardEditor } from "../../types";
+import "../hui-advanced-element-editor";
 import "../hui-detail-editor-base";
-import { HuiElementEditor } from "../hui-element-editor";
+import type { HuiElementEditor } from "../hui-element-editor";
 import "../hui-entities-card-row-editor";
 import { processEditorEntities } from "../process-editor-entities";
 import {
@@ -46,13 +49,14 @@ import {
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-interface EditRowEvent {
-  index: number;
+interface EditDetailElementEvent {
+  index?: number;
+  elementType: string;
 }
 
 declare global {
   interface HASSDomEvents {
-    "edit-row": EditRowEvent;
+    "edit-detail-element": EditDetailElementEvent;
   }
 }
 
@@ -76,13 +80,15 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _configEntities?: LovelaceRowConfig[];
 
-  @internalProperty() private _editRowConfig?: LovelaceRowConfig;
+  @internalProperty() private _detailElementConfig?: LovelaceRowConfig;
 
-  @internalProperty() private _editRowIndex?: number;
+  @internalProperty() private _detailElementIndex?: number;
 
-  @internalProperty() private _editRowGuiModeAvailable? = true;
+  @internalProperty() private _detailElementGuiModeAvailable = true;
 
-  @internalProperty() private _editRowGuiMode? = true;
+  @internalProperty() private _detailElementGuiMode = true;
+
+  @internalProperty() private _detailElementType?;
 
   @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
 
@@ -105,12 +111,12 @@ export class HuiEntitiesCardEditor extends LitElement
       return html``;
     }
 
-    if (this._editRowConfig) {
+    if (this._detailElementConfig) {
       return html`
         <hui-detail-editor-base
           .hass=${this.hass}
-          .guiModeAvailable=${this._editRowGuiModeAvailable}
-          .guiMode=${this._editRowGuiMode}
+          .guiModeAvailable=${this._detailElementGuiModeAvailable}
+          .guiMode=${this._detailElementGuiMode}
           @toggle-gui-mode=${this._toggleMode}
           @go-back=${this._goBack}
         >
@@ -121,7 +127,7 @@ export class HuiEntitiesCardEditor extends LitElement
           >
           <hui-element-editor
             .hass=${this.hass}
-            .value=${this._editRowConfig}
+            .value=${this._detailElementConfig}
             elementType="row"
             @config-changed=${this._handleEntityRowConfigChanged}
             @GUImode-changed=${this._handleGUIModeChanged}
@@ -131,56 +137,119 @@ export class HuiEntitiesCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.title"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._title}
-          .configValue=${"title"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-        <div class="side-by-side">
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-switch
-              .checked=${this._config!.show_header_toggle !== false}
-              .configValue=${"show_header_toggle"}
-              @change=${this._valueChanged}
-            ></ha-switch>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.state_color"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-switch
-              .checked=${this._config!.state_color}
-              .configValue=${"state_color"}
-              @change=${this._valueChanged}
-            ></ha-switch>
-          </ha-formfield>
+      <hui-advanced-element-editor .hass=${this.hass}>
+        <div slot="editor">
+          <div class="card-config">
+            <paper-input
+              .label="${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.title"
+              )} (${this.hass.localize(
+                "ui.panel.lovelace.editor.card.config.optional"
+              )})"
+              .value=${this._title}
+              .configValue=${"title"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+            <hui-theme-select-editor
+              .hass=${this.hass}
+              .value=${this._theme}
+              .configValue=${"theme"}
+              @value-changed=${this._valueChanged}
+            ></hui-theme-select-editor>
+            <div class="side-by-side">
+              <ha-formfield
+                .label=${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+                )}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .checked=${this._config!.show_header_toggle !== false}
+                  .configValue=${"show_header_toggle"}
+                  @change=${this._valueChanged}
+                ></ha-switch>
+              </ha-formfield>
+              <ha-formfield
+                .label=${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.generic.state_color"
+                )}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .checked=${this._config!.state_color}
+                  .configValue=${"state_color"}
+                  @change=${this._valueChanged}
+                ></ha-switch>
+              </ha-formfield>
+            </div>
+          </div>
+          <hui-entities-card-row-editor
+            .hass=${this.hass}
+            .entities=${this._configEntities}
+            @entities-changed=${this._valueChanged}
+            @edit-row=${this._editDetailElement}
+          ></hui-entities-card-row-editor>
         </div>
-      </div>
-      <hui-entities-card-row-editor
-        .hass=${this.hass}
-        .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
-        @edit-row=${this._editRow}
-      ></hui-entities-card-row-editor>
+        <div slot="advanced">
+          <div class="header-footer-heading">
+            <span>
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.header-footer.header`
+              )}:
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.header-footer.${this._config.header?.type}.name`
+              ) || "None"}
+            </span>
+            <div>
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.components.entity.entity-picker.clear"
+                )}
+                class="remove-icon"
+              >
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.components.entity.entity-picker.edit"
+                )}
+                class="edit-icon"
+                .elementType=${"headerfooter"}
+              >
+                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+              </mwc-icon-button>
+            </div>
+          </div>
+          <div class="header-footer-heading">
+            <span>
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.header-footer.footer`
+              )}:
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.header-footer.${this._config.footer?.type}.name`
+              ) || "None"}
+            </span>
+            <div>
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.components.entity.entity-picker.clear"
+                )}
+                class="remove-icon"
+              >
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.components.entity.entity-picker.edit"
+                )}
+                class="edit-icon"
+              >
+                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+              </mwc-icon-button>
+            </div>
+          </div>
+        </div>
+      </hui-advanced-element-editor>
     `;
   }
 
@@ -218,16 +287,20 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _editRow(ev: HASSDomEvent<EditRowEvent>): void {
-    this._editRowIndex = ev.detail.index;
-    this._editRowConfig = this._configEntities![this._editRowIndex];
+  private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
+    if (ev.detail.elementType === "row") {
+      this._detailElementIndex = ev.detail.index!;
+      this._detailElementConfig = this._configEntities![
+        this._detailElementIndex
+      ];
+    }
   }
 
   private _goBack(): void {
-    this._editRowIndex = undefined;
-    this._editRowConfig = undefined;
-    this._editRowGuiModeAvailable = true;
-    this._editRowGuiMode = true;
+    this._detailElementIndex = undefined;
+    this._detailElementConfig = undefined;
+    this._detailElementGuiModeAvailable = true;
+    this._detailElementGuiMode = true;
   }
 
   private _toggleMode(): void {
@@ -237,18 +310,18 @@ export class HuiEntitiesCardEditor extends LitElement
   private _handleEntityRowConfigChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     const value = ev.detail.config as LovelaceRowConfig;
-    this._editRowGuiModeAvailable = ev.detail.guiModeAvailable;
+    this._detailElementGuiModeAvailable = ev.detail.guiModeAvailable;
 
     const newConfigEntities = this._configEntities!.concat();
 
     if (!value) {
-      newConfigEntities.splice(this._editRowIndex!, 1);
+      newConfigEntities.splice(this._detailElementIndex!, 1);
       this._goBack();
     } else {
-      newConfigEntities[this._editRowIndex!] = value;
+      newConfigEntities[this._detailElementIndex!] = value;
     }
 
-    this._editRowConfig = value;
+    this._detailElementConfig = value;
 
     this._config = { ...this._config!, entities: newConfigEntities };
 
@@ -259,8 +332,8 @@ export class HuiEntitiesCardEditor extends LitElement
 
   private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
     ev.stopPropagation();
-    this._editRowGuiMode = ev.detail.guiMode;
-    this._editRowGuiModeAvailable = ev.detail.guiModeAvailable;
+    this._detailElementGuiMode = ev.detail.guiMode;
+    this._detailElementGuiModeAvailable = ev.detail.guiModeAvailable;
   }
 
   static get styles(): CSSResultArray {
@@ -273,6 +346,14 @@ export class HuiEntitiesCardEditor extends LitElement
           align-items: center;
           font-size: 18px;
         }
+        div[slot="advanced"] {
+          padding-top: 8px;
+        }
+        .remove-icon,
+        .edit-icon {
+          --mdc-icon-button-size: 36px;
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index c8f607809658..e90bce3964bd 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -24,6 +24,7 @@ import type {
 import type { HomeAssistant } from "../../../types";
 import { handleStructError } from "../common/structs/handle-errors";
 import { getCardElementClass } from "../create-element/create-card-element";
+import { getHeaderFooterElementClass } from "../create-element/create-header-footer-element";
 import { getRowElementClass } from "../create-element/create-row-element";
 import type { LovelaceRowConfig } from "../entity-rows/types";
 import type {
@@ -66,7 +67,7 @@ export class HuiElementEditor extends LitElement {
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @property() public elementType: "row" | "card" = "card";
+  @property() public elementType: "row" | "card" | "headerfooter" = "card";
 
   @internalProperty() private _yaml?: string;
 
@@ -293,6 +294,8 @@ export class HuiElementEditor extends LitElement {
           elClass = await getCardElementClass(type);
         } else if (this.elementType === "row" && type !== GENERIC_ROW_TYPE) {
           elClass = await getRowElementClass(type);
+        } else if (this.elementType === "headerfooter") {
+          elClass = await getHeaderFooterElementClass(type);
         }
 
         this._loading = true;
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 0e6a42bdb840..67028013dda1 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -232,8 +232,9 @@ export class HuiEntitiesCardRowEditor extends LitElement {
   }
 
   private _editRow(ev: CustomEvent): void {
-    fireEvent(this, "edit-row", {
+    fireEvent(this, "edit-detail-element", {
       index: (ev.currentTarget as any).index,
+      elementType: "row",
     });
   }
 

From ecdc1d84167ead50e1cf0c6a9785b469ecb2aaff Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Wed, 14 Oct 2020 19:46:56 -0500
Subject: [PATCH 38/63] Getting better all the time

---
 .../card-editor/hui-dialog-edit-card.ts       |   1 +
 .../config-elements/config-elements-style.ts  |   8 --
 .../hui-conditional-card-editor.ts            |   1 +
 .../hui-entities-card-editor.ts               | 108 +++++-----------
 .../hui-graph-footer-editor.ts                |   6 +-
 .../config-elements/hui-stack-card-editor.ts  |   1 +
 .../lovelace/editor/hui-element-editor.ts     |   9 +-
 .../editor/hui-entities-card-row-editor.ts    |   4 +-
 .../editor/hui-header-footer-editor.ts        | 118 ++++++++++++++++++
 src/translations/en.json                      |   7 ++
 10 files changed, 176 insertions(+), 87 deletions(-)
 create mode 100644 src/panels/lovelace/editor/hui-header-footer-editor.ts

diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index 24a827197a05..00ead62a9e12 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -188,6 +188,7 @@ export class HuiDialogEditCard extends LitElement
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
+              elementType="card"
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index e7b579d9b436..71b631265fd5 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -14,12 +14,4 @@ export const configElementStyle = css`
   .suffix {
     margin: 0 8px;
   }
-  .header-footer-heading {
-    font-size: 16px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 12px;
-  }
 `;
diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
index 3e41c9834d39..fe946b444436 100644
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@@ -112,6 +112,7 @@ export class HuiConditionalCardEditor extends LitElement
                       .hass=${this.hass}
                       .value=${this._config.card}
                       .lovelace=${this.lovelace}
+                      elementType="card"
                       @config-changed=${this._handleCardChanged}
                       @GUImode-changed=${this._handleGUIModeChanged}
                     ></hui-element-editor>
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 0762169862d3..72c72c8fa4e6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -1,4 +1,3 @@
-import { mdiClose, mdiPencil } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -34,12 +33,16 @@ import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceRowConfig } from "../../entity-rows/types";
-import { headerFooterConfigStructs } from "../../header-footer/types";
+import {
+  headerFooterConfigStructs,
+  LovelaceHeaderFooterConfig,
+} from "../../header-footer/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-advanced-element-editor";
 import "../hui-detail-editor-base";
 import type { HuiElementEditor } from "../hui-element-editor";
 import "../hui-entities-card-row-editor";
+import "../hui-header-footer-editor";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -52,6 +55,7 @@ import { configElementStyle } from "./config-elements-style";
 interface EditDetailElementEvent {
   index?: number;
   elementType: string;
+  config?: LovelaceHeaderFooterConfig | LovelaceRowConfig;
 }
 
 declare global {
@@ -80,7 +84,9 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _configEntities?: LovelaceRowConfig[];
 
-  @internalProperty() private _detailElementConfig?: LovelaceRowConfig;
+  @internalProperty() private _detailElementConfig?:
+    | LovelaceRowConfig
+    | LovelaceHeaderFooterConfig;
 
   @internalProperty() private _detailElementIndex?: number;
 
@@ -88,7 +94,7 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _detailElementGuiMode = true;
 
-  @internalProperty() private _detailElementType?;
+  @internalProperty() private _detailElementType?: string;
 
   @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
 
@@ -122,13 +128,13 @@ export class HuiEntitiesCardEditor extends LitElement
         >
           <span slot="title"
             >${this.hass.localize(
-              "ui.panel.lovelace.editor.card.entities.entity_row_editor"
+              `ui.panel.lovelace.editor.detail-editor.${this._detailElementType}`
             )}</span
           >
           <hui-element-editor
             .hass=${this.hass}
             .value=${this._detailElementConfig}
-            elementType="row"
+            .elementType=${this._detailElementType!}
             @config-changed=${this._handleEntityRowConfigChanged}
             @GUImode-changed=${this._handleGUIModeChanged}
           ></hui-element-editor>
@@ -187,67 +193,22 @@ export class HuiEntitiesCardEditor extends LitElement
             .hass=${this.hass}
             .entities=${this._configEntities}
             @entities-changed=${this._valueChanged}
-            @edit-row=${this._editDetailElement}
+            @edit-detail-element=${this._editDetailElement}
           ></hui-entities-card-row-editor>
         </div>
         <div slot="advanced">
-          <div class="header-footer-heading">
-            <span>
-              ${this.hass.localize(
-                `ui.panel.lovelace.editor.header-footer.header`
-              )}:
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.header-footer.${this._config.header?.type}.name`
-              ) || "None"}
-            </span>
-            <div>
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.components.entity.entity-picker.clear"
-                )}
-                class="remove-icon"
-              >
-                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-              </mwc-icon-button>
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.components.entity.entity-picker.edit"
-                )}
-                class="edit-icon"
-                .elementType=${"headerfooter"}
-              >
-                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-              </mwc-icon-button>
-            </div>
-          </div>
-          <div class="header-footer-heading">
-            <span>
-              ${this.hass.localize(
-                `ui.panel.lovelace.editor.header-footer.footer`
-              )}:
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.header-footer.${this._config.footer?.type}.name`
-              ) || "None"}
-            </span>
-            <div>
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.components.entity.entity-picker.clear"
-                )}
-                class="remove-icon"
-              >
-                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-              </mwc-icon-button>
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.components.entity.entity-picker.edit"
-                )}
-                class="edit-icon"
-              >
-                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-              </mwc-icon-button>
-            </div>
-          </div>
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"header"}
+            .config=${this._config.header}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"footer"}
+            .config=${this._config.footer}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
         </div>
       </hui-advanced-element-editor>
     `;
@@ -288,15 +249,18 @@ export class HuiEntitiesCardEditor extends LitElement
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
-    if (ev.detail.elementType === "row") {
-      this._detailElementIndex = ev.detail.index!;
-      this._detailElementConfig = this._configEntities![
-        this._detailElementIndex
-      ];
+    const { elementType, config, index } = ev.detail;
+
+    this._detailElementType = elementType;
+    this._detailElementConfig = config;
+
+    if (elementType === "row") {
+      this._detailElementIndex = index!;
     }
   }
 
   private _goBack(): void {
+    this._detailElementType = undefined;
     this._detailElementIndex = undefined;
     this._detailElementConfig = undefined;
     this._detailElementGuiModeAvailable = true;
@@ -324,7 +288,6 @@ export class HuiEntitiesCardEditor extends LitElement
     this._detailElementConfig = value;
 
     this._config = { ...this._config!, entities: newConfigEntities };
-
     this._configEntities = processEditorEntities(this._config!.entities);
 
     fireEvent(this, "config-changed", { config: this._config! });
@@ -349,11 +312,6 @@ export class HuiEntitiesCardEditor extends LitElement
         div[slot="advanced"] {
           padding-top: 8px;
         }
-        .remove-icon,
-        .edit-icon {
-          --mdc-icon-button-size: 36px;
-          color: var(--secondary-text-color);
-        }
       `,
     ];
   }
diff --git a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
index ded8392238d7..3e9e3005d2a4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
@@ -1,6 +1,7 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import {
+  CSSResult,
   customElement,
   html,
   internalProperty,
@@ -54,7 +55,6 @@ export class HuiGraphFooterEditor extends LitElement
     }
 
     return html`
-      ${configElementStyle}
       <div class="card-config">
         <ha-entity-picker
           allow-custom-entity
@@ -143,6 +143,10 @@ export class HuiGraphFooterEditor extends LitElement
 
     fireEvent(this, "config-changed", { config: this._config });
   }
+
+  static get styles(): CSSResult {
+    return configElementStyle;
+  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index d2640e7cae30..2220f74dd9d2 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -144,6 +144,7 @@ export class HuiStackCardEditor extends LitElement
                   .hass=${this.hass}
                   .value=${this._config.cards[selected]}
                   .lovelace=${this.lovelace}
+                  elementType="card"
                   @config-changed=${this._handleConfigChanged}
                   @GUImode-changed=${this._handleGUIModeChanged}
                 ></hui-element-editor>
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index e90bce3964bd..41680cf4a6e5 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -67,7 +67,7 @@ export class HuiElementEditor extends LitElement {
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @property() public elementType: "row" | "card" | "headerfooter" = "card";
+  @property() public elementType?: "row" | "card" | "header" | "footer";
 
   @internalProperty() private _yaml?: string;
 
@@ -231,6 +231,7 @@ export class HuiElementEditor extends LitElement {
 
   protected updated(changedProperties) {
     super.updated(changedProperties);
+
     if (this._configElement && changedProperties.has("hass")) {
       this._configElement.hass = this.hass;
     }
@@ -258,6 +259,7 @@ export class HuiElementEditor extends LitElement {
   }
 
   private async _updateConfigElement(): Promise<void> {
+    await this.updateComplete;
     if (!this.value) {
       return;
     }
@@ -294,7 +296,10 @@ export class HuiElementEditor extends LitElement {
           elClass = await getCardElementClass(type);
         } else if (this.elementType === "row" && type !== GENERIC_ROW_TYPE) {
           elClass = await getRowElementClass(type);
-        } else if (this.elementType === "headerfooter") {
+        } else if (
+          this.elementType === "header" ||
+          this.elementType === "footer"
+        ) {
           elClass = await getHeaderFooterElementClass(type);
         }
 
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 67028013dda1..766aa3a5cc35 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -232,9 +232,11 @@ export class HuiEntitiesCardRowEditor extends LitElement {
   }
 
   private _editRow(ev: CustomEvent): void {
+    const index = (ev.currentTarget as any).index;
     fireEvent(this, "edit-detail-element", {
-      index: (ev.currentTarget as any).index,
+      index,
       elementType: "row",
+      config: this.entities![index],
     });
   }
 
diff --git a/src/panels/lovelace/editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/hui-header-footer-editor.ts
new file mode 100644
index 000000000000..cc05e974390b
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-header-footer-editor.ts
@@ -0,0 +1,118 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import {
+  mdiClose,
+  mdiPageLayoutFooter,
+  mdiPageLayoutHeader,
+  mdiPencil,
+} from "@mdi/js";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-paper-dropdown-menu";
+import "../../../components/ha-svg-icon";
+import type { HomeAssistant } from "../../../types";
+import { LovelaceHeaderFooterConfig } from "../header-footer/types";
+
+@customElement("hui-header-footer-editor")
+export class HuiHeaderFooterEditor extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public config?: LovelaceHeaderFooterConfig;
+
+  @property() public configValue!: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div>
+        <ha-svg-icon
+          class="header-footer-icon"
+          .path=${this.configValue === "header"
+            ? mdiPageLayoutHeader
+            : mdiPageLayoutFooter}
+        ></ha-svg-icon>
+        <span>
+          ${this.hass.localize(
+            `ui.panel.lovelace.editor.header-footer.${this.configValue}`
+          )}:
+          ${this.hass!.localize(
+            `ui.panel.lovelace.editor.header-footer.${this.config?.type}.name`
+          ) || "None"}
+        </span>
+      </div>
+      <div>
+        <mwc-icon-button
+          aria-label=${this.hass!.localize(
+            "ui.components.entity.entity-picker.clear"
+          )}
+          class="remove-icon"
+          @click=${this._delete}
+        >
+          <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+        </mwc-icon-button>
+        <mwc-icon-button
+          aria-label=${this.hass!.localize(
+            "ui.components.entity.entity-picker.edit"
+          )}
+          class="edit-icon"
+          @click=${this._edit}
+        >
+          <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+        </mwc-icon-button>
+      </div>
+    `;
+  }
+
+  private _edit(): void {
+    fireEvent(this, "edit-detail-element", {
+      config: this.config,
+      elementType: this.configValue,
+    });
+  }
+
+  private _delete(): void {
+    fireEvent(this, "value-changed", { value: "" });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        font-size: 16px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 12px;
+      }
+
+      :host > div {
+        display: flex;
+        align-items: center;
+      }
+
+      mwc-icon-button,
+      .header-footer-icon {
+        --mdc-icon-button-size: 36px;
+        color: var(--secondary-text-color);
+      }
+
+      .header-footer-icon {
+        padding-right: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-header-footer-editor": HuiHeaderFooterEditor;
+  }
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index af9c1d81fba1..c8ed81856ef8 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2587,6 +2587,13 @@
             "graph": {
               "name": "Graph"
             }
+          },
+          "detail-editor": {
+            "types": {
+              "header": "Header Editor",
+              "footer": "Footer Editor",
+              "row": "Entity Row Editor"
+            }
           }
         },
         "warning": {

From cb84dbbf2de110ca08353714bf47db48d7d4559a Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 08:56:43 -0500
Subject: [PATCH 39/63] changes

---
 .../card-editor/hui-card-element-editor.ts    |  79 ++++++++++++
 .../hui-entities-card-editor.ts               | 116 +++++++++--------
 .../hui-header-footer-dropdown.ts             |  21 ++-
 .../hui-header-footer-editor.ts               |  10 +-
 .../editor/hui-advanced-element-editor.ts     |  55 --------
 .../lovelace/editor/hui-element-editor.ts     | 121 ++++--------------
 ...itor-base.ts => hui-sub-element-editor.ts} |  23 +++-
 src/panels/lovelace/editor/types.ts           |  11 +-
 src/translations/en.json                      |   2 +-
 9 files changed, 205 insertions(+), 233 deletions(-)
 create mode 100644 src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
 rename src/panels/lovelace/editor/{ => header-footer-editor}/hui-header-footer-dropdown.ts (89%)
 rename src/panels/lovelace/editor/{ => header-footer-editor}/hui-header-footer-editor.ts (90%)
 delete mode 100644 src/panels/lovelace/editor/hui-advanced-element-editor.ts
 rename src/panels/lovelace/editor/{hui-detail-editor-base.ts => hui-sub-element-editor.ts} (71%)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
new file mode 100644
index 000000000000..5f40587a499e
--- /dev/null
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -0,0 +1,79 @@
+import { customElement } from "lit-element";
+import { handleStructError } from "../../common/structs/handle-errors";
+import { getCardElementClass } from "../../create-element/create-card-element";
+import { LovelaceCardEditor } from "../../types";
+import { GUISupportError } from "../gui-support-error";
+import { HuiElementEditor, UIConfigChangedEvent } from "../hui-element-editor";
+
+@customElement("hui-card-element-editor")
+export class HuiCardElementEditor extends HuiElementEditor {
+  public async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
+    let configElement: LovelaceCardEditor | undefined;
+
+    const cardType = this.value!.type;
+
+    try {
+      this._error = undefined;
+      this._warnings = undefined;
+
+      if (this._configElType !== cardType) {
+        // If the type has changed, we need to load a new GUI editor
+        if (!cardType) {
+          throw new Error(`No card type defined`);
+        }
+
+        const elClass = await getCardElementClass(cardType);
+
+        this._loading = true;
+        // Check if a GUI editor exists
+        if (elClass && elClass.getConfigElement) {
+          configElement = await elClass.getConfigElement();
+        } else {
+          configElement = undefined;
+          throw new GUISupportError(
+            `No visual editor available for: ${cardType}`
+          );
+        }
+
+        this._configElType = cardType;
+
+        // Perform final setup
+        configElement.hass = this.hass;
+        if ("lovelace" in configElement) {
+          configElement.lovelace = this.lovelace;
+        }
+        configElement.addEventListener("config-changed", (ev) =>
+          this._handleUIConfigChanged(ev as UIConfigChangedEvent)
+        );
+      }
+
+      // Setup GUI editor and check that it can handle the current config
+      try {
+        // @ts-ignore
+        configElement!.setConfig(this.value);
+      } catch (err) {
+        throw new GUISupportError(
+          "Config is not supported",
+          handleStructError(err)
+        );
+      }
+    } catch (err) {
+      if (err instanceof GUISupportError) {
+        this._warnings = err.warnings ?? [err.message];
+      } else {
+        this._error = err;
+      }
+      this.GUImode = false;
+    } finally {
+      this._loading = false;
+    }
+
+    return configElement;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-element-editor": HuiCardElementEditor;
+  }
+}
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 72c72c8fa4e6..80c14f675969 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -38,17 +38,17 @@ import {
   LovelaceHeaderFooterConfig,
 } from "../../header-footer/types";
 import type { LovelaceCardEditor } from "../../types";
-import "../hui-advanced-element-editor";
-import "../hui-detail-editor-base";
+import "../header-footer-editor/hui-header-footer-editor";
 import type { HuiElementEditor } from "../hui-element-editor";
 import "../hui-entities-card-row-editor";
-import "../hui-header-footer-editor";
+import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
   entitiesConfigStruct,
   EntitiesEditorEvent,
   GUIModeChangedEvent,
+  SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -84,6 +84,8 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _configEntities?: LovelaceRowConfig[];
 
+  @internalProperty() private _subElementEditorConfig?: SubElementEditorConfig;
+
   @internalProperty() private _detailElementConfig?:
     | LovelaceRowConfig
     | LovelaceHeaderFooterConfig;
@@ -119,7 +121,7 @@ export class HuiEntitiesCardEditor extends LitElement
 
     if (this._detailElementConfig) {
       return html`
-        <hui-detail-editor-base
+        <hui-sub-element-editor
           .hass=${this.hass}
           .guiModeAvailable=${this._detailElementGuiModeAvailable}
           .guiMode=${this._detailElementGuiMode}
@@ -138,65 +140,55 @@ export class HuiEntitiesCardEditor extends LitElement
             @config-changed=${this._handleEntityRowConfigChanged}
             @GUImode-changed=${this._handleGUIModeChanged}
           ></hui-element-editor>
-        </hui-detail-editor-base>
+        </hui-sub-element-editor>
       `;
     }
 
     return html`
-      <hui-advanced-element-editor .hass=${this.hass}>
-        <div slot="editor">
-          <div class="card-config">
-            <paper-input
-              .label="${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.title"
-              )} (${this.hass.localize(
-                "ui.panel.lovelace.editor.card.config.optional"
-              )})"
-              .value=${this._title}
-              .configValue=${"title"}
-              @value-changed=${this._valueChanged}
-            ></paper-input>
-            <hui-theme-select-editor
-              .hass=${this.hass}
-              .value=${this._theme}
-              .configValue=${"theme"}
-              @value-changed=${this._valueChanged}
-            ></hui-theme-select-editor>
-            <div class="side-by-side">
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-                )}
-                .dir=${computeRTLDirection(this.hass)}
-              >
-                <ha-switch
-                  .checked=${this._config!.show_header_toggle !== false}
-                  .configValue=${"show_header_toggle"}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.generic.state_color"
-                )}
-                .dir=${computeRTLDirection(this.hass)}
-              >
-                <ha-switch
-                  .checked=${this._config!.state_color}
-                  .configValue=${"state_color"}
-                  @change=${this._valueChanged}
-                ></ha-switch>
-              </ha-formfield>
-            </div>
-          </div>
-          <hui-entities-card-row-editor
-            .hass=${this.hass}
-            .entities=${this._configEntities}
-            @entities-changed=${this._valueChanged}
-            @edit-detail-element=${this._editDetailElement}
-          ></hui-entities-card-row-editor>
+      <div class="card-config">
+        <paper-input
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.title"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .value=${this._title}
+          .configValue=${"title"}
+          @value-changed=${this._valueChanged}
+        ></paper-input>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value=${this._theme}
+          .configValue=${"theme"}
+          @value-changed=${this._valueChanged}
+        ></hui-theme-select-editor>
+        <div class="side-by-side">
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+            )}
+            .dir=${computeRTLDirection(this.hass)}
+          >
+            <ha-switch
+              .checked=${this._config!.show_header_toggle !== false}
+              .configValue=${"show_header_toggle"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.state_color"
+            )}
+            .dir=${computeRTLDirection(this.hass)}
+          >
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
         </div>
-        <div slot="advanced">
+        <div class="side-by-side">
           <hui-header-footer-editor
             .hass=${this.hass}
             .configValue=${"header"}
@@ -210,7 +202,13 @@ export class HuiEntitiesCardEditor extends LitElement
             @edit-detail-element=${this._editDetailElement}
           ></hui-header-footer-editor>
         </div>
-      </hui-advanced-element-editor>
+      </div>
+      <hui-entities-card-row-editor
+        .hass=${this.hass}
+        .entities=${this._configEntities}
+        @entities-changed=${this._valueChanged}
+        @edit-detail-element=${this._editDetailElement}
+      ></hui-entities-card-row-editor>
     `;
   }
 
diff --git a/src/panels/lovelace/editor/hui-header-footer-dropdown.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
similarity index 89%
rename from src/panels/lovelace/editor/hui-header-footer-dropdown.ts
rename to src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
index bf9cf15da1b8..9eee8148d41d 100644
--- a/src/panels/lovelace/editor/hui-header-footer-dropdown.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
@@ -1,21 +1,18 @@
-import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  property,
   css,
   CSSResult,
   customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
 } from "lit-element";
-
-import { headerFooters } from "./lovelace-cards";
-import { fireEvent } from "../../../common/dom/fire_event";
-
-import type { HomeAssistant } from "../../../types";
-
-import "../../../components/ha-paper-dropdown-menu";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-paper-dropdown-menu";
+import type { HomeAssistant } from "../../../../types";
+import { headerFooters } from "../lovelace-cards";
 
 @customElement("hui-header-footer-dropdown")
 export class HuiHeaderFooterDropdown extends LitElement {
diff --git a/src/panels/lovelace/editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
similarity index 90%
rename from src/panels/lovelace/editor/hui-header-footer-editor.ts
rename to src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index cc05e974390b..116aeef90f7c 100644
--- a/src/panels/lovelace/editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -16,11 +16,11 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-svg-icon";
-import type { HomeAssistant } from "../../../types";
-import { LovelaceHeaderFooterConfig } from "../header-footer/types";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-paper-dropdown-menu";
+import "../../../../components/ha-svg-icon";
+import type { HomeAssistant } from "../../../../types";
+import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 
 @customElement("hui-header-footer-editor")
 export class HuiHeaderFooterEditor extends LitElement {
diff --git a/src/panels/lovelace/editor/hui-advanced-element-editor.ts b/src/panels/lovelace/editor/hui-advanced-element-editor.ts
deleted file mode 100644
index 1c83435cd979..000000000000
--- a/src/panels/lovelace/editor/hui-advanced-element-editor.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  customElement,
-  LitElement,
-  TemplateResult,
-  html,
-  internalProperty,
-} from "lit-element";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
-import { HomeAssistant } from "../../../types";
-
-@customElement("hui-advanced-element-editor")
-export class HuiAdvancedElementEditor extends LitElement {
-  public hass!: HomeAssistant;
-
-  @internalProperty() private _currTabIndex = 0;
-
-  protected render(): TemplateResult {
-    return html`
-      <mwc-tab-bar
-        .activeIndex=${this._currTabIndex}
-        @MDCTabBar:activated=${(ev: CustomEvent) => this._handleTabChanged(ev)}
-      >
-        <mwc-tab
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.edit_card.editor"
-          )}
-        ></mwc-tab>
-        <mwc-tab
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.edit_card.advanced"
-          )}
-        ></mwc-tab>
-      </mwc-tab-bar>
-      ${this._currTabIndex === 0
-        ? html`<slot name="editor"></slot>`
-        : html`<slot name="advanced"></slot>`}
-    `;
-  }
-
-  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = ev.detail.index;
-    if (newTab === this._currTabIndex) {
-      return;
-    }
-
-    this._currTabIndex = ev.detail.index;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-advanced-element-editor": HuiAdvancedElementEditor;
-  }
-}
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 41680cf4a6e5..c904b4d4c6f2 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -23,16 +23,8 @@ import type {
 } from "../../../data/lovelace";
 import type { HomeAssistant } from "../../../types";
 import { handleStructError } from "../common/structs/handle-errors";
-import { getCardElementClass } from "../create-element/create-card-element";
-import { getHeaderFooterElementClass } from "../create-element/create-header-footer-element";
-import { getRowElementClass } from "../create-element/create-row-element";
 import type { LovelaceRowConfig } from "../entity-rows/types";
-import type {
-  LovelaceCardConstructor,
-  LovelaceCardEditor,
-  LovelaceRowConstructor,
-  LovelaceRowEditor,
-} from "../types";
+import type { LovelaceCardEditor, LovelaceRowEditor } from "../types";
 import "./config-elements/hui-generic-entity-row-editor";
 import { GUISupportError } from "./gui-support-error";
 import { GUIModeChangedEvent } from "./types";
@@ -67,8 +59,6 @@ export class HuiElementEditor extends LitElement {
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @property() public elementType?: "row" | "card" | "header" | "footer";
-
   @internalProperty() private _yaml?: string;
 
   @internalProperty() private _config?: LovelaceCardConfig | LovelaceRowConfig;
@@ -77,17 +67,17 @@ export class HuiElementEditor extends LitElement {
     | LovelaceCardEditor
     | LovelaceRowEditor;
 
-  @internalProperty() private _configElType?: string;
+  @internalProperty() protected _configElType?: string;
 
   @internalProperty() private _GUImode = true;
 
   // Error: Configuration broken - do not save
-  @internalProperty() private _error?: string;
+  @internalProperty() protected _error?: string;
 
   // Warning: GUI editor can't handle configuration - ok to save
-  @internalProperty() private _warnings?: string[];
+  @internalProperty() protected _warnings?: string[];
 
-  @internalProperty() private _loading = false;
+  @internalProperty() protected _loading = false;
 
   @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
 
@@ -159,6 +149,10 @@ export class HuiElementEditor extends LitElement {
     });
   }
 
+  public async getConfigElement(): Promise<HTMLElement | undefined> {
+    return document.createElement("div");
+  }
+
   public toggleMode() {
     this.GUImode = !this.GUImode;
   }
@@ -244,7 +238,7 @@ export class HuiElementEditor extends LitElement {
     }
   }
 
-  private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
+  protected _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
     this.value = config;
@@ -264,90 +258,27 @@ export class HuiElementEditor extends LitElement {
       return;
     }
 
-    let type: string;
+    this._configElement = await this.getConfigElement();
+    this._configElType = type;
 
-    if (
-      this.elementType === "row" &&
-      !this.value.type &&
-      "entity" in this.value
-    ) {
-      type = GENERIC_ROW_TYPE;
-    } else {
-      type = this.value.type!;
+    // Perform final setup
+    this._configElement.hass = this.hass;
+    if ("lovelace" in this._configElement) {
+      this._configElement.lovelace = this.lovelace;
     }
+    this._configElement.addEventListener("config-changed", (ev) =>
+      this._handleUIConfigChanged(ev as UIConfigChangedEvent)
+    );
 
-    let configElement = this._configElement;
+    // Setup GUI editor and check that it can handle the current config
     try {
-      this._error = undefined;
-      this._warnings = undefined;
-
-      if (this._configElType !== type) {
-        // If the type has changed, we need to load a new GUI editor
-        if (!type) {
-          throw new Error(`No ${this.elementType} type defined`);
-        }
-
-        let elClass:
-          | LovelaceCardConstructor
-          | LovelaceRowConstructor
-          | undefined;
-
-        if (this.elementType === "card") {
-          elClass = await getCardElementClass(type);
-        } else if (this.elementType === "row" && type !== GENERIC_ROW_TYPE) {
-          elClass = await getRowElementClass(type);
-        } else if (
-          this.elementType === "header" ||
-          this.elementType === "footer"
-        ) {
-          elClass = await getHeaderFooterElementClass(type);
-        }
-
-        this._loading = true;
-        // Check if a GUI editor exists
-        if (elClass && elClass.getConfigElement) {
-          configElement = await elClass.getConfigElement();
-        } else if (this.elementType === "row" && type === GENERIC_ROW_TYPE) {
-          configElement = document.createElement(
-            "hui-generic-entity-row-editor"
-          );
-        } else {
-          configElement = undefined;
-          throw new GUISupportError(`No visual editor available for: ${type}`);
-        }
-
-        this._configElement = configElement;
-        this._configElType = type;
-
-        // Perform final setup
-        this._configElement.hass = this.hass;
-        if ("lovelace" in this._configElement) {
-          this._configElement.lovelace = this.lovelace;
-        }
-        this._configElement.addEventListener("config-changed", (ev) =>
-          this._handleUIConfigChanged(ev as UIConfigChangedEvent)
-        );
-      }
-
-      // Setup GUI editor and check that it can handle the current config
-      try {
-        // @ts-ignore
-        this._configElement!.setConfig(this.value);
-      } catch (err) {
-        throw new GUISupportError(
-          "Config is not supported",
-          handleStructError(err)
-        );
-      }
+      // @ts-ignore
+      this._configElement!.setConfig(this.value);
     } catch (err) {
-      if (err instanceof GUISupportError) {
-        this._warnings = err.warnings ?? [err.message];
-      } else {
-        this._error = err;
-      }
-      this.GUImode = false;
-    } finally {
-      this._loading = false;
+      throw new GUISupportError(
+        "Config is not supported",
+        handleStructError(err)
+      );
     }
   }
 
diff --git a/src/panels/lovelace/editor/hui-detail-editor-base.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
similarity index 71%
rename from src/panels/lovelace/editor/hui-detail-editor-base.ts
rename to src/panels/lovelace/editor/hui-sub-element-editor.ts
index 2dedee71f626..03783fac0ac0 100644
--- a/src/panels/lovelace/editor/hui-detail-editor-base.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -13,6 +13,7 @@ import {
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
+import { SubElementEditorConfig } from "./types";
 
 declare global {
   interface HASSDomEvents {
@@ -21,14 +22,16 @@ declare global {
   }
 }
 
-@customElement("hui-detail-editor-base")
-export class HuiDetailEditorBase extends LitElement {
+@customElement("hui-sub-element-editor")
+export class HuiSubElementEditor extends LitElement {
   public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public guiModeAvailable? = true;
 
   @property({ type: Boolean }) public guiMode? = true;
 
+  @property({ attribute: false }) public config!: SubElementEditorConfig;
+
   protected render(): TemplateResult {
     return html`
       <div class="header">
@@ -36,7 +39,11 @@ export class HuiDetailEditorBase extends LitElement {
           <mwc-icon-button @click=${this._goBack}>
             <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
           </mwc-icon-button>
-          <slot name="title"></slot>
+          <span slot="title"
+            >${this.hass.localize(
+              `ui.panel.lovelace.editor.detail-editor.${this.config?.type}`
+            )}</span
+          >
         </div>
         <mwc-button
           slot="secondaryAction"
@@ -51,7 +58,13 @@ export class HuiDetailEditorBase extends LitElement {
           )}
         </mwc-button>
       </div>
-      <slot></slot>
+      <hui-element-editor
+        .hass=${this.hass}
+        .value=${this.config.elementConfig}
+        .elementType=${this.config?.type}
+        @config-changed=${this._handleEntityRowConfigChanged}
+        @GUImode-changed=${this._handleGUIModeChanged}
+      ></hui-element-editor>
     `;
   }
 
@@ -81,6 +94,6 @@ export class HuiDetailEditorBase extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-detail-editor-base": HuiDetailEditorBase;
+    "hui-sub-element-editor": HuiSubElementEditor;
   }
 }
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index 052f396ffee7..f7ede8269f71 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -14,7 +14,8 @@ import {
   LovelaceViewConfig,
   ShowViewConfig,
 } from "../../../data/lovelace";
-import { EntityConfig } from "../entity-rows/types";
+import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
+import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 
 export interface YamlChangedEvent extends Event {
   detail: {
@@ -82,6 +83,14 @@ export interface CardPickTarget extends EventTarget {
   config: LovelaceCardConfig;
 }
 
+export interface SubElementEditorConfig {
+  index?: number;
+  elementConfig?: LovelaceRowConfig | LovelaceHeaderFooterConfig;
+  guiModeAvailable: boolean;
+  guiMode: string;
+  type: string;
+}
+
 export const actionConfigStruct = object({
   action: string(),
   navigation_path: optional(string()),
diff --git a/src/translations/en.json b/src/translations/en.json
index c8ed81856ef8..c3155ddcd5cb 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2588,7 +2588,7 @@
               "name": "Graph"
             }
           },
-          "detail-editor": {
+          "sub-element-editor": {
             "types": {
               "header": "Header Editor",
               "footer": "Footer Editor",

From e686c91c8c7983f3a38af5e4cdaf87c0b647012c Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:13:53 -0500
Subject: [PATCH 40/63] Splitting the row and card editor out

---
 .../card-editor/hui-card-element-editor.ts    | 65 ++------------
 .../card-editor/hui-dialog-edit-card.ts       | 16 ++--
 .../hui-entities-card-editor.ts               | 77 +++--------------
 .../hui-row-element-editor.ts                 | 39 +++++++++
 .../lovelace/editor/hui-element-editor.ts     | 86 ++++++++++++++++---
 .../editor/hui-entities-card-row-editor.ts    |  8 +-
 .../lovelace/editor/hui-sub-element-editor.ts | 52 +++++++----
 src/panels/lovelace/editor/types.ts           |  2 -
 src/panels/lovelace/types.ts                  | 18 ++--
 9 files changed, 182 insertions(+), 181 deletions(-)
 create mode 100644 src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index 5f40587a499e..7ee32fd1b96a 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -1,74 +1,21 @@
 import { customElement } from "lit-element";
-import { handleStructError } from "../../common/structs/handle-errors";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import { LovelaceCardEditor } from "../../types";
-import { GUISupportError } from "../gui-support-error";
-import { HuiElementEditor, UIConfigChangedEvent } from "../hui-element-editor";
+import { HuiElementEditor } from "../hui-element-editor";
 
 @customElement("hui-card-element-editor")
 export class HuiCardElementEditor extends HuiElementEditor {
   public async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
     let configElement: LovelaceCardEditor | undefined;
 
-    const cardType = this.value!.type;
+    const elClass = await getCardElementClass(this.configElementType!);
 
-    try {
-      this._error = undefined;
-      this._warnings = undefined;
-
-      if (this._configElType !== cardType) {
-        // If the type has changed, we need to load a new GUI editor
-        if (!cardType) {
-          throw new Error(`No card type defined`);
-        }
-
-        const elClass = await getCardElementClass(cardType);
-
-        this._loading = true;
-        // Check if a GUI editor exists
-        if (elClass && elClass.getConfigElement) {
-          configElement = await elClass.getConfigElement();
-        } else {
-          configElement = undefined;
-          throw new GUISupportError(
-            `No visual editor available for: ${cardType}`
-          );
-        }
-
-        this._configElType = cardType;
-
-        // Perform final setup
-        configElement.hass = this.hass;
-        if ("lovelace" in configElement) {
-          configElement.lovelace = this.lovelace;
-        }
-        configElement.addEventListener("config-changed", (ev) =>
-          this._handleUIConfigChanged(ev as UIConfigChangedEvent)
-        );
-      }
-
-      // Setup GUI editor and check that it can handle the current config
-      try {
-        // @ts-ignore
-        configElement!.setConfig(this.value);
-      } catch (err) {
-        throw new GUISupportError(
-          "Config is not supported",
-          handleStructError(err)
-        );
-      }
-    } catch (err) {
-      if (err instanceof GUISupportError) {
-        this._warnings = err.warnings ?? [err.message];
-      } else {
-        this._error = err;
-      }
-      this.GUImode = false;
-    } finally {
-      this._loading = false;
+    // Check if a GUI editor exists
+    if (elClass && elClass.getConfigElement) {
+      configElement = await elClass.getConfigElement();
     }
 
-    return configElement;
+    return configElement!;
   }
 }
 
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index 00ead62a9e12..aa9c28426bbd 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -29,12 +29,10 @@ import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import { addCard, replaceCard } from "../config-util";
 import { getCardDocumentationURL } from "../get-card-documentation-url";
-import "../hui-element-editor";
-import type {
-  ConfigChangedEvent,
-  HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
 import type { GUIModeChangedEvent } from "../types";
+import "./hui-card-element-editor";
+import type { HuiCardElementEditor } from "./hui-card-element-editor";
 import "./hui-card-preview";
 import type { EditCardDialogParams } from "./show-edit-card-dialog";
 
@@ -66,7 +64,8 @@ export class HuiDialogEditCard extends LitElement
 
   @internalProperty() private _guiModeAvailable? = true;
 
-  @query("hui-element-editor", true) private _cardEditorEl?: HuiElementEditor;
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
 
   @internalProperty() private _GUImode = true;
 
@@ -184,15 +183,14 @@ export class HuiDialogEditCard extends LitElement
         </div>
         <div class="content">
           <div class="element-editor">
-            <hui-element-editor
+            <hui-card-element-editor
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
-              elementType="card"
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
-            ></hui-element-editor>
+            ></hui-card-element-editor>
           </div>
           <div class="element-preview">
             <hui-card-preview
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 80c14f675969..0288a5ed2c67 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -10,7 +10,6 @@ import {
   internalProperty,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
 import {
@@ -33,13 +32,9 @@ import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceRowConfig } from "../../entity-rows/types";
-import {
-  headerFooterConfigStructs,
-  LovelaceHeaderFooterConfig,
-} from "../../header-footer/types";
+import { headerFooterConfigStructs } from "../../header-footer/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../header-footer-editor/hui-header-footer-editor";
-import type { HuiElementEditor } from "../hui-element-editor";
 import "../hui-entities-card-row-editor";
 import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
@@ -47,15 +42,12 @@ import {
   EditorTarget,
   entitiesConfigStruct,
   EntitiesEditorEvent,
-  GUIModeChangedEvent,
   SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
 interface EditDetailElementEvent {
-  index?: number;
-  elementType: string;
-  config?: LovelaceHeaderFooterConfig | LovelaceRowConfig;
+  subElementConfig: SubElementEditorConfig;
 }
 
 declare global {
@@ -86,20 +78,6 @@ export class HuiEntitiesCardEditor extends LitElement
 
   @internalProperty() private _subElementEditorConfig?: SubElementEditorConfig;
 
-  @internalProperty() private _detailElementConfig?:
-    | LovelaceRowConfig
-    | LovelaceHeaderFooterConfig;
-
-  @internalProperty() private _detailElementIndex?: number;
-
-  @internalProperty() private _detailElementGuiModeAvailable = true;
-
-  @internalProperty() private _detailElementGuiMode = true;
-
-  @internalProperty() private _detailElementType?: string;
-
-  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
-
   public setConfig(config: EntitiesCardConfig): void {
     assert(config, cardConfigStruct);
     this._config = config;
@@ -119,27 +97,14 @@ export class HuiEntitiesCardEditor extends LitElement
       return html``;
     }
 
-    if (this._detailElementConfig) {
+    if (this._subElementEditorConfig) {
       return html`
         <hui-sub-element-editor
           .hass=${this.hass}
-          .guiModeAvailable=${this._detailElementGuiModeAvailable}
-          .guiMode=${this._detailElementGuiMode}
-          @toggle-gui-mode=${this._toggleMode}
+          .config=${this._subElementEditorConfig}
           @go-back=${this._goBack}
+          @config-changed=${this._handleEntityRowConfigChanged}
         >
-          <span slot="title"
-            >${this.hass.localize(
-              `ui.panel.lovelace.editor.detail-editor.${this._detailElementType}`
-            )}</span
-          >
-          <hui-element-editor
-            .hass=${this.hass}
-            .value=${this._detailElementConfig}
-            .elementType=${this._detailElementType!}
-            @config-changed=${this._handleEntityRowConfigChanged}
-            @GUImode-changed=${this._handleGUIModeChanged}
-          ></hui-element-editor>
         </hui-sub-element-editor>
       `;
     }
@@ -247,43 +212,27 @@ export class HuiEntitiesCardEditor extends LitElement
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
-    const { elementType, config, index } = ev.detail;
-
-    this._detailElementType = elementType;
-    this._detailElementConfig = config;
-
-    if (elementType === "row") {
-      this._detailElementIndex = index!;
-    }
+    this._subElementEditorConfig = ev.detail.subElementConfig;
   }
 
   private _goBack(): void {
-    this._detailElementType = undefined;
-    this._detailElementIndex = undefined;
-    this._detailElementConfig = undefined;
-    this._detailElementGuiModeAvailable = true;
-    this._detailElementGuiMode = true;
-  }
-
-  private _toggleMode(): void {
-    this._cardEditorEl?.toggleMode();
+    this._subElementEditorConfig = undefined;
   }
 
   private _handleEntityRowConfigChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     const value = ev.detail.config as LovelaceRowConfig;
-    this._detailElementGuiModeAvailable = ev.detail.guiModeAvailable;
 
     const newConfigEntities = this._configEntities!.concat();
 
     if (!value) {
-      newConfigEntities.splice(this._detailElementIndex!, 1);
+      newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
       this._goBack();
     } else {
-      newConfigEntities[this._detailElementIndex!] = value;
+      newConfigEntities[this._subElementEditorConfig!.index!] = value;
     }
 
-    this._detailElementConfig = value;
+    this._subElementEditorConfig!.elementConfig = value;
 
     this._config = { ...this._config!, entities: newConfigEntities };
     this._configEntities = processEditorEntities(this._config!.entities);
@@ -291,12 +240,6 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config! });
   }
 
-  private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
-    ev.stopPropagation();
-    this._detailElementGuiMode = ev.detail.guiMode;
-    this._detailElementGuiModeAvailable = ev.detail.guiModeAvailable;
-  }
-
   static get styles(): CSSResultArray {
     return [
       configElementStyle,
diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
new file mode 100644
index 000000000000..a5228f8d094f
--- /dev/null
+++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
@@ -0,0 +1,39 @@
+import { customElement } from "lit-element";
+import { getRowElementClass } from "../../create-element/create-row-element";
+import { LovelaceRowEditor } from "../../types";
+import { HuiElementEditor } from "../hui-element-editor";
+
+const GENERIC_ROW_TYPE = "generic-row";
+
+@customElement("hui-row-element-editor")
+export class HuiRowElementEditor extends HuiElementEditor {
+  public get configElementType(): string | undefined {
+    if (!this.value?.type && "entity" in this.value) {
+      return GENERIC_ROW_TYPE;
+    }
+
+    return this.value?.type;
+  }
+
+  public async getConfigElement(): Promise<LovelaceRowEditor | undefined> {
+    if (this.configElementType! === GENERIC_ROW_TYPE) {
+      return document.createElement("hui-generic-entity-row-editor");
+    }
+
+    let configElement: LovelaceRowEditor | undefined;
+    const elClass = await getRowElementClass(this.configElementType!);
+
+    // Check if a GUI editor exists
+    if (elClass && elClass.getConfigElement) {
+      configElement = await elClass.getConfigElement();
+    }
+
+    return configElement!;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-row-element-editor": HuiRowElementEditor;
+  }
+}
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index c904b4d4c6f2..b416dc7e16c7 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -24,7 +24,7 @@ import type {
 import type { HomeAssistant } from "../../../types";
 import { handleStructError } from "../common/structs/handle-errors";
 import type { LovelaceRowConfig } from "../entity-rows/types";
-import type { LovelaceCardEditor, LovelaceRowEditor } from "../types";
+import type { LovelaceGenericElementEditor } from "../types";
 import "./config-elements/hui-generic-entity-row-editor";
 import { GUISupportError } from "./gui-support-error";
 import { GUIModeChangedEvent } from "./types";
@@ -51,8 +51,6 @@ export interface UIConfigChangedEvent extends Event {
   };
 }
 
-const GENERIC_ROW_TYPE = "generic-row";
-
 @customElement("hui-element-editor")
 export class HuiElementEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -61,13 +59,11 @@ export class HuiElementEditor extends LitElement {
 
   @internalProperty() private _yaml?: string;
 
-  @internalProperty() private _config?: LovelaceCardConfig | LovelaceRowConfig;
+  @internalProperty() private _config?: any;
 
-  @internalProperty() private _configElement?:
-    | LovelaceCardEditor
-    | LovelaceRowEditor;
+  @internalProperty() private _configElement?: LovelaceGenericElementEditor;
 
-  @internalProperty() protected _configElType?: string;
+  @internalProperty() protected _configElementType?: string;
 
   @internalProperty() private _GUImode = true;
 
@@ -99,11 +95,11 @@ export class HuiElementEditor extends LitElement {
     this._setConfig();
   }
 
-  public get value(): LovelaceCardConfig | LovelaceRowConfig | undefined {
+  public get value(): any | undefined {
     return this._config;
   }
 
-  public set value(config: LovelaceCardConfig | LovelaceRowConfig | undefined) {
+  public set value(config: any | undefined) {
     if (this._config && deepEqual(config, this._config)) {
       return;
     }
@@ -122,6 +118,7 @@ export class HuiElementEditor extends LitElement {
         this._error = err.message;
       }
     }
+
     fireEvent(this, "config-changed", {
       config: this.value!,
       error: this._error,
@@ -149,8 +146,14 @@ export class HuiElementEditor extends LitElement {
     });
   }
 
-  public async getConfigElement(): Promise<HTMLElement | undefined> {
-    return document.createElement("div");
+  public async getConfigElement(): Promise<
+    LovelaceGenericElementEditor | undefined
+  > {
+    return undefined;
+  }
+
+  public get configElementType(): string | undefined {
+    return this.value?.type;
   }
 
   public toggleMode() {
@@ -258,8 +261,65 @@ export class HuiElementEditor extends LitElement {
       return;
     }
 
+    let configElement: LovelaceGenericElementEditor | undefined;
+
+    try {
+      this._error = undefined;
+      this._warnings = undefined;
+
+      if (this._configElementType !== this.configElementType) {
+        // If the type has changed, we need to load a new GUI editor
+
+        if (!this.configElementType) {
+          throw new Error(`No card type defined`);
+        }
+
+        this._configElementType = this.configElementType;
+
+        this._loading = true;
+        configElement = await this.getConfigElement();
+
+        if (!configElement) {
+          throw new Error(
+            `No visual editor available for: ${this.configElementType}`
+          );
+        }
+
+        configElement.hass = this.hass;
+        if ("lovelace" in configElement) {
+          configElement.lovelace = this.lovelace;
+        }
+        configElement.addEventListener("config-changed", (ev) =>
+          this._handleUIConfigChanged(ev as UIConfigChangedEvent)
+        );
+      }
+
+      // Setup GUI editor and check that it can handle the current config
+      try {
+        // @ts-ignore
+        configElement!.setConfig(this.value);
+      } catch (err) {
+        throw new GUISupportError(
+          "Config is not supported",
+          handleStructError(err)
+        );
+      }
+    } catch (err) {
+      if (err instanceof GUISupportError) {
+        this._warnings = err.warnings ?? [err.message];
+      } else {
+        this._error = err;
+      }
+      this.GUImode = false;
+    } finally {
+      this._loading = false;
+    }
+
     this._configElement = await this.getConfigElement();
-    this._configElType = type;
+
+    if (!this._configElement) {
+      return;
+    }
 
     // Perform final setup
     this._configElement.hass = this.hass;
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 766aa3a5cc35..8d1bc9f36b5c 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -234,9 +234,11 @@ export class HuiEntitiesCardRowEditor extends LitElement {
   private _editRow(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
     fireEvent(this, "edit-detail-element", {
-      index,
-      elementType: "row",
-      config: this.entities![index],
+      subElementConfig: {
+        index,
+        type: "row",
+        elementConfig: this.entities![index],
+      },
     });
   }
 
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index 03783fac0ac0..29e5160bf795 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -6,14 +6,18 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
+  query,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-svg-icon";
-import { HomeAssistant } from "../../../types";
-import { SubElementEditorConfig } from "./types";
+import type { HomeAssistant } from "../../../types";
+import "./entity-row-editor/hui-row-element-editor";
+import type { HuiRowElementEditor } from "./entity-row-editor/hui-row-element-editor";
+import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 
 declare global {
   interface HASSDomEvents {
@@ -26,11 +30,13 @@ declare global {
 export class HuiSubElementEditor extends LitElement {
   public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public guiModeAvailable? = true;
+  @property({ attribute: false }) public config!: SubElementEditorConfig;
 
-  @property({ type: Boolean }) public guiMode? = true;
+  @internalProperty() private _guiModeAvailable = true;
 
-  @property({ attribute: false }) public config!: SubElementEditorConfig;
+  @internalProperty() private _guiMode = true;
+
+  @query(".editor") private _editorElement?: HuiRowElementEditor;
 
   protected render(): TemplateResult {
     return html`
@@ -48,23 +54,27 @@ export class HuiSubElementEditor extends LitElement {
         <mwc-button
           slot="secondaryAction"
           class="gui-mode-button"
-          .disabled=${!this.guiModeAvailable}
+          .disabled=${!this._guiModeAvailable}
           @click=${this._toggleMode}
         >
           ${this.hass.localize(
-            this.guiMode
+            this._guiMode
               ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
               : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
           )}
         </mwc-button>
       </div>
-      <hui-element-editor
-        .hass=${this.hass}
-        .value=${this.config.elementConfig}
-        .elementType=${this.config?.type}
-        @config-changed=${this._handleEntityRowConfigChanged}
-        @GUImode-changed=${this._handleGUIModeChanged}
-      ></hui-element-editor>
+      ${this.config.type === "row"
+        ? html`
+            <hui-row-element-editor
+              class="editor"
+              .hass=${this.hass}
+              .value=${this.config.elementConfig}
+              @config-changed=${this._handleConfigChanged}
+              @GUImode-changed=${this._handleGUIModeChanged}
+            ></hui-row-element-editor>
+          `
+        : ""}
     `;
   }
 
@@ -73,7 +83,17 @@ export class HuiSubElementEditor extends LitElement {
   }
 
   private _toggleMode(): void {
-    fireEvent(this, "toggle-gui-mode");
+    this._editorElement?.toggleMode();
+  }
+
+  private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
+    ev.stopPropagation();
+    this._guiMode = ev.detail.guiMode;
+    this._guiModeAvailable = ev.detail.guiModeAvailable;
+  }
+
+  private _handleConfigChanged(ev: CustomEvent): void {
+    this._guiModeAvailable = ev.detail.guiModeAvailable;
   }
 
   static get styles(): CSSResult {
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index f7ede8269f71..a50c52292c36 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -86,8 +86,6 @@ export interface CardPickTarget extends EventTarget {
 export interface SubElementEditorConfig {
   index?: number;
   elementConfig?: LovelaceRowConfig | LovelaceHeaderFooterConfig;
-  guiModeAvailable: boolean;
-  guiMode: string;
   type: string;
 }
 
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index a8bb48755228..22d0a1d52878 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -69,21 +69,15 @@ export interface LovelaceHeaderFooter extends HTMLElement {
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }
 
-export interface LovelaceCardEditor extends HTMLElement {
-  hass?: HomeAssistant;
-  lovelace?: LovelaceConfig;
-  setConfig(config: LovelaceCardConfig): void;
-  refreshYamlEditor?: (focus: boolean) => void;
-}
+export type LovelaceCardEditor = LovelaceGenericElementEditor;
 
-export interface LovelaceHeaderFooterEditor extends HTMLElement {
-  hass?: HomeAssistant;
-  lovelace?: LovelaceConfig;
-  setConfig(config: LovelaceCardConfig): void;
-}
+export type LovelaceHeaderFooterEditor = LovelaceGenericElementEditor;
 
-export interface LovelaceRowEditor extends HTMLElement {
+export type LovelaceRowEditor = LovelaceGenericElementEditor;
+
+export interface LovelaceGenericElementEditor extends HTMLElement {
   hass?: HomeAssistant;
+  lovelace?: LovelaceConfig;
   setConfig(config: LovelaceRowConfig): void;
   refreshYamlEditor?: (focus: boolean) => void;
 }

From cfbdc9a4cb746284edfa6fc0aa768ae3d6d6a849 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:16:28 -0500
Subject: [PATCH 41/63] remove un needed css

---
 .../editor/config-elements/hui-entities-card-editor.ts         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 0288a5ed2c67..bbb0ce2c090d 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -250,9 +250,6 @@ export class HuiEntitiesCardEditor extends LitElement
           align-items: center;
           font-size: 18px;
         }
-        div[slot="advanced"] {
-          padding-top: 8px;
-        }
       `,
     ];
   }

From 45540ca105f3e945ff7419d99ea15bf12c669c1e Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:19:22 -0500
Subject: [PATCH 42/63] add headerfooter editor

---
 .../editor/get-header-footer-editor.ts        | 37 -------------------
 .../hui-header-footer-element-editor.ts       | 28 ++++++++++++++
 2 files changed, 28 insertions(+), 37 deletions(-)
 delete mode 100644 src/panels/lovelace/editor/get-header-footer-editor.ts
 create mode 100644 src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts

diff --git a/src/panels/lovelace/editor/get-header-footer-editor.ts b/src/panels/lovelace/editor/get-header-footer-editor.ts
deleted file mode 100644
index 36939788f044..000000000000
--- a/src/panels/lovelace/editor/get-header-footer-editor.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { getHeaderFooterElementClass } from "../create-element/create-header-footer-element";
-import type { LovelaceHeaderFooterEditor } from "../types";
-import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { HomeAssistant } from "../../../types";
-
-export const getHeaderFooterEditor = async (
-  hass: HomeAssistant,
-  config: LovelaceHeaderFooterConfig,
-  entities: string[]
-): Promise<
-  | {
-      configElement: LovelaceHeaderFooterEditor;
-      config: LovelaceHeaderFooterConfig;
-    }
-  | undefined
-> => {
-  const elClass = await getHeaderFooterElementClass(config.type);
-
-  let configElement: LovelaceHeaderFooterEditor;
-  let stubConfig: LovelaceHeaderFooterConfig | undefined;
-
-  if (elClass && elClass.getConfigElement) {
-    configElement = await elClass.getConfigElement();
-
-    if (elClass.getStubConfig) {
-      stubConfig = elClass.getStubConfig(
-        hass,
-        entities,
-        Object.keys(hass.states)
-      );
-    }
-  } else {
-    return undefined;
-  }
-
-  return { configElement, config: { ...stubConfig, ...config } };
-};
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
new file mode 100644
index 000000000000..126c4733bd28
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -0,0 +1,28 @@
+import { customElement } from "lit-element";
+import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
+import { LovelaceHeaderFooterEditor } from "../../types";
+import { HuiElementEditor } from "../hui-element-editor";
+
+@customElement("hui-card-element-editor")
+export class HuiCardElementEditor extends HuiElementEditor {
+  public async getConfigElement(): Promise<
+    LovelaceHeaderFooterEditor | undefined
+  > {
+    let configElement: LovelaceHeaderFooterEditor | undefined;
+
+    const elClass = await getHeaderFooterElementClass(this.configElementType!);
+
+    // Check if a GUI editor exists
+    if (elClass && elClass.getConfigElement) {
+      configElement = await elClass.getConfigElement();
+    }
+
+    return configElement!;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-element-editor": HuiCardElementEditor;
+  }
+}

From 1ab280b32befdb27561c76cabb70175ca573f223 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:35:24 -0500
Subject: [PATCH 43/63] keep working

---
 .../hui-header-footer-dropdown.ts             | 26 +++++++++----------
 .../lovelace/editor/hui-sub-element-editor.ts |  3 +--
 src/panels/lovelace/editor/lovelace-cards.ts  |  6 +----
 .../lovelace/editor/lovelace-headerfooters.ts |  3 +++
 src/panels/lovelace/editor/types.ts           |  6 -----
 src/translations/en.json                      |  4 +--
 6 files changed, 20 insertions(+), 28 deletions(-)
 create mode 100644 src/panels/lovelace/editor/lovelace-headerfooters.ts

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
index 9eee8148d41d..ef2961d7f80f 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
@@ -12,7 +12,7 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-paper-dropdown-menu";
 import type { HomeAssistant } from "../../../../types";
-import { headerFooters } from "../lovelace-cards";
+import { footerElements, headerElements } from "../lovelace-headerfooters";
 
 @customElement("hui-header-footer-dropdown")
 export class HuiHeaderFooterDropdown extends LitElement {
@@ -38,18 +38,18 @@ export class HuiHeaderFooterDropdown extends LitElement {
           @selected-changed=${this._headerFooterChanged}
         >
           <paper-item></paper-item>
-          ${headerFooters
-            .filter((headerFooter) => headerFooter.isHeader)
-            .map(
-              (headerFooter) =>
-                html`
-                  <paper-item .itemName=${headerFooter.type}
-                    >${this.hass!.localize(
-                      `ui.panel.lovelace.editor.header-footer.${headerFooter.type}.name`
-                    )}</paper-item
-                  >
-                `
-            )}
+          ${this.configValue === "header"
+            ? headerElements
+            : footerElements.map(
+                (headerFooter) =>
+                  html`
+                    <paper-item .itemName=${headerFooter}
+                      >${this.hass!.localize(
+                        `ui.panel.lovelace.editor.header-footer.${headerFooter}.name`
+                      )}</paper-item
+                    >
+                  `
+              )}
         </paper-listbox>
       </ha-paper-dropdown-menu>
     `;
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index 29e5160bf795..c14c9094526b 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -22,7 +22,6 @@ import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 declare global {
   interface HASSDomEvents {
     "go-back": undefined;
-    "toggle-gui-mode": undefined;
   }
 }
 
@@ -47,7 +46,7 @@ export class HuiSubElementEditor extends LitElement {
           </mwc-icon-button>
           <span slot="title"
             >${this.hass.localize(
-              `ui.panel.lovelace.editor.detail-editor.${this.config?.type}`
+              `ui.panel.lovelace.editor.sub-element-editor.${this.config?.type}`
             )}</span
           >
         </div>
diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts
index 0283bc13e078..13c099a791c5 100644
--- a/src/panels/lovelace/editor/lovelace-cards.ts
+++ b/src/panels/lovelace/editor/lovelace-cards.ts
@@ -1,4 +1,4 @@
-import { Card, HeaderFooter } from "./types";
+import { Card } from "./types";
 
 export const coreCards: Card[] = [
   {
@@ -104,7 +104,3 @@ export const coreCards: Card[] = [
     type: "shopping-list",
   },
 ];
-
-export const headerFooters: HeaderFooter[] = [
-  { type: "graph", isFooter: true, isHeader: true },
-];
diff --git a/src/panels/lovelace/editor/lovelace-headerfooters.ts b/src/panels/lovelace/editor/lovelace-headerfooters.ts
new file mode 100644
index 000000000000..1a8a325df9a0
--- /dev/null
+++ b/src/panels/lovelace/editor/lovelace-headerfooters.ts
@@ -0,0 +1,3 @@
+export const headerElements: string[] = ["graph"];
+
+export const footerElements: string[] = ["graph"];
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index a50c52292c36..72f4c714e361 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -73,12 +73,6 @@ export interface Card {
   isCustom?: boolean;
 }
 
-export interface HeaderFooter {
-  type: string;
-  isHeader?: boolean;
-  isFooter?: boolean;
-}
-
 export interface CardPickTarget extends EventTarget {
   config: LovelaceCardConfig;
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index c3155ddcd5cb..75e74d270e0f 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2582,8 +2582,8 @@
             "by_card": "By Card"
           },
           "header-footer": {
-            "header": "Header",
-            "footer": "Footer",
+            "header": { "name": "Header" },
+            "footer": { "name": "Footer" },
             "graph": {
               "name": "Graph"
             }

From 51771ddb2b0cda7f7d6bb0cf42ad03976e39a443 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:42:28 -0500
Subject: [PATCH 44/63] remove not used translations

---
 src/translations/en.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/translations/en.json b/src/translations/en.json
index 75e74d270e0f..afefb096bba1 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2313,8 +2313,6 @@
             "move_before": "Move card before",
             "move_after": "Move card after",
             "options": "More options",
-            "editor": "Editor",
-            "advanced": "Advanced",
             "search_cards": "Search cards"
           },
           "move_card": {

From 4646bf35c1eebf35f13d630adc254951546412a9 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 16:54:56 -0500
Subject: [PATCH 45/63] more changes

---
 .../header-footer-editor/hui-header-footer-dropdown.ts |  2 +-
 .../header-footer-editor/hui-header-footer-editor.ts   |  8 +++++---
 src/translations/en.json                               | 10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
index ef2961d7f80f..83a05f99e629 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
@@ -45,7 +45,7 @@ export class HuiHeaderFooterDropdown extends LitElement {
                   html`
                     <paper-item .itemName=${headerFooter}
                       >${this.hass!.localize(
-                        `ui.panel.lovelace.editor.header-footer.${headerFooter}.name`
+                        `ui.panel.lovelace.editor.header-footer.types.${headerFooter}.name`
                       )}</paper-item
                     >
                   `
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 116aeef90f7c..bf497462491d 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -44,7 +44,7 @@ export class HuiHeaderFooterEditor extends LitElement {
             `ui.panel.lovelace.editor.header-footer.${this.configValue}`
           )}:
           ${this.hass!.localize(
-            `ui.panel.lovelace.editor.header-footer.${this.config?.type}.name`
+            `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
           ) || "None"}
         </span>
       </div>
@@ -73,8 +73,10 @@ export class HuiHeaderFooterEditor extends LitElement {
 
   private _edit(): void {
     fireEvent(this, "edit-detail-element", {
-      config: this.config,
-      elementType: this.configValue,
+      subElementConfig: {
+        elementConfig: this.config,
+        type: this.configValue,
+      },
     });
   }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index afefb096bba1..d1ce00f8b755 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2580,10 +2580,12 @@
             "by_card": "By Card"
           },
           "header-footer": {
-            "header": { "name": "Header" },
-            "footer": { "name": "Footer" },
-            "graph": {
-              "name": "Graph"
+            "header": "Header",
+            "footer": "Footer",
+            "types": {
+              "graph": {
+                "name": "Graph"
+              }
             }
           },
           "sub-element-editor": {

From 693fe167d9a80990e92598dc2998b1f51e6a7877 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 17:14:38 -0500
Subject: [PATCH 46/63] Header and footer editor "works"

---
 .../hui-header-footer-element-editor.ts            |  6 +++---
 .../lovelace/editor/hui-sub-element-editor.ts      | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
index 126c4733bd28..14a8531b440a 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -3,8 +3,8 @@ import { getHeaderFooterElementClass } from "../../create-element/create-header-
 import { LovelaceHeaderFooterEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
-@customElement("hui-card-element-editor")
-export class HuiCardElementEditor extends HuiElementEditor {
+@customElement("hui-headerfooter-element-editor")
+export class HuiHeaderFooterElementEditor extends HuiElementEditor {
   public async getConfigElement(): Promise<
     LovelaceHeaderFooterEditor | undefined
   > {
@@ -23,6 +23,6 @@ export class HuiCardElementEditor extends HuiElementEditor {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-card-element-editor": HuiCardElementEditor;
+    "hui-headerfooter-element-editor": HuiHeaderFooterElementEditor;
   }
 }
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index c14c9094526b..eb489e82fe19 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -17,6 +17,7 @@ import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import "./entity-row-editor/hui-row-element-editor";
 import type { HuiRowElementEditor } from "./entity-row-editor/hui-row-element-editor";
+import "./header-footer-editor/hui-header-footer-element-editor";
 import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 
 declare global {
@@ -46,13 +47,12 @@ export class HuiSubElementEditor extends LitElement {
           </mwc-icon-button>
           <span slot="title"
             >${this.hass.localize(
-              `ui.panel.lovelace.editor.sub-element-editor.${this.config?.type}`
+              `ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}`
             )}</span
           >
         </div>
         <mwc-button
           slot="secondaryAction"
-          class="gui-mode-button"
           .disabled=${!this._guiModeAvailable}
           @click=${this._toggleMode}
         >
@@ -73,6 +73,16 @@ export class HuiSubElementEditor extends LitElement {
               @GUImode-changed=${this._handleGUIModeChanged}
             ></hui-row-element-editor>
           `
+        : this.config.type === "header" || this.config.type === "footer"
+        ? html`
+            <hui-headerfooter-element-editor
+              class="editor"
+              .hass=${this.hass}
+              .value=${this.config.elementConfig}
+              @config-changed=${this._handleConfigChanged}
+              @GUImode-changed=${this._handleGUIModeChanged}
+            ></hui-headerfooter-element-editor>
+          `
         : ""}
     `;
   }

From 414b48151787ef9ca81f69634833173bc70e0792 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 17:20:56 -0500
Subject: [PATCH 47/63] simple

---
 .../lovelace/editor/card-editor/hui-card-element-editor.ts  | 6 ++----
 .../editor/entity-row-editor/hui-row-element-editor.ts      | 5 ++---
 .../hui-header-footer-element-editor.ts                     | 6 ++----
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index 7ee32fd1b96a..d66e40773f3f 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -6,16 +6,14 @@ import { HuiElementEditor } from "../hui-element-editor";
 @customElement("hui-card-element-editor")
 export class HuiCardElementEditor extends HuiElementEditor {
   public async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
-    let configElement: LovelaceCardEditor | undefined;
-
     const elClass = await getCardElementClass(this.configElementType!);
 
     // Check if a GUI editor exists
     if (elClass && elClass.getConfigElement) {
-      configElement = await elClass.getConfigElement();
+      return elClass.getConfigElement();
     }
 
-    return configElement!;
+    return undefined!;
   }
 }
 
diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
index a5228f8d094f..671d039c0349 100644
--- a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
+++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
@@ -20,15 +20,14 @@ export class HuiRowElementEditor extends HuiElementEditor {
       return document.createElement("hui-generic-entity-row-editor");
     }
 
-    let configElement: LovelaceRowEditor | undefined;
     const elClass = await getRowElementClass(this.configElementType!);
 
     // Check if a GUI editor exists
     if (elClass && elClass.getConfigElement) {
-      configElement = await elClass.getConfigElement();
+      return elClass.getConfigElement();
     }
 
-    return configElement!;
+    return undefined;
   }
 }
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
index 14a8531b440a..de059296713b 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -8,16 +8,14 @@ export class HuiHeaderFooterElementEditor extends HuiElementEditor {
   public async getConfigElement(): Promise<
     LovelaceHeaderFooterEditor | undefined
   > {
-    let configElement: LovelaceHeaderFooterEditor | undefined;
-
     const elClass = await getHeaderFooterElementClass(this.configElementType!);
 
     // Check if a GUI editor exists
     if (elClass && elClass.getConfigElement) {
-      configElement = await elClass.getConfigElement();
+      return elClass.getConfigElement();
     }
 
-    return configElement!;
+    return undefined;
   }
 }
 

From 273909982a70804471ab8fdae356925014210618 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 17:34:33 -0500
Subject: [PATCH 48/63] continued improvements

---
 .../card-editor/hui-card-element-editor.ts    |  4 +-
 .../hui-conditional-card-editor.ts            | 15 +++--
 .../config-elements/hui-stack-card-editor.ts  | 16 +++--
 .../hui-row-element-editor.ts                 |  6 +-
 .../hui-header-footer-element-editor.ts       |  4 +-
 .../lovelace/editor/hui-element-editor.ts     | 58 ++++++-------------
 6 files changed, 38 insertions(+), 65 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index d66e40773f3f..5d5d1e913a74 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -1,11 +1,11 @@
 import { customElement } from "lit-element";
 import { getCardElementClass } from "../../create-element/create-card-element";
-import { LovelaceCardEditor } from "../../types";
+import type { LovelaceCardEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 @customElement("hui-card-element-editor")
 export class HuiCardElementEditor extends HuiElementEditor {
-  public async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
+  protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
     const elClass = await getCardElementClass(this.configElementType!);
 
     // Check if a GUI editor exists
diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
index fe946b444436..71bae401ee72 100644
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@@ -18,12 +18,11 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { ConditionalCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import "../card-editor/hui-card-element-editor";
+import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
 import "../card-editor/hui-card-picker";
 import "../hui-element-editor";
-import type {
-  ConfigChangedEvent,
-  HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
 import { GUIModeChangedEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -53,7 +52,8 @@ export class HuiConditionalCardEditor extends LitElement
 
   @internalProperty() private _cardTab = false;
 
-  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
 
   public setConfig(config: ConditionalCardConfig): void {
     assert(config, cardConfigStruct);
@@ -108,14 +108,13 @@ export class HuiConditionalCardEditor extends LitElement
                         )}</mwc-button
                       >
                     </div>
-                    <hui-element-editor
+                    <hui-card-element-editor
                       .hass=${this.hass}
                       .value=${this._config.card}
                       .lovelace=${this.lovelace}
-                      elementType="card"
                       @config-changed=${this._handleCardChanged}
                       @GUImode-changed=${this._handleGUIModeChanged}
-                    ></hui-element-editor>
+                    ></hui-card-element-editor>
                   `
                 : html`
                     <hui-card-picker
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index 2220f74dd9d2..bdb6609b9b05 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -18,12 +18,10 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { StackCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import "../card-editor/hui-card-element-editor";
+import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
 import "../card-editor/hui-card-picker";
-import "../hui-element-editor";
-import type {
-  ConfigChangedEvent,
-  HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
 import { GUIModeChangedEvent } from "../types";
 
 const cardConfigStruct = object({
@@ -47,7 +45,8 @@ export class HuiStackCardEditor extends LitElement
 
   @internalProperty() private _guiModeAvailable? = true;
 
-  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
 
   public setConfig(config: Readonly<StackCardConfig>): void {
     assert(config, cardConfigStruct);
@@ -140,14 +139,13 @@ export class HuiStackCardEditor extends LitElement
                   </mwc-icon-button>
                 </div>
 
-                <hui-element-editor
+                <hui-card-element-editor
                   .hass=${this.hass}
                   .value=${this._config.cards[selected]}
                   .lovelace=${this.lovelace}
-                  elementType="card"
                   @config-changed=${this._handleConfigChanged}
                   @GUImode-changed=${this._handleGUIModeChanged}
-                ></hui-element-editor>
+                ></hui-card-element-editor>
               `
             : html`
                 <hui-card-picker
diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
index 671d039c0349..dbfe0279309e 100644
--- a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
+++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
@@ -1,13 +1,13 @@
 import { customElement } from "lit-element";
 import { getRowElementClass } from "../../create-element/create-row-element";
-import { LovelaceRowEditor } from "../../types";
+import type { LovelaceRowEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 const GENERIC_ROW_TYPE = "generic-row";
 
 @customElement("hui-row-element-editor")
 export class HuiRowElementEditor extends HuiElementEditor {
-  public get configElementType(): string | undefined {
+  protected get configElementType(): string | undefined {
     if (!this.value?.type && "entity" in this.value) {
       return GENERIC_ROW_TYPE;
     }
@@ -15,7 +15,7 @@ export class HuiRowElementEditor extends HuiElementEditor {
     return this.value?.type;
   }
 
-  public async getConfigElement(): Promise<LovelaceRowEditor | undefined> {
+  protected async getConfigElement(): Promise<LovelaceRowEditor | undefined> {
     if (this.configElementType! === GENERIC_ROW_TYPE) {
       return document.createElement("hui-generic-entity-row-editor");
     }
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
index de059296713b..512a3b72ecbc 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -1,11 +1,11 @@
 import { customElement } from "lit-element";
 import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
-import { LovelaceHeaderFooterEditor } from "../../types";
+import type { LovelaceHeaderFooterEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 @customElement("hui-headerfooter-element-editor")
 export class HuiHeaderFooterElementEditor extends HuiElementEditor {
-  public async getConfigElement(): Promise<
+  protected async getConfigElement(): Promise<
     LovelaceHeaderFooterEditor | undefined
   > {
     const elClass = await getHeaderFooterElementClass(this.configElementType!);
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index b416dc7e16c7..c995d9e53c67 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -63,17 +63,17 @@ export class HuiElementEditor extends LitElement {
 
   @internalProperty() private _configElement?: LovelaceGenericElementEditor;
 
-  @internalProperty() protected _configElementType?: string;
+  @internalProperty() private _configElementType?: string;
 
   @internalProperty() private _GUImode = true;
 
   // Error: Configuration broken - do not save
-  @internalProperty() protected _error?: string;
+  @internalProperty() private _error?: string;
 
   // Warning: GUI editor can't handle configuration - ok to save
-  @internalProperty() protected _warnings?: string[];
+  @internalProperty() private _warnings?: string[];
 
-  @internalProperty() protected _loading = false;
+  @internalProperty() private _loading = false;
 
   @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
 
@@ -146,16 +146,6 @@ export class HuiElementEditor extends LitElement {
     });
   }
 
-  public async getConfigElement(): Promise<
-    LovelaceGenericElementEditor | undefined
-  > {
-    return undefined;
-  }
-
-  public get configElementType(): string | undefined {
-    return this.value?.type;
-  }
-
   public toggleMode() {
     this.GUImode = !this.GUImode;
   }
@@ -173,6 +163,16 @@ export class HuiElementEditor extends LitElement {
     }
   }
 
+  protected async getConfigElement(): Promise<
+    LovelaceGenericElementEditor | undefined
+  > {
+    return undefined;
+  }
+
+  protected get configElementType(): string | undefined {
+    return this.value?.type;
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="wrapper">
@@ -241,7 +241,7 @@ export class HuiElementEditor extends LitElement {
     }
   }
 
-  protected _handleUIConfigChanged(ev: UIConfigChangedEvent) {
+  private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
     this.value = config;
@@ -292,6 +292,8 @@ export class HuiElementEditor extends LitElement {
         configElement.addEventListener("config-changed", (ev) =>
           this._handleUIConfigChanged(ev as UIConfigChangedEvent)
         );
+
+        this._configElement = configElement;
       }
 
       // Setup GUI editor and check that it can handle the current config
@@ -314,32 +316,6 @@ export class HuiElementEditor extends LitElement {
     } finally {
       this._loading = false;
     }
-
-    this._configElement = await this.getConfigElement();
-
-    if (!this._configElement) {
-      return;
-    }
-
-    // Perform final setup
-    this._configElement.hass = this.hass;
-    if ("lovelace" in this._configElement) {
-      this._configElement.lovelace = this.lovelace;
-    }
-    this._configElement.addEventListener("config-changed", (ev) =>
-      this._handleUIConfigChanged(ev as UIConfigChangedEvent)
-    );
-
-    // Setup GUI editor and check that it can handle the current config
-    try {
-      // @ts-ignore
-      this._configElement!.setConfig(this.value);
-    } catch (err) {
-      throw new GUISupportError(
-        "Config is not supported",
-        handleStructError(err)
-      );
-    }
   }
 
   private _ignoreKeydown(ev: KeyboardEvent) {

From d30c09ba5d8958a1c3080b4f91854160e4ce0c24 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 17:35:08 -0500
Subject: [PATCH 49/63] remove !

---
 .../lovelace/editor/card-editor/hui-card-element-editor.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index 5d5d1e913a74..83814b50a726 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -13,7 +13,7 @@ export class HuiCardElementEditor extends HuiElementEditor {
       return elClass.getConfigElement();
     }
 
-    return undefined!;
+    return undefined;
   }
 }
 

From 9b652c339e50ccd02c840561e9362c2644770f0b Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 17:38:57 -0500
Subject: [PATCH 50/63] remove update completed

---
 src/panels/lovelace/editor/hui-element-editor.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index c995d9e53c67..e876121d0ff4 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -256,7 +256,6 @@ export class HuiElementEditor extends LitElement {
   }
 
   private async _updateConfigElement(): Promise<void> {
-    await this.updateComplete;
     if (!this.value) {
       return;
     }

From c75c7f310418d730db740dd2d8de3311ca0f5780 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 16 Oct 2020 19:41:29 -0500
Subject: [PATCH 51/63] QOL

---
 src/panels/lovelace/editor/hui-element-editor.ts     | 7 ++++---
 src/panels/lovelace/editor/lovelace-headerfooters.ts | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index e876121d0ff4..593cf2be3162 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -8,6 +8,7 @@ import {
   internalProperty,
   LitElement,
   property,
+  PropertyValues,
   query,
   TemplateResult,
 } from "lit-element";
@@ -109,7 +110,7 @@ export class HuiElementEditor extends LitElement {
     this._setConfig();
   }
 
-  private _setConfig() {
+  private _setConfig(): void {
     if (!this._error) {
       try {
         this._updateConfigElement();
@@ -226,7 +227,7 @@ export class HuiElementEditor extends LitElement {
     `;
   }
 
-  protected updated(changedProperties) {
+  protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
 
     if (this._configElement && changedProperties.has("hass")) {
@@ -247,7 +248,7 @@ export class HuiElementEditor extends LitElement {
     this.value = config;
   }
 
-  private _handleYAMLChanged(ev) {
+  private _handleYAMLChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const newYaml = ev.detail.value;
     if (newYaml !== this.yaml) {
diff --git a/src/panels/lovelace/editor/lovelace-headerfooters.ts b/src/panels/lovelace/editor/lovelace-headerfooters.ts
index 1a8a325df9a0..6e3cdc471c3c 100644
--- a/src/panels/lovelace/editor/lovelace-headerfooters.ts
+++ b/src/panels/lovelace/editor/lovelace-headerfooters.ts
@@ -1,3 +1,3 @@
-export const headerElements: string[] = ["graph"];
+export const headerElements: string[] = ["graph", "buttons", "picture"];
 
-export const footerElements: string[] = ["graph"];
+export const footerElements: string[] = ["graph", "buttons", "picture"];

From f7b4c9265e9e321610be7f5ce4034884e19a11df Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 17:48:03 -0500
Subject: [PATCH 52/63] Finshed?

---
 .../hui-entities-card-editor.ts               |  90 ++++++---
 .../get-headerfooter-stub-config.ts           |  26 +++
 .../hui-dialog-create-headerfooter.ts         | 188 ++++++++++++++++++
 .../hui-header-footer-dropdown.ts             |  79 --------
 .../hui-header-footer-editor.ts               |  91 ++++++---
 .../show-create-headerfooter-dialog.ts        |  23 +++
 .../lovelace/editor/hui-element-editor.ts     |   8 +-
 .../editor/hui-entities-card-row-editor.ts    |   8 +
 .../lovelace/editor/lovelace-headerfooters.ts |  13 +-
 src/panels/lovelace/editor/types.ts           |   5 +
 src/translations/en.json                      |  12 ++
 11 files changed, 393 insertions(+), 150 deletions(-)
 create mode 100644 src/panels/lovelace/editor/header-footer-editor/get-headerfooter-stub-config.ts
 create mode 100644 src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
 delete mode 100644 src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
 create mode 100644 src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index bbb0ce2c090d..fc9ad71d34bf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -41,7 +41,6 @@ import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
   entitiesConfigStruct,
-  EntitiesEditorEvent,
   SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
@@ -103,7 +102,7 @@ export class HuiEntitiesCardEditor extends LitElement
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
           @go-back=${this._goBack}
-          @config-changed=${this._handleEntityRowConfigChanged}
+          @config-changed=${this._valueChanged}
         >
         </hui-sub-element-editor>
       `;
@@ -158,12 +157,14 @@ export class HuiEntitiesCardEditor extends LitElement
             .hass=${this.hass}
             .configValue=${"header"}
             .config=${this._config.header}
+            @value-changed=${this._headerFooterChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-header-footer-editor>
           <hui-header-footer-editor
             .hass=${this.hass}
             .configValue=${"footer"}
             .config=${this._config.footer}
+            @value-changed=${this._headerFooterChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-header-footer-editor>
         </div>
@@ -177,33 +178,51 @@ export class HuiEntitiesCardEditor extends LitElement
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
+  private _valueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
     if (!this._config || !this.hass) {
       return;
     }
 
     const target = ev.target! as EditorTarget;
+    const configValue =
+      target.configValue || this._subElementEditorConfig?.type;
+    const value =
+      target.checked !== undefined
+        ? target.checked
+        : target.value || ev.detail.config;
 
     if (
-      (target.configValue! === "title" && target.value === this._title) ||
-      (target.configValue! === "theme" && target.value === this._theme)
+      (configValue! === "title" && target.value === this._title) ||
+      (configValue! === "theme" && target.value === this._theme)
     ) {
       return;
     }
 
-    if (ev.detail && ev.detail.entities) {
-      this._config = { ...this._config, entities: ev.detail.entities };
+    if (configValue === "row" || (ev.detail && ev.detail.entities)) {
+      const newConfigEntities =
+        ev.detail.entities || this._configEntities!.concat();
+      if (configValue === "row") {
+        if (!value) {
+          newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
+          this._goBack();
+        } else {
+          newConfigEntities[this._subElementEditorConfig!.index!] = value;
+        }
+
+        this._subElementEditorConfig!.elementConfig = value;
+      }
 
-      this._configEntities = processEditorEntities(this._config.entities);
-    } else if (target.configValue) {
-      if (target.value === "") {
+      this._config = { ...this._config!, entities: newConfigEntities };
+      this._configEntities = processEditorEntities(this._config!.entities);
+    } else if (configValue) {
+      if (value === "") {
         this._config = { ...this._config };
-        delete this._config[target.configValue!];
+        delete this._config[configValue!];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue]:
-            target.checked !== undefined ? target.checked : target.value,
+          [configValue]: value,
         };
       }
     }
@@ -211,33 +230,36 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
-    this._subElementEditorConfig = ev.detail.subElementConfig;
-  }
-
-  private _goBack(): void {
-    this._subElementEditorConfig = undefined;
-  }
+  private _headerFooterChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
 
-  private _handleEntityRowConfigChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const value = ev.detail.config as LovelaceRowConfig;
+    const target = ev.target! as EditorTarget;
 
-    const newConfigEntities = this._configEntities!.concat();
+    if (!target.configValue) {
+      return;
+    }
 
-    if (!value) {
-      newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
-      this._goBack();
+    if (ev.detail.value === "") {
+      this._config = { ...this._config };
+      delete this._config[target.configValue!];
     } else {
-      newConfigEntities[this._subElementEditorConfig!.index!] = value;
+      this._config = {
+        ...this._config,
+        [target.configValue]: ev.detail.value,
+      };
     }
 
-    this._subElementEditorConfig!.elementConfig = value;
+    fireEvent(this, "config-changed", { config: this._config });
+  }
 
-    this._config = { ...this._config!, entities: newConfigEntities };
-    this._configEntities = processEditorEntities(this._config!.entities);
+  private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
+    this._subElementEditorConfig = ev.detail.subElementConfig;
+  }
 
-    fireEvent(this, "config-changed", { config: this._config! });
+  private _goBack(): void {
+    this._subElementEditorConfig = undefined;
   }
 
   static get styles(): CSSResultArray {
@@ -250,6 +272,10 @@ export class HuiEntitiesCardEditor extends LitElement
           align-items: center;
           font-size: 18px;
         }
+
+        hui-header-footer-editor {
+          padding-top: 4px;
+        }
       `,
     ];
   }
diff --git a/src/panels/lovelace/editor/header-footer-editor/get-headerfooter-stub-config.ts b/src/panels/lovelace/editor/header-footer-editor/get-headerfooter-stub-config.ts
new file mode 100644
index 000000000000..cda782b924b2
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/get-headerfooter-stub-config.ts
@@ -0,0 +1,26 @@
+import { HomeAssistant } from "../../../../types";
+import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
+import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+
+export const getHeaderFooterStubConfig = async (
+  hass: HomeAssistant,
+  type: string,
+  entities: string[],
+  entitiesFallback: string[]
+): Promise<LovelaceHeaderFooterConfig> => {
+  let config: LovelaceHeaderFooterConfig = { type };
+
+  const elClass = await getHeaderFooterElementClass(type);
+
+  if (elClass && elClass.getStubConfig) {
+    const classStubConfig = elClass.getStubConfig(
+      hass,
+      entities,
+      entitiesFallback
+    );
+
+    config = { ...config, ...classStubConfig };
+  }
+
+  return config;
+};
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
new file mode 100644
index 000000000000..bbf2967ba502
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -0,0 +1,188 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResultArray,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { until } from "lit-html/directives/until";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import { headerFooterElements } from "../lovelace-headerfooters";
+import { HeaderFooter } from "../types";
+import { getHeaderFooterStubConfig } from "./get-headerfooter-stub-config";
+import { CreateHeaderFooterDialogParams } from "./show-create-headerfooter-dialog";
+
+@customElement("hui-dialog-create-headerfooter")
+export class HuiCreateDialogHeaderFooter extends LitElement
+  implements HassDialog<CreateHeaderFooterDialogParams> {
+  @property({ attribute: false }) protected hass!: HomeAssistant;
+
+  @internalProperty() private _params?: CreateHeaderFooterDialogParams;
+
+  private _unusedEntities?: string[];
+
+  private _usedEntities?: string[];
+
+  public async showDialog(
+    params: CreateHeaderFooterDialogParams
+  ): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): boolean {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        .heading=${createCloseHeading(this.hass, "Pick Header or Footer")}
+        @keydown=${this._ignoreKeydown}
+        @closed=${this._cancel}
+      >
+        <div class="elements">
+          ${headerFooterElements.map((headerFooter) =>
+            until(
+              this._renderHeaderFooterElement(headerFooter),
+              html`
+                <div class="spinner">
+                  <ha-circular-progress
+                    active
+                    alt="Loading"
+                  ></ha-circular-progress>
+                </div>
+              `
+            )
+          )}
+        </div>
+        <div slot="primaryAction">
+          <mwc-button @click=${this._cancel}>
+            ${this.hass!.localize("ui.common.cancel")}
+          </mwc-button>
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  private async _renderHeaderFooterElement(
+    headerFooter: HeaderFooter
+  ): Promise<TemplateResult> {
+    const { type, icon } = headerFooter;
+    let config: LovelaceHeaderFooterConfig = { type };
+
+    if (this.hass) {
+      config = await getHeaderFooterStubConfig(
+        this.hass,
+        type,
+        this._params?.entities || [],
+        []
+      );
+    }
+
+    return html`
+      <ha-card
+        outlined
+        .config=${config}
+        @click=${this._handleHeaderFooterPicked}
+      >
+        <ha-svg-icon .path=${icon}></ha-svg-icon>
+        <div>
+          ${this.hass!.localize(
+            `ui.panel.lovelace.editor.header-footer.types.${type}.name`
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _handleHeaderFooterPicked(ev: CustomEvent) {
+    this._params!.pickHeaderFooter((ev.currentTarget as any).config);
+    this.closeDialog();
+  }
+
+  private _ignoreKeydown(ev: KeyboardEvent) {
+    ev.stopPropagation();
+  }
+
+  private _cancel(ev?: Event) {
+    if (ev) {
+      ev.stopPropagation();
+    }
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          ha-dialog {
+            --mdc-dialog-max-height: 100%;
+            height: 100%;
+          }
+        }
+
+        @media all and (min-width: 850px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 550px;
+          }
+        }
+
+        ha-dialog {
+          --mdc-dialog-max-width: 550px;
+          --dialog-content-padding: 2px 24px 20px 24px;
+          --dialog-z-index: 5;
+        }
+
+        .elements {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .spinner,
+        ha-card {
+          width: calc(50% - 8px);
+          text-align: center;
+          margin: 4px;
+        }
+
+        ha-card {
+          box-sizing: border-box;
+          padding: 8px;
+          color: var(--secondary-text-color);
+          font-size: 16px;
+          cursor: pointer;
+        }
+
+        ha-svg-icon {
+          padding-bottom: 4px;
+          --mdc-icon-size: 38px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-create-headerfooter": HuiCreateDialogHeaderFooter;
+  }
+}
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
deleted file mode 100644
index 83a05f99e629..000000000000
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-dropdown.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-paper-dropdown-menu";
-import type { HomeAssistant } from "../../../../types";
-import { footerElements, headerElements } from "../lovelace-headerfooters";
-
-@customElement("hui-header-footer-dropdown")
-export class HuiHeaderFooterDropdown extends LitElement {
-  public hass!: HomeAssistant;
-
-  @property() public configValue!: string;
-
-  @property() public value?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-paper-dropdown-menu
-        label-float
-        dynamic-align
-        .label=${this.hass.localize(
-          `ui.panel.lovelace.editor.header-footer.${this.configValue}`
-        )}
-      >
-        <paper-listbox
-          slot="dropdown-content"
-          attr-for-selected="item-name"
-          .selected=${this.value}
-          @selected-changed=${this._headerFooterChanged}
-        >
-          <paper-item></paper-item>
-          ${this.configValue === "header"
-            ? headerElements
-            : footerElements.map(
-                (headerFooter) =>
-                  html`
-                    <paper-item .itemName=${headerFooter}
-                      >${this.hass!.localize(
-                        `ui.panel.lovelace.editor.header-footer.types.${headerFooter}.name`
-                      )}</paper-item
-                    >
-                  `
-              )}
-        </paper-listbox>
-      </ha-paper-dropdown-menu>
-    `;
-  }
-
-  private _headerFooterChanged(ev: CustomEvent): void {
-    this.value = ev.detail.value ?? undefined;
-    fireEvent(this, "change");
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: block;
-      }
-      ha-paper-dropdown-menu {
-        width: 100%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-header-footer-dropdown": HuiHeaderFooterDropdown;
-  }
-}
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index bf497462491d..92a3888b3b19 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -1,10 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import {
-  mdiClose,
-  mdiPageLayoutFooter,
-  mdiPageLayoutHeader,
-  mdiPencil,
-} from "@mdi/js";
+import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -19,13 +14,17 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-paper-dropdown-menu";
 import "../../../../components/ha-svg-icon";
+import { LovelaceConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import { showCreateHeaderFooterDialog } from "./show-create-headerfooter-dialog";
 
 @customElement("hui-header-footer-editor")
 export class HuiHeaderFooterEditor extends LitElement {
   public hass!: HomeAssistant;
 
+  public lovelaceConfig!: LovelaceConfig;
+
   @property({ attribute: false }) public config?: LovelaceHeaderFooterConfig;
 
   @property() public configValue!: string;
@@ -33,40 +32,50 @@ export class HuiHeaderFooterEditor extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div>
-        <ha-svg-icon
-          class="header-footer-icon"
-          .path=${this.configValue === "header"
-            ? mdiPageLayoutHeader
-            : mdiPageLayoutFooter}
-        ></ha-svg-icon>
         <span>
           ${this.hass.localize(
             `ui.panel.lovelace.editor.header-footer.${this.configValue}`
           )}:
-          ${this.hass!.localize(
-            `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
-          ) || "None"}
+          ${!this.config?.type
+            ? "None"
+            : this.hass!.localize(
+                `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
+              )}
         </span>
       </div>
       <div>
-        <mwc-icon-button
-          aria-label=${this.hass!.localize(
-            "ui.components.entity.entity-picker.clear"
-          )}
-          class="remove-icon"
-          @click=${this._delete}
-        >
-          <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-        </mwc-icon-button>
-        <mwc-icon-button
-          aria-label=${this.hass!.localize(
-            "ui.components.entity.entity-picker.edit"
-          )}
-          class="edit-icon"
-          @click=${this._edit}
-        >
-          <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-        </mwc-icon-button>
+        ${!this.config?.type
+          ? html`
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.panel.lovelace.editor.common.add"
+                )}
+                class="add-icon"
+                @click=${this._add}
+              >
+                <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+              </mwc-icon-button>
+            `
+          : html`
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.panel.lovelace.editor.common.clear"
+                )}
+                class="remove-icon"
+                @click=${this._delete}
+              >
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-icon-button
+                aria-label=${this.hass!.localize(
+                  "ui.panel.lovelace.editor.common.edit"
+                )}
+                class="edit-icon"
+                @click=${this._edit}
+              >
+                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+              </mwc-icon-button>
+            `}
       </div>
     `;
   }
@@ -80,6 +89,22 @@ export class HuiHeaderFooterEditor extends LitElement {
     });
   }
 
+  private _add(): void {
+    showCreateHeaderFooterDialog(this, {
+      pickHeaderFooter: (config) => this._elementPicked(config),
+    });
+  }
+
+  private _elementPicked(config: LovelaceHeaderFooterConfig): void {
+    fireEvent(this, "value-changed", { value: config });
+    fireEvent(this, "edit-detail-element", {
+      subElementConfig: {
+        elementConfig: config,
+        type: this.configValue,
+      },
+    });
+  }
+
   private _delete(): void {
     fireEvent(this, "value-changed", { value: "" });
   }
diff --git a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
new file mode 100644
index 000000000000..a48a0142bf8b
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
@@ -0,0 +1,23 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+
+export interface CreateHeaderFooterDialogParams {
+  pickHeaderFooter: (config: LovelaceHeaderFooterConfig) => void;
+  entities?: string[]; // We can pass entity id's that will be added to the config when a header footer is picked
+}
+
+const importCreateHeaderFooterDialog = () =>
+  import(
+    /* webpackChunkName: "hui-dialog-create-headerfooter" */ "./hui-dialog-create-headerfooter"
+  );
+
+export const showCreateHeaderFooterDialog = (
+  element: HTMLElement,
+  createHeaderFooterDialogParams: CreateHeaderFooterDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "hui-dialog-create-headerfooter",
+    dialogImport: importCreateHeaderFooterDialog,
+    dialogParams: createHeaderFooterDialogParams,
+  });
+};
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 593cf2be3162..963c47d833f0 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -38,9 +38,6 @@ export interface ConfigChangedEvent {
 
 declare global {
   interface HASSDomEvents {
-    "entities-changed": {
-      entities: LovelaceRowConfig[];
-    };
     "config-changed": ConfigChangedEvent;
     "GUImode-changed": GUIModeChangedEvent;
   }
@@ -113,6 +110,8 @@ export class HuiElementEditor extends LitElement {
   private _setConfig(): void {
     if (!this._error) {
       try {
+        console.log("update config");
+
         this._updateConfigElement();
         this._error = undefined;
       } catch (err) {
@@ -245,6 +244,7 @@ export class HuiElementEditor extends LitElement {
   private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
+    console.log("Config Changed in Element", config);
     this.value = config;
   }
 
@@ -299,7 +299,7 @@ export class HuiElementEditor extends LitElement {
       // Setup GUI editor and check that it can handle the current config
       try {
         // @ts-ignore
-        configElement!.setConfig(this.value);
+        this._configElement!.setConfig(this.value);
       } catch (err) {
         throw new GUISupportError(
           "Config is not supported",
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 8d1bc9f36b5c..f24359cb425f 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -25,6 +25,14 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 
+declare global {
+  interface HASSDomEvents {
+    "entities-changed": {
+      entities: LovelaceRowConfig[];
+    };
+  }
+}
+
 @customElement("hui-entities-card-row-editor")
 export class HuiEntitiesCardRowEditor extends LitElement {
   @property({ attribute: false }) protected hass?: HomeAssistant;
diff --git a/src/panels/lovelace/editor/lovelace-headerfooters.ts b/src/panels/lovelace/editor/lovelace-headerfooters.ts
index 6e3cdc471c3c..0aa0ccc8a149 100644
--- a/src/panels/lovelace/editor/lovelace-headerfooters.ts
+++ b/src/panels/lovelace/editor/lovelace-headerfooters.ts
@@ -1,3 +1,12 @@
-export const headerElements: string[] = ["graph", "buttons", "picture"];
+import {
+  mdiChartBellCurveCumulative,
+  mdiGestureTapButton,
+  mdiImageArea,
+} from "@mdi/js";
+import { HeaderFooter } from "./types";
 
-export const footerElements: string[] = ["graph", "buttons", "picture"];
+export const headerFooterElements: HeaderFooter[] = [
+  { type: "graph", icon: mdiChartBellCurveCumulative },
+  { type: "buttons", icon: mdiGestureTapButton },
+  { type: "picture", icon: mdiImageArea },
+];
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index 72f4c714e361..4bf3a518ca99 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -73,6 +73,11 @@ export interface Card {
   isCustom?: boolean;
 }
 
+export interface HeaderFooter {
+  type: string;
+  icon?: string;
+}
+
 export interface CardPickTarget extends EventTarget {
   config: LovelaceCardConfig;
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index 4767984b2b41..e3871d5e49bb 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2257,6 +2257,11 @@
             "open": "Open Lovelace UI menu",
             "raw_editor": "Raw configuration editor"
           },
+          "common": {
+            "edit": "Edit",
+            "clear": "Clear",
+            "add": "Add"
+          },
           "raw_editor": {
             "header": "Edit Configuration",
             "save": "Save",
@@ -2308,6 +2313,7 @@
             "show_code_editor": "Show Code Editor",
             "add": "Add Card",
             "edit": "Edit",
+            "clear": "Clear",
             "delete": "Delete card",
             "duplicate": "Duplicate card",
             "move": "Move to View",
@@ -2586,6 +2592,12 @@
             "types": {
               "graph": {
                 "name": "Graph"
+              },
+              "picture": {
+                "name": "Picture"
+              },
+              "buttons": {
+                "name": "Buttons"
               }
             }
           },

From 483a54219a5f7c29cbc24f490a5373524e20f678 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 17:49:41 -0500
Subject: [PATCH 53/63] cleanup

---
 src/panels/lovelace/editor/hui-element-editor.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 963c47d833f0..a75e82d56ea1 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -110,8 +110,6 @@ export class HuiElementEditor extends LitElement {
   private _setConfig(): void {
     if (!this._error) {
       try {
-        console.log("update config");
-
         this._updateConfigElement();
         this._error = undefined;
       } catch (err) {
@@ -244,7 +242,6 @@ export class HuiElementEditor extends LitElement {
   private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
-    console.log("Config Changed in Element", config);
     this.value = config;
   }
 
@@ -271,7 +268,7 @@ export class HuiElementEditor extends LitElement {
         // If the type has changed, we need to load a new GUI editor
 
         if (!this.configElementType) {
-          throw new Error(`No card type defined`);
+          throw new Error(`No type defined`);
         }
 
         this._configElementType = this.configElementType;
@@ -298,7 +295,6 @@ export class HuiElementEditor extends LitElement {
 
       // Setup GUI editor and check that it can handle the current config
       try {
-        // @ts-ignore
         this._configElement!.setConfig(this.value);
       } catch (err) {
         throw new GUISupportError(

From 65219b7cc8bb29febb6d5350b6c5de4255cbba33 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 17:53:04 -0500
Subject: [PATCH 54/63] More cleanup

---
 src/panels/lovelace/types.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index 22d0a1d52878..437fd58fa206 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -55,7 +55,7 @@ export interface LovelaceHeaderFooterConstructor
     hass: HomeAssistant,
     entities: string[],
     entitiesFallback: string[]
-  ) => LovelaceCardConfig;
+  ) => LovelaceHeaderFooterConfig;
   getConfigElement?: () => LovelaceHeaderFooterEditor;
 }
 
@@ -69,15 +69,22 @@ export interface LovelaceHeaderFooter extends HTMLElement {
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }
 
-export type LovelaceCardEditor = LovelaceGenericElementEditor;
+export interface LovelaceCardEditor extends LovelaceGenericElementEditor {
+  setConfig(config: LovelaceCardConfig): void;
+}
 
-export type LovelaceHeaderFooterEditor = LovelaceGenericElementEditor;
+export interface LovelaceHeaderFooterEditor
+  extends LovelaceGenericElementEditor {
+  setConfig(config: LovelaceHeaderFooterConfig): void;
+}
 
-export type LovelaceRowEditor = LovelaceGenericElementEditor;
+export interface LovelaceRowEditor extends LovelaceGenericElementEditor {
+  setConfig(config: LovelaceRowConfig): void;
+}
 
 export interface LovelaceGenericElementEditor extends HTMLElement {
   hass?: HomeAssistant;
   lovelace?: LovelaceConfig;
-  setConfig(config: LovelaceRowConfig): void;
+  setConfig(config: any): void;
   refreshYamlEditor?: (focus: boolean) => void;
 }

From 29af611311f2cbb613c6f9e413d140804865b846 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 17:54:02 -0500
Subject: [PATCH 55/63] lint

---
 .../header-footer-editor/hui-dialog-create-headerfooter.ts    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index bbf2967ba502..37328f6aeff1 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -28,10 +28,6 @@ export class HuiCreateDialogHeaderFooter extends LitElement
 
   @internalProperty() private _params?: CreateHeaderFooterDialogParams;
 
-  private _unusedEntities?: string[];
-
-  private _usedEntities?: string[];
-
   public async showDialog(
     params: CreateHeaderFooterDialogParams
   ): Promise<void> {

From eb253e93492afbe7776deb63ef8600b4b1625be0 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 18:05:41 -0500
Subject: [PATCH 56/63] fix saving to be less complicated

---
 .../hui-entities-card-editor.ts               | 43 +++----------------
 .../lovelace/editor/hui-element-editor.ts     |  3 +-
 src/panels/lovelace/editor/types.ts           |  4 ++
 3 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index fc9ad71d34bf..bdeb4633e6ab 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -40,21 +40,12 @@ import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
+  EditSubElementEvent,
   entitiesConfigStruct,
   SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
-interface EditDetailElementEvent {
-  subElementConfig: SubElementEditorConfig;
-}
-
-declare global {
-  interface HASSDomEvents {
-    "edit-detail-element": EditDetailElementEvent;
-  }
-}
-
 const cardConfigStruct = object({
   type: string(),
   title: optional(union([string(), boolean()])),
@@ -157,14 +148,14 @@ export class HuiEntitiesCardEditor extends LitElement
             .hass=${this.hass}
             .configValue=${"header"}
             .config=${this._config.header}
-            @value-changed=${this._headerFooterChanged}
+            @value-changed=${this._valueChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-header-footer-editor>
           <hui-header-footer-editor
             .hass=${this.hass}
             .configValue=${"footer"}
             .config=${this._config.footer}
-            @value-changed=${this._headerFooterChanged}
+            @value-changed=${this._valueChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-header-footer-editor>
         </div>
@@ -190,7 +181,7 @@ export class HuiEntitiesCardEditor extends LitElement
     const value =
       target.checked !== undefined
         ? target.checked
-        : target.value || ev.detail.config;
+        : target.value || ev.detail.config || ev.detail.value;
 
     if (
       (configValue! === "title" && target.value === this._title) ||
@@ -230,31 +221,7 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _headerFooterChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-
-    const target = ev.target! as EditorTarget;
-
-    if (!target.configValue) {
-      return;
-    }
-
-    if (ev.detail.value === "") {
-      this._config = { ...this._config };
-      delete this._config[target.configValue!];
-    } else {
-      this._config = {
-        ...this._config,
-        [target.configValue]: ev.detail.value,
-      };
-    }
-
-    fireEvent(this, "config-changed", { config: this._config });
-  }
-
-  private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
+  private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
     this._subElementEditorConfig = ev.detail.subElementConfig;
   }
 
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index a75e82d56ea1..9124445e0e06 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -28,7 +28,7 @@ import type { LovelaceRowConfig } from "../entity-rows/types";
 import type { LovelaceGenericElementEditor } from "../types";
 import "./config-elements/hui-generic-entity-row-editor";
 import { GUISupportError } from "./gui-support-error";
-import { GUIModeChangedEvent } from "./types";
+import { EditSubElementEvent, GUIModeChangedEvent } from "./types";
 
 export interface ConfigChangedEvent {
   config: LovelaceCardConfig | LovelaceRowConfig;
@@ -40,6 +40,7 @@ declare global {
   interface HASSDomEvents {
     "config-changed": ConfigChangedEvent;
     "GUImode-changed": GUIModeChangedEvent;
+    "edit-detail-element": EditSubElementEvent;
   }
 }
 
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index 4bf3a518ca99..3f657062a69f 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -88,6 +88,10 @@ export interface SubElementEditorConfig {
   type: string;
 }
 
+export interface EditSubElementEvent {
+  subElementConfig: SubElementEditorConfig;
+}
+
 export const actionConfigStruct = object({
   action: string(),
   navigation_path: optional(string()),

From eadeedab66b7c6fdf4eaa670b4fe9318483d1153 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 18:13:54 -0500
Subject: [PATCH 57/63] Update loclaization

---
 .../hui-dialog-create-headerfooter.ts                 | 11 ++++++++++-
 .../header-footer-editor/hui-header-footer-editor.ts  |  3 ++-
 .../show-create-headerfooter-dialog.ts                |  1 +
 src/translations/en.json                              |  1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index 37328f6aeff1..94499192c0ff 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -49,7 +49,16 @@ export class HuiCreateDialogHeaderFooter extends LitElement
       <ha-dialog
         open
         scrimClickAction
-        .heading=${createCloseHeading(this.hass, "Pick Header or Footer")}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass!.localize(
+            `ui.panel.lovelace.editor.header-footer.choose_header_footer`,
+            "type",
+            this.hass!.localize(
+              `ui.panel.lovelace.editor.header-footer.${this._params.type}`
+            )
+          )
+        )}
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
       >
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 92a3888b3b19..4c9a87c29076 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -27,7 +27,7 @@ export class HuiHeaderFooterEditor extends LitElement {
 
   @property({ attribute: false }) public config?: LovelaceHeaderFooterConfig;
 
-  @property() public configValue!: string;
+  @property() public configValue!: "header" | "footer";
 
   protected render(): TemplateResult {
     return html`
@@ -92,6 +92,7 @@ export class HuiHeaderFooterEditor extends LitElement {
   private _add(): void {
     showCreateHeaderFooterDialog(this, {
       pickHeaderFooter: (config) => this._elementPicked(config),
+      type: this.configValue,
     });
   }
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
index a48a0142bf8b..7b55a2fefd23 100644
--- a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
@@ -3,6 +3,7 @@ import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 
 export interface CreateHeaderFooterDialogParams {
   pickHeaderFooter: (config: LovelaceHeaderFooterConfig) => void;
+  type: "header" | "footer";
   entities?: string[]; // We can pass entity id's that will be added to the config when a header footer is picked
 }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index e3871d5e49bb..2351ec54fc20 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2589,6 +2589,7 @@
           "header-footer": {
             "header": "Header",
             "footer": "Footer",
+            "choose_header_footer": "Choose a {type}",
             "types": {
               "graph": {
                 "name": "Graph"

From 293a991e97fe1c0f4c04513975b1d2cd140cfcdd Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 19 Oct 2020 18:18:46 -0500
Subject: [PATCH 58/63] Localize none

---
 .../editor/header-footer-editor/hui-header-footer-editor.ts    | 2 +-
 src/translations/en.json                                       | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 4c9a87c29076..63129d8dd269 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -37,7 +37,7 @@ export class HuiHeaderFooterEditor extends LitElement {
             `ui.panel.lovelace.editor.header-footer.${this.configValue}`
           )}:
           ${!this.config?.type
-            ? "None"
+            ? this.hass!.localize("ui.panel.lovelace.editor.common.none")
             : this.hass!.localize(
                 `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
               )}
diff --git a/src/translations/en.json b/src/translations/en.json
index 2351ec54fc20..90b74aa75e10 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2260,7 +2260,8 @@
           "common": {
             "edit": "Edit",
             "clear": "Clear",
-            "add": "Add"
+            "add": "Add",
+            "none": "None"
           },
           "raw_editor": {
             "header": "Edit Configuration",

From b072c8bc3778e8752e92fbba158a98506e35b422 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 20 Oct 2020 19:00:37 -0500
Subject: [PATCH 59/63] comments Kind of

---
 .../hui-entities-card-editor.ts               | 74 ++++++++++++++-----
 .../hui-row-element-editor.ts                 |  5 +-
 .../hui-dialog-create-headerfooter.ts         | 57 +++++---------
 .../lovelace/editor/hui-element-editor.ts     | 10 +--
 .../lovelace/editor/hui-sub-element-editor.ts |  8 +-
 5 files changed, 91 insertions(+), 63 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index bdeb4633e6ab..ad792fe7cf96 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -87,13 +87,15 @@ export class HuiEntitiesCardEditor extends LitElement
       return html``;
     }
 
+    console.log("render editor", this._subElementEditorConfig);
+
     if (this._subElementEditorConfig) {
       return html`
         <hui-sub-element-editor
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
           @go-back=${this._goBack}
-          @config-changed=${this._valueChanged}
+          @config-changed=${this._handleSubElementChanged}
         >
         </hui-sub-element-editor>
       `;
@@ -143,22 +145,20 @@ export class HuiEntitiesCardEditor extends LitElement
             ></ha-switch>
           </ha-formfield>
         </div>
-        <div class="side-by-side">
-          <hui-header-footer-editor
-            .hass=${this.hass}
-            .configValue=${"header"}
-            .config=${this._config.header}
-            @value-changed=${this._valueChanged}
-            @edit-detail-element=${this._editDetailElement}
-          ></hui-header-footer-editor>
-          <hui-header-footer-editor
-            .hass=${this.hass}
-            .configValue=${"footer"}
-            .config=${this._config.footer}
-            @value-changed=${this._valueChanged}
-            @edit-detail-element=${this._editDetailElement}
-          ></hui-header-footer-editor>
-        </div>
+        <hui-header-footer-editor
+          .hass=${this.hass}
+          .configValue=${"header"}
+          .config=${this._config.header}
+          @value-changed=${this._valueChanged}
+          @edit-detail-element=${this._editDetailElement}
+        ></hui-header-footer-editor>
+        <hui-header-footer-editor
+          .hass=${this.hass}
+          .configValue=${"footer"}
+          .config=${this._config.footer}
+          @value-changed=${this._valueChanged}
+          @edit-detail-element=${this._editDetailElement}
+        ></hui-header-footer-editor>
       </div>
       <hui-entities-card-row-editor
         .hass=${this.hass}
@@ -221,6 +221,46 @@ export class HuiEntitiesCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
+  private _handleSubElementChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const configValue = this._subElementEditorConfig?.type;
+    const value = ev.detail.config;
+
+    if (configValue === "row") {
+      const newConfigEntities = this._configEntities!.concat();
+      if (!value) {
+        newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
+        this._goBack();
+      } else {
+        newConfigEntities[this._subElementEditorConfig!.index!] = value;
+      }
+
+      this._config = { ...this._config!, entities: newConfigEntities };
+      this._configEntities = processEditorEntities(this._config!.entities);
+    } else if (configValue) {
+      if (value === "") {
+        this._config = { ...this._config };
+        delete this._config[configValue!];
+      } else {
+        this._config = {
+          ...this._config,
+          [configValue]: value,
+        };
+      }
+    }
+
+    this._subElementEditorConfig = {
+      ...this._subElementEditorConfig!,
+      elementConfig: value,
+    };
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
   private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
     this._subElementEditorConfig = ev.detail.subElementConfig;
   }
diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
index dbfe0279309e..00ab2c655344 100644
--- a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
+++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
@@ -1,14 +1,15 @@
 import { customElement } from "lit-element";
 import { getRowElementClass } from "../../create-element/create-row-element";
+import { LovelaceRowConfig } from "../../entity-rows/types";
 import type { LovelaceRowEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 const GENERIC_ROW_TYPE = "generic-row";
 
 @customElement("hui-row-element-editor")
-export class HuiRowElementEditor extends HuiElementEditor {
+export class HuiRowElementEditor extends HuiElementEditor<LovelaceRowConfig> {
   protected get configElementType(): string | undefined {
-    if (!this.value?.type && "entity" in this.value) {
+    if (!this.value?.type && "entity" in this.value!) {
       return GENERIC_ROW_TYPE;
     }
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index 94499192c0ff..4e078df8183a 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -9,17 +9,15 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { until } from "lit-html/directives/until";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
-import { HomeAssistant } from "../../../../types";
-import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 import { headerFooterElements } from "../lovelace-headerfooters";
-import { HeaderFooter } from "../types";
 import { getHeaderFooterStubConfig } from "./get-headerfooter-stub-config";
-import { CreateHeaderFooterDialogParams } from "./show-create-headerfooter-dialog";
+import type { CreateHeaderFooterDialogParams } from "./show-create-headerfooter-dialog";
 
 @customElement("hui-dialog-create-headerfooter")
 export class HuiCreateDialogHeaderFooter extends LitElement
@@ -63,18 +61,22 @@ export class HuiCreateDialogHeaderFooter extends LitElement
         @closed=${this._cancel}
       >
         <div class="elements">
-          ${headerFooterElements.map((headerFooter) =>
-            until(
-              this._renderHeaderFooterElement(headerFooter),
+          ${headerFooterElements.map(
+            (headerFooter) =>
               html`
-                <div class="spinner">
-                  <ha-circular-progress
-                    active
-                    alt="Loading"
-                  ></ha-circular-progress>
-                </div>
+                <ha-card
+                  outlined
+                  .type=${headerFooter.type}
+                  @click=${this._handleHeaderFooterPicked}
+                >
+                  <ha-svg-icon .path=${headerFooter.icon}></ha-svg-icon>
+                  <div>
+                    ${this.hass!.localize(
+                      `ui.panel.lovelace.editor.header-footer.types.${headerFooter.type}.name`
+                    )}
+                  </div>
+                </ha-card>
               `
-            )
           )}
         </div>
         <div slot="primaryAction">
@@ -86,10 +88,8 @@ export class HuiCreateDialogHeaderFooter extends LitElement
     `;
   }
 
-  private async _renderHeaderFooterElement(
-    headerFooter: HeaderFooter
-  ): Promise<TemplateResult> {
-    const { type, icon } = headerFooter;
+  private async _handleHeaderFooterPicked(ev: CustomEvent): Promise<void> {
+    const type = (ev.currentTarget as any).type;
     let config: LovelaceHeaderFooterConfig = { type };
 
     if (this.hass) {
@@ -101,24 +101,7 @@ export class HuiCreateDialogHeaderFooter extends LitElement
       );
     }
 
-    return html`
-      <ha-card
-        outlined
-        .config=${config}
-        @click=${this._handleHeaderFooterPicked}
-      >
-        <ha-svg-icon .path=${icon}></ha-svg-icon>
-        <div>
-          ${this.hass!.localize(
-            `ui.panel.lovelace.editor.header-footer.types.${type}.name`
-          )}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _handleHeaderFooterPicked(ev: CustomEvent) {
-    this._params!.pickHeaderFooter((ev.currentTarget as any).config);
+    this._params!.pickHeaderFooter(config);
     this.closeDialog();
   }
 
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 9124445e0e06..b3dadcc136cb 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -51,14 +51,14 @@ export interface UIConfigChangedEvent extends Event {
 }
 
 @customElement("hui-element-editor")
-export class HuiElementEditor extends LitElement {
+export class HuiElementEditor<T extends { type?: string }> extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
   @internalProperty() private _yaml?: string;
 
-  @internalProperty() private _config?: any;
+  @internalProperty() private _config?: T;
 
   @internalProperty() private _configElement?: LovelaceGenericElementEditor;
 
@@ -94,11 +94,11 @@ export class HuiElementEditor extends LitElement {
     this._setConfig();
   }
 
-  public get value(): any | undefined {
+  public get value(): T | undefined {
     return this._config;
   }
 
-  public set value(config: any | undefined) {
+  public set value(config: T | undefined) {
     if (this._config && deepEqual(config, this._config)) {
       return;
     }
@@ -354,6 +354,6 @@ export class HuiElementEditor extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-element-editor": HuiElementEditor;
+    "hui-element-editor": HuiElementEditor<any>;
   }
 }
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index eb489e82fe19..c382ed057000 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -15,9 +15,11 @@ import {
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
+import type { LovelaceRowConfig } from "../entity-rows/types";
+import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import "./entity-row-editor/hui-row-element-editor";
-import type { HuiRowElementEditor } from "./entity-row-editor/hui-row-element-editor";
 import "./header-footer-editor/hui-header-footer-element-editor";
+import type { HuiElementEditor } from "./hui-element-editor";
 import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
 
 declare global {
@@ -36,7 +38,9 @@ export class HuiSubElementEditor extends LitElement {
 
   @internalProperty() private _guiMode = true;
 
-  @query(".editor") private _editorElement?: HuiRowElementEditor;
+  @query(".editor") private _editorElement?: HuiElementEditor<
+    LovelaceRowConfig | LovelaceHeaderFooterConfig
+  >;
 
   protected render(): TemplateResult {
     return html`

From a14c0eeb72ea91d6f7a223e2435892e3544ce89c Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 9 Nov 2020 11:44:25 -0600
Subject: [PATCH 60/63] console.die

---
 .../lovelace/editor/config-elements/hui-entities-card-editor.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index ad792fe7cf96..8fbbcc7a6b12 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -87,8 +87,6 @@ export class HuiEntitiesCardEditor extends LitElement
       return html``;
     }
 
-    console.log("render editor", this._subElementEditorConfig);
-
     if (this._subElementEditorConfig) {
       return html`
         <hui-sub-element-editor

From 628dac439b9668f5e749f07fa91f26fc4eb38a66 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 9 Nov 2020 13:30:26 -0600
Subject: [PATCH 61/63] Typing updates

---
 .../editor/card-editor/hui-card-element-editor.ts         | 3 ++-
 .../hui-dialog-create-headerfooter.ts                     | 2 +-
 .../header-footer-editor/hui-header-footer-editor.ts      | 4 ++--
 .../show-create-headerfooter-dialog.ts                    | 2 +-
 src/panels/lovelace/editor/hui-element-editor.ts          | 8 ++++----
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index 83814b50a726..f2d99f3ad01e 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -1,10 +1,11 @@
 import { customElement } from "lit-element";
+import type { LovelaceCardConfig } from "../../../../data/lovelace";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import type { LovelaceCardEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 @customElement("hui-card-element-editor")
-export class HuiCardElementEditor extends HuiElementEditor {
+export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
   protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
     const elClass = await getCardElementClass(this.configElementType!);
 
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index 4e078df8183a..2a1ccc928fab 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -11,7 +11,7 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
-import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 63129d8dd269..dc064f7ddda7 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -14,9 +14,9 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-paper-dropdown-menu";
 import "../../../../components/ha-svg-icon";
-import { LovelaceConfig } from "../../../../data/lovelace";
+import type { LovelaceConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
-import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 import { showCreateHeaderFooterDialog } from "./show-create-headerfooter-dialog";
 
 @customElement("hui-header-footer-editor")
diff --git a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
index 7b55a2fefd23..8d5ce5568683 100644
--- a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
@@ -1,5 +1,5 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 
 export interface CreateHeaderFooterDialogParams {
   pickHeaderFooter: (config: LovelaceHeaderFooterConfig) => void;
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index b3dadcc136cb..76cace502991 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -51,7 +51,7 @@ export interface UIConfigChangedEvent extends Event {
 }
 
 @customElement("hui-element-editor")
-export class HuiElementEditor<T extends { type?: string }> extends LitElement {
+export class HuiElementEditor<T> extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
@@ -119,7 +119,7 @@ export class HuiElementEditor<T extends { type?: string }> extends LitElement {
     }
 
     fireEvent(this, "config-changed", {
-      config: this.value!,
+      config: this.value! as any,
       error: this._error,
       guiModeAvailable: !(this.hasWarning || this.hasError),
     });
@@ -169,7 +169,7 @@ export class HuiElementEditor<T extends { type?: string }> extends LitElement {
   }
 
   protected get configElementType(): string | undefined {
-    return this.value?.type;
+    return this.value ? (this.value as any).type : undefined;
   }
 
   protected render(): TemplateResult {
@@ -243,7 +243,7 @@ export class HuiElementEditor<T extends { type?: string }> extends LitElement {
   private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
-    this.value = config;
+    this.value = (config as unknown) as T;
   }
 
   private _handleYAMLChanged(ev: CustomEvent) {

From 3142e900ef46e7a4787c12a3219f754dfa6aac85 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 9 Nov 2020 13:40:54 -0600
Subject: [PATCH 62/63] Header and footer types

---
 .../header-footer-editor/hui-header-footer-element-editor.ts | 5 ++++-
 src/panels/lovelace/editor/hui-element-editor.ts             | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
index 512a3b72ecbc..3ddd0fa1a525 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -1,10 +1,13 @@
 import { customElement } from "lit-element";
 import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 import type { LovelaceHeaderFooterEditor } from "../../types";
 import { HuiElementEditor } from "../hui-element-editor";
 
 @customElement("hui-headerfooter-element-editor")
-export class HuiHeaderFooterElementEditor extends HuiElementEditor {
+export class HuiHeaderFooterElementEditor extends HuiElementEditor<
+  LovelaceHeaderFooterConfig
+> {
   protected async getConfigElement(): Promise<
     LovelaceHeaderFooterEditor | undefined
   > {
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 76cace502991..7ac9e091eab5 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -25,13 +25,14 @@ import type {
 import type { HomeAssistant } from "../../../types";
 import { handleStructError } from "../common/structs/handle-errors";
 import type { LovelaceRowConfig } from "../entity-rows/types";
+import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceGenericElementEditor } from "../types";
 import "./config-elements/hui-generic-entity-row-editor";
 import { GUISupportError } from "./gui-support-error";
 import { EditSubElementEvent, GUIModeChangedEvent } from "./types";
 
 export interface ConfigChangedEvent {
-  config: LovelaceCardConfig | LovelaceRowConfig;
+  config: LovelaceCardConfig | LovelaceRowConfig | LovelaceHeaderFooterConfig;
   error?: string;
   guiModeAvailable?: boolean;
 }
@@ -46,7 +47,7 @@ declare global {
 
 export interface UIConfigChangedEvent extends Event {
   detail: {
-    config: LovelaceCardConfig | LovelaceRowConfig;
+    config: LovelaceCardConfig | LovelaceRowConfig | LovelaceHeaderFooterConfig;
   };
 }
 

From a4d6ef8432b6d6281a38c9ddb50bed7083d3ad76 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 9 Nov 2020 14:48:51 -0600
Subject: [PATCH 63/63] abstract class

---
 src/panels/lovelace/editor/hui-element-editor.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 7ac9e091eab5..fa4ecddfb460 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -3,7 +3,6 @@ import { safeDump, safeLoad } from "js-yaml";
 import {
   css,
   CSSResult,
-  customElement,
   html,
   internalProperty,
   LitElement,
@@ -51,8 +50,7 @@ export interface UIConfigChangedEvent extends Event {
   };
 }
 
-@customElement("hui-element-editor")
-export class HuiElementEditor<T> extends LitElement {
+export abstract class HuiElementEditor<T> extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
@@ -352,9 +350,3 @@ export class HuiElementEditor<T> extends LitElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-element-editor": HuiElementEditor<any>;
-  }
-}