From ab74c7f7eb39fd2b44a359047fefccb0fed3d603 Mon Sep 17 00:00:00 2001
From: Matteo Agnoletto <info@epmatt.com>
Date: Mon, 15 Feb 2021 10:22:00 +0100
Subject: [PATCH] Add select selector for blueprints (#8297)

---
 .../ha-selector/ha-selector-select.ts         | 73 +++++++++++++++++++
 src/components/ha-selector/ha-selector.ts     |  1 +
 src/data/selector.ts                          | 10 ++-
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ha-selector/ha-selector-select.ts

diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
new file mode 100644
index 0000000000..0c89ec8bfd
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -0,0 +1,73 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import { SelectSelector } from "../../data/selector";
+import "../ha-paper-dropdown-menu";
+
+@customElement("ha-selector-select")
+export class HaSelectSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: SelectSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html`<ha-paper-dropdown-menu .label=${this.label}>
+      <paper-listbox
+        slot="dropdown-content"
+        attr-for-selected="item-value"
+        .selected=${this.value}
+        @selected-item-changed=${this._valueChanged}
+      >
+        ${this.selector.select.options.map(
+          (item: string) => html`
+            <paper-item .itemValue=${item}>
+              ${item}
+            </paper-item>
+          `
+        )}
+      </paper-listbox>
+    </ha-paper-dropdown-menu>`;
+  }
+
+  private _valueChanged(ev) {
+    if (!ev.detail.value) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: ev.detail.value.itemValue,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-paper-dropdown-menu {
+        width: 100%;
+        min-width: 200px;
+        display: block;
+      }
+      paper-listbox {
+        min-width: 200px;
+      }
+      paper-item {
+        cursor: pointer;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-select": HaSelectSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 88d702c9d1..410d46f883 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -12,6 +12,7 @@ import "./ha-selector-target";
 import "./ha-selector-time";
 import "./ha-selector-object";
 import "./ha-selector-text";
+import "./ha-selector-select";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
diff --git a/src/data/selector.ts b/src/data/selector.ts
index e045ce8b88..a3eedee92d 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -8,8 +8,8 @@ export type Selector =
   | TimeSelector
   | ActionSelector
   | StringSelector
-  | ObjectSelector;
-
+  | ObjectSelector
+  | SelectSelector;
 export interface EntitySelector {
   entity: {
     integration?: string;
@@ -95,3 +95,9 @@ export interface ObjectSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   object: {};
 }
+
+export interface SelectSelector {
+  select: {
+    options: string[];
+  };
+}