From b8d3c68a7ad8d5ba870a393893e0d4a628d168af Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Mon, 14 Mar 2022 13:07:15 -0500
Subject: [PATCH] Add Color Temp Selector (#12041)

---
 gallery/src/pages/components/ha-selector.ts   |  4 ++
 .../ha-selector/ha-selector-color-temp.ts     | 58 +++++++++++++++++++
 src/components/ha-selector/ha-selector.ts     |  1 +
 src/data/selector.ts                          | 10 +++-
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ha-selector/ha-selector-color-temp.ts

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index c3855147ed..9f585d051a 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -173,6 +173,10 @@ const SCHEMAS: {
         name: "Location with radius",
         selector: { location: { radius: true, icon: "mdi:home" } },
       },
+      "color-temp": {
+        name: "Color Temperature",
+        selector: { color_temp: {} },
+      },
     },
   },
   {
diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts
new file mode 100644
index 0000000000..684a813225
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@@ -0,0 +1,58 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import type { ColorTempSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-labeled-slider";
+
+@customElement("ha-selector-color_temp")
+export class HaColorTempSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: ColorTempSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-labeled-slider
+        pin
+        icon="hass:thermometer"
+        .caption=${this.label}
+        .min=${this.selector.color_temp.min_mireds ?? 153}
+        .max=${this.selector.color_temp.max_mireds ?? 500}
+        .value=${this.value}
+        @change=${this._valueChanged}
+      ></ha-labeled-slider>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", {
+      value: Number((ev.target as any).value),
+    });
+  }
+
+  static styles = css`
+    ha-labeled-slider {
+      --ha-slider-background: -webkit-linear-gradient(
+        right,
+        rgb(255, 160, 0) 0%,
+        white 50%,
+        rgb(166, 209, 255) 100%
+      );
+      /* The color temp minimum value shouldn't be rendered differently. It's not "off". */
+      --paper-slider-knob-start-border-color: var(--primary-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-color_temp": HaColorTempSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 61b790cd98..25c570a8e9 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -21,6 +21,7 @@ import "./ha-selector-icon";
 import "./ha-selector-media";
 import "./ha-selector-theme";
 import "./ha-selector-location";
+import "./ha-selector-color-temp";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 76f673b125..4e75ad8268 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -16,7 +16,8 @@ export type Selector =
   | IconSelector
   | MediaSelector
   | ThemeSelector
-  | LocationSelector;
+  | LocationSelector
+  | ColorTempSelector;
 
 export interface EntitySelector {
   entity: {
@@ -97,6 +98,13 @@ export interface NumberSelector {
   };
 }
 
+export interface ColorTempSelector {
+  color_temp: {
+    min_mireds?: number;
+    max_mireds?: number;
+  };
+}
+
 export interface BooleanSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   boolean: {};