diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts
new file mode 100644
index 0000000000..f0809b613b
--- /dev/null
+++ b/src/panels/lovelace/components/hui-input-list-editor.ts
@@ -0,0 +1,115 @@
+import {
+ html,
+ css,
+ LitElement,
+ property,
+ TemplateResult,
+ CSSResult,
+ customElement,
+} from "lit-element";
+import "@polymer/paper-input/paper-input";
+
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import { EditorTarget } from "../editor/types";
+
+@customElement("hui-input-list-editor")
+export class HuiInputListEditor extends LitElement {
+ @property() protected value?: string[];
+ @property() protected hass?: HomeAssistant;
+ @property() protected inputLabel?: string;
+
+ protected render(): TemplateResult | void {
+ if (!this.value) {
+ return html``;
+ }
+
+ return html`
+ ${this.value.map((listEntry, index) => {
+ return html`
+ Clear
+ `;
+ })}
+
+ `;
+ }
+
+ private _addEntry(ev: Event): void {
+ const target = ev.target! as EditorTarget;
+ if (target.value === "") {
+ return;
+ }
+ const newEntries = this.value!.concat(target.value as string);
+ target.value = "";
+ fireEvent(this, "value-changed", {
+ value: newEntries,
+ });
+ (ev.target! as LitElement).blur();
+ }
+
+ private _valueChanged(ev: Event): void {
+ ev.stopPropagation();
+ const target = ev.target! as EditorTarget;
+ const newEntries = this.value!.concat();
+ newEntries[target.index!] = target.value!;
+ fireEvent(this, "value-changed", {
+ value: newEntries,
+ });
+ }
+
+ private _consolidateEntries(ev: Event): void {
+ const target = ev.target! as EditorTarget;
+ if (target.value === "") {
+ const newEntries = this.value!.concat();
+ newEntries.splice(target.index!, 1);
+ fireEvent(this, "value-changed", {
+ value: newEntries,
+ });
+ }
+ }
+
+ private _removeEntry(ev: Event): void {
+ const parent = (ev.currentTarget as any).parentElement;
+ const newEntries = this.value!.concat();
+ newEntries.splice(parent.index!, 1);
+ fireEvent(this, "value-changed", {
+ value: newEntries,
+ });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ paper-input > paper-icon-button {
+ width: 24px;
+ height: 24px;
+ padding: 2px;
+ color: var(--secondary-text-color);
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-input-list-editor": HuiInputListEditor;
+ }
+}
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 045c7f94dc..bacda9c4d5 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
@@ -1,9 +1,11 @@
import {
html,
+ css,
LitElement,
TemplateResult,
customElement,
property,
+ CSSResult,
} from "lit-element";
import "@polymer/paper-input/paper-input";
@@ -16,8 +18,10 @@ import { MapCardConfig } from "../../cards/hui-map-card";
import { configElementStyle } from "./config-elements-style";
import { processEditorEntities } from "../process-editor-entities";
import { EntityConfig } from "../../entity-rows/types";
+import { PolymerChangedEvent } from "../../../../polymer-types";
import "../../components/hui-entity-editor";
+import "../../components/hui-input-list-editor";
const entitiesConfigStruct = struct.union([
{
@@ -34,6 +38,7 @@ const cardConfigStruct = struct({
aspect_ratio: "string?",
default_zoom: "number?",
entities: [entitiesConfigStruct],
+ geo_location_sources: "array?",
});
@customElement("hui-map-card-editor")
@@ -62,6 +67,10 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
return this._config!.default_zoom || NaN;
}
+ get _geo_location_sources(): string[] {
+ return this._config!.geo_location_sources || [];
+ }
+
protected render(): TemplateResult | void {
if (!this.hass) {
return html``;
@@ -94,31 +103,53 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
+
Geolocation Sources
+
+
+
`;
}
- private _valueChanged(ev: EntitiesEditorEvent): void {
+ private _entitiesValueChanged(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) {
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+ }
+
+ private _valueChanged(ev: PolymerChangedEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+ if (
+ target.configValue &&
+ ev.detail &&
+ this[`_${target.configValue}`] === ev.detail.value
+ ) {
+ return;
+ }
+ if (target.configValue && ev.detail) {
if (
- target.value === "" ||
- (target.type === "number" && isNaN(Number(target.value)))
+ ev.detail.value === "" ||
+ (target.type === "number" && isNaN(Number(ev.detail.value)))
) {
delete this._config[target.configValue!];
} else {
- let value: any = target.value;
+ let value: any = ev.detail.value;
if (target.type === "number") {
value = Number(value);
}
@@ -130,6 +161,14 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
}
fireEvent(this, "config-changed", { config: this._config });
}
+
+ static get styles(): CSSResult {
+ return css`
+ .geo_location_sources {
+ padding-left: 20px;
+ }
+ `;
+ }
}
declare global {