✨ UI Editor for map card (#2287)

* ✨ UI Editor for `map` card

* Address review comments

* Revert change properly

* Address review comments

* Note to change to interface after LL conversion

* Remove config options if empty

Should apply to other editors

* entitites is required

* cleanup

* cleanup

* Fix for number values

* Name chunk

* Remove zoom default

src/panels/lovelace/cards/hui-map-card.js

@@ -11,7 +11,24 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import debounce from "../../../common/util/debounce";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 
+// should be interface when converted to TS
+export const Config = {
+  title: "",
+  aspect_ratio: "",
+  default_zoom: 14,
+  entities: [],
+};
+
 class HuiMapCard extends PolymerElement {
+  static async getConfigElement() {
+    await import(/* webpackChunkName: "hui-map-card-editor" */ "../editor/config-elements/hui-map-card-editor");
+    return document.createElement("hui-map-card-editor");
+  }
+
+  static getStubConfig() {
+    return { entities: [] };
+  }
+
   static get template() {
     return html`
       <style>

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

@@ -0,0 +1,143 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-input/paper-input";
+
+import { struct } from "../../common/structs/struct";
+import { EntitiesEditorEvent, EditorTarget } from "../types";
+import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCardEditor } from "../../types";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { Config } from "../../cards/hui-alarm-panel-card";
+import { configElementStyle } from "./config-elements-style";
+import { processEditorEntities } from "../process-editor-entities";
+import { EntityConfig } from "../../entity-rows/types";
+
+import "../../components/hui-entity-editor";
+
+const entitiesConfigStruct = struct.union([
+  {
+    entity: "entity-id",
+    name: "string?",
+    icon: "icon?",
+  },
+  "entity-id",
+]);
+
+const cardConfigStruct = struct({
+  type: "string",
+  title: "string?",
+  aspect_ratio: "string?",
+  default_zoom: "number?",
+  entities: [entitiesConfigStruct],
+});
+
+export class HuiMapCardEditor extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCardEditor {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _configEntities?: EntityConfig[];
+
+  public setConfig(config: Config): void {
+    config = cardConfigStruct(config);
+    this._config = config;
+    this._configEntities = processEditorEntities(config.entities);
+  }
+
+  static get properties(): PropertyDeclarations {
+    return { hass: {}, _config: {}, _configEntities: {} };
+  }
+
+  get _title(): string {
+    return this._config!.title || "";
+  }
+
+  get _aspect_ratio(): string {
+    return this._config!.aspect_ratio || "";
+  }
+
+  get _default_zoom(): number {
+    return this._config!.default_zoom || NaN;
+  }
+
+  get _entities(): string[] {
+    return this._config!.entities || [];
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      ${configElementStyle}
+      <div class="card-config">
+        <paper-input
+          label="Title"
+          .value="${this._title}"
+          .configValue="${"title"}"
+          @value-changed="${this._valueChanged}"
+        ></paper-input>
+        <div class="side-by-side">
+          <paper-input
+            label="Aspect Ratio"
+            .value="${this._aspect_ratio}"
+            .configValue="${"aspect_ratio"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+          <paper-input
+            label="Default Zoom"
+            type="number"
+            .value="${this._default_zoom}"
+            .configValue="${"default_zoom"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+        </div>
+        <hui-entity-editor
+          .hass="${this.hass}"
+          .entities="${this._configEntities}"
+          @entities-changed="${this._valueChanged}"
+        ></hui-entity-editor>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: EntitiesEditorEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+    if (target.configValue && this[`_${target.configValue}`] === target.value) {
+      return;
+    }
+    if (ev.detail && ev.detail.entities) {
+      this._config.entities = ev.detail.entities;
+      this._configEntities = processEditorEntities(this._config.entities);
+    } else if (target.configValue) {
+      if (
+        target.value === "" ||
+        (target.type === "number" && isNaN(Number(target.value)))
+      ) {
+        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-map-card-editor": HuiMapCardEditor;
+  }
+}
+
+customElements.define("hui-map-card-editor", HuiMapCardEditor);